图片轮播 js
<!DOCTYPE html>
<html>
<head>
<title>首页</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/scroll.css">
<style>
.clr{clear: both;}
#group{border-width: 0;}
div{border: 1px solid gray}
body{margin: 0;}
ul{margin: 0; padding: 0; list-style: none;}
img{display: block;}
.direction{background: url("../img/nav.png") no-repeat;}
#group{width: 1280px; height: 850px; overflow: hidden; margin: auto; position: relative; overflow: hidden;}
.imgs{width: 6400px;}
.imgs img{float: left; overflow: hidden; width: 1280px; height: 850px;}
.but{position: absolute; bottom: 20px; left: 40%; }
.but li{width: 16px; height: 16px; margin: 20px; float: left; background: url("../img/white.png") no-repeat;}
.but .active{background: url("../img/blue.png") no-repeat;}
</style>
</head>
<body>
<div id="group">
<div class="imgs">
<img src="img/m1.jpg">
<img src="img/m2.jpg">
<img src="img/m3.jpg">
<img src="img/m4.jpg">
<img src="img/m1.jpg">
<br class="clr">
</div>
<ul class="but">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var but = $('.but'), imgs = $('.imgs'), z = 0;
but.on('click', 'li', function(){
// console.log(arguments[1])
var index = $(this).prevAll().length, mt = - 1280 * index;
imgs.stop().animate({marginLeft: mt}, 400);
$(this).siblings('.active').removeClass('active').end().addClass('active');
if(!arguments[1]){//手动点击， 清除之前的循环， 重新设置
clearInterval(z);
setInterv();
}
})
setInterv();
// 鼠标移到图片上 停止滚动， 移出去重新开始
imgs.on('mouseover', function(){
clearInterval(z);
}).on('mouseout', function(){
setInterv();
})
function setInterv(){
z = setInterval(function(){
var n = $('.active').next();
n.length || (n = but.children().eq(0));
n.trigger('click', 1);
}, 2000);
}
</script>
</html>
浙公网安备 33010602011771号