js jq制作轮播图

几张尺寸一样的图片

jp库文件

webstrom或者dreamweaver

html页面代码                       

   

   

   

   

   

   

html和css都编写好了，下面我们来看下轮播图制作需求：第一个需求：页面打开第一张图片显示，其余隐藏。$('.ig').eq(0).show().siblings().hide();      //siblings()其余隐藏也就是兄弟元素隐藏。第二个需求：图片间隔4S轮播一次   4s就是4000setInterval(function(){},time)间隔多长时间执行前面的方法function(){}第三个需求：图片轮播的时候红色背景也在变化$('.tab').eq(i).addClass('bg').siblings().removeClass('bg');当录播到对应的图片时给下面序号加上一个bg样式，其他移除样式bg。第四个需求：当鼠标放到下面序号的时候显示相应的图片，轮播停止，鼠标离开之后，轮播继续。$('.tab').hover(function(){},function(){});鼠标放上去的时候执行第一个事件，鼠标离开之后执行第二个事件首先要获取到当前鼠标放上去的那个下标索引第五个需求：左右点击事件在点击之前先停止轮播，清除轮播

以下是js代码var i=0;var timer;$(function(){    //$('igs').hover(function(){$('.btn').show();},function(){$('.btn').hide();});    $('.ig').eq(0).show().siblings().hide();//显示第一张图片，其余隐藏。    ShowTime();    $('.tab').hover(function(){        //获取到当前鼠标放上去的那个下标索引        i=$(this).index();        Show();//显示图片        clearInterval(timer);//清除轮播    },function(){  //当鼠标离开之后继续轮播        ShowTime();    });    //左边按钮    $('.btn1').click(function(){        clearInterval(timer);//清除轮播        if(i==0)        {            i=6;        }        i--;        //先显示再开始轮播        Show();//显示        ShowTime();//轮播    });    //右边按钮    $('.btn2').click(function(){        clearInterval(timer);//清除轮播        if(i==5)        {            i=-1;        }        i++;        //先显示再开始轮播        Show();//显示        ShowTime();//轮播    });});//图片以及下标显示方法function Show(){    //下标为i的图片显示，其余隐藏。    $('.ig').eq(i).fadeIn(300).siblings().fadeOut(300);    //当轮播到对应的图片时给下面序号加上一个bg样式，其他移除样式bg。    $('.tab').eq(i).addClass('bg').siblings().removeClass('bg');}//轮播过程方法function ShowTime() {    //轮播过程  图片间隔4S轮播一次    timer=setInterval(function(){        //间隔多长时间执行前面的方法function(){}        i++;        if(i==6)        {            i=0;        }        Show();    },4000);    //轮播过程结束}