js图片自动循环播放

PC端-js图片自动循环播放

该案例只支持PC端图片自动循环播放，不针对移动端touch事件。

针对移动PC都兼容的插件，这里可以向大家推荐jquery.slides.min.js的这个插件，如果响应式的网页用此插件最好了。

如果只是纯PC，用下边的js就好。

1.实现图片自动循环播放;

2.单击数字按钮时跳转对应图片;

3.左一张，右一张按钮单击时，显示相应的图片;

css:

<span style="font-size:18px;">body{font-size: 16px;font-family: "Microsoft Yahei";margin:0;padding:0;color:#fff;}
*{margin:0;padding:0;}
.slide{position: relative;width:100%;height:235px;overflow:hidden;margin:50px auto;}
ul,ol{text-decoration: none;list-style: none;}
ul.slide-img li{height:235px;overflow:hidden;display:none;position: absolute;left:0;top:0;}
img{width:100%;}
ul.slide-number{font-size:0;position: absolute;left: 0;bottom: 20px;z-index: 2;width:100%;text-align:center;}
ul.slide-number li{font-size:16px;background: #333;text-align: center;width:20px;height:20px;line-height: 20px;border-radius: 50%;margin:5px;display: inline-block;cursor:pointer;}
.slide .btn{cursor:pointer;width:30px;height:60px;position: absolute;top:50%;font-size: 30px;margin-top:-30px;background:rgba(255,255,255,.5);text-align: center;line-height: 60px;transition: all .3s;-webkit-transition:all .3s;display:none;}
.slide:hover .btn{display:block;} 
.slide .left{left:0;}
.slide .right{right:0;}
.slide .slide-number li.active{background: #a00;}</span>

html:

<div class="slide">
<ul class="slide-img">
<li><a href="#"><img src="img/1.jpg"></a></li>
<li><a href="#"><img src="img/3.jpg"></a></li>
</ul>
<ul class="slide-number">
</ul>
<div class="left btn"><</div>
<div class="right btn">></div>
</div>

javaScript

$(function(){
//初始化图片个数
var size = $(".slide-img li").size();
for(var i = 1; i <= size; i++){
var li = "<li>" + i + "</li>";
$(".slide-number").append(li);
}


//手动控制轮播
$(".slide-number li").eq(0).addClass("active");
$(".slide-img li").eq(0).show();
$(".slide-number li").mouseover(function(){
$(this).addClass("active").siblings().removeClass("active");
var index= $(this).index();
//如果不加这行，鼠标离开时index不与i相等，i=index保证接着往后走
i = index;
$(".slide-img li").eq(index).stop().fadeIn(500).siblings().stop().fadeOut(500);
});


//自动轮播
var i = 0;
var t = setInterval(animates,5000);
//核心代码
function animates(){
i++;
if(i == size){
i = 0;
}
$(".slide-number li").eq(i).addClass("active").siblings().removeClass("active");
$(".slide-img li").eq(i).fadeIn(500).siblings().fadeOut(500);
}
//核心向左
function animatesL(){
i--;
if(i == -1){
i = size - 1;
}
$(".slide-number li").eq(i).addClass("active").siblings().removeClass("active");
$(".slide-img li").eq(i).fadeIn(500).siblings().fadeOut(500);
}
//hover时停止播放图片
$(".slide").hover(function(){
clearInterval(t);
},function(){
t = setInterval(animates,5000);
});


//左右轮播
$(".left").click(function(){
animatesL();
});
$(".right").click(function(){
animates();
});
});