jquery手写轮播图_jQuery实现简单的轮播图

先看效果，如果是你想要的，可以看看

总体思路：

1.自动轮播

2.指定轮播

3.左右翻动

详细步骤：jQuery部分

设置第一张图片显示，其他的兄弟元素隐藏

自动轮播的时候，指定第一张的索引为 i=0，然后 i++, 使其对应的 i 索引的图片显示，其他的隐藏，当 i=5(即第六张图片的时候，使其为第一张即可，否则我们没有第六张图片就不显示了)。

指定图片轮播，就是鼠标移动到白圈上显示对应的图片，并计时器停止，我们可以看看图片上的内容，有的轮播图计时器还是继续的，看不了什么内容；鼠标离开则继续轮播。

左右翻动，左就是往左轮播，当 i = -1的时候使其为 4 (应该能知道什么意思吧，道理同自动轮播的括号里的内容)，往右轮播同左。

好了不多说了，直接上代码

html

<

>

css

*{

margin:0px;

padding:0px;

list-style-type:none;

}

#banner{

width:520px;

height:280px;

position:absolute;

top:50%;

margin-top:-140px;

left:50%;

margin-left:-260px;

}

.pic img{

position:absolute;

}

.tabs{

position:absolute;

bottom:10px;

left:200px;

}

.tabs li{

width:20px;

height:20px;

border:2px solid #fff;

float:left;

margin-left:5px;

border-radius:100%;

}

.btn{

width:30px;

height:50px;

background-color:rgba(0,0,0,.5);

color:#fff;

font-size:30px;

line-height:50px;

text-align:center;

position:absolute;

top:50%;

margin-top:-25px;

cursor:pointer;

}

.btn:hover{

background-color:rgba(0,0,0,.8);

color:red;

}

.btn1{

left:0;

}

.btn2{

right:0;

}

.bg{

background-color:red;

}

js

var i=0;

var Timer;

$(function(){

$(".picImg").eq(0).show().siblings().hide(); //默认第一张图片显示，其他的隐藏

//自动轮播

TimerBanner();

//点击红圈

$(".tabs li").hover(function(){ //鼠标移动上去

clearInterval(Timer); //让计时器暂时停止 清除计时器

i=$(this).index(); //获取该圈的索引

showPic(); //调用显示图片的方法，显示该索引对应的图片

},function(){ //鼠标离开

TimerBanner(); //继续轮播 计时器开始

});

//点击左右按钮

$(".btn1").click(function(){

clearInterval(Timer);

i--; //往左

if(i==-1){

i=4;

}

showPic();

TimerBanner();

});

$(".btn2").click(function(){

clearInterval(Timer);

i++; //往右

if(i==5){

i=0;

}

showPic();

TimerBanner();

});

});

//轮播部分

function TimerBanner(){

Timer = setInterval(function(){

i++;

if(i==5){

i=0;

}

showPic()

},1000);

}

//显示图片

function showPic(){

$(".picImg").eq(i).show().siblings().hide();

$(".tabs li").eq(i).addClass("bg").siblings().removeClass("bg");

}

思路也数说了，这个实例很简单，代码也有详细的注释，有不懂得随时呼叫我，看到即回，

下载链接：

链接：https://pan.baidu.com/s/1Ar7vP_cPUAwmw6UipnnzFg 密码：ypol