这篇文章主要是实现图片左右轮播效果，功能：进入页面自动播放图片，鼠标悬浮，暂停图片轮播，鼠标离开，继续图片轮播，点击页面按钮，滑到对应的图片，鼠标离开，从该位置继续轮播。代码中有详细的注释
代码如下
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
img {
display: block;
}
.box {
width: 500px;
height: 300px;
border: 1px solid #ccc;
overflow: hidden;
margin: 100px auto;
position: relative;
}
.banner {
left: 0;
top: 0;
position: absolute;
}
.banner .img {
width: 500px;
height: 300px;
float: left;
}
ul {
position: absolute;
right: 10px;
bottom: 10px;
}
ul li {
float: left;
width: 30px;
height: 30px;
background: #ccc;
color: #000;
text-align: center;
line-height: 30px;
border-radius: 50%;
opacity: .7;
cursor: pointer;
}
li+li {
margin-left: 10px;
}
.on {
background: #4eb900;
color: #fff;
}
.none{
display: none;
}
</style>
</head>
<body>
<div class="box">
<div class="banner" id="banner">
</div>
<ul class="btn">
<li class="on">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
//定义一个全局变量，用来控制播放到哪一张图片
var currentIndex = 0;
//定义定时器
var timer;
//获取图片的宽度
var imgWidth = $(".banner img").eq(0).width();
//定义banner盒子的宽度
$(".banner").css({"width":imgWidth*$(".banner img").length});
//点击每个按钮调到相应的界面
function clickBtn(){
for(var i = 0; i< $(".btn").find("li").length; i++){
$(".btn").find("li").click(function(){
$(this).addClass("on").siblings("li").removeClass("on");//为当前按钮添加样式
currentIndex = $(this).index();
$(".banner").animate({
"left": -imgWidth*currentIndex
})//让banner向左移动的距离
})
}
}
clickBtn();
//定义一个函数来控制按钮样式的变化以及banner距离左侧的距离
function autoPlay(){
timer = setInterval(function(){
currentIndex++;
//当i大于图片的总长度减一的时候，让其等于0
if (currentIndex > $(".banner img").length - 1) {
currentIndex = 0;
}
$(".btn").find("li").eq(currentIndex).addClass("on").siblings("li").removeClass("on");
$(".banner").animate({"left":-currentIndex*imgWidth});
},2000)
}
autoPlay();
//当鼠标悬浮在box里面的时候，暂停动画；
$(".box").mouseenter(function(){
clearInterval(timer);
})
//当鼠标离开的时候，开启动画
$(".box").mouseleave(function(){
autoPlay();
})
</script>
</html>
网友评论