JQ实现左右轮播效果
2017-08-08 本文已影响0人
Miss_Fairy
这篇文章主要是实现图片左右轮播效果,功能:进入页面自动播放图片,鼠标悬浮,暂停图片轮播,鼠标离开,继续图片轮播,点击页面按钮,滑到对应的图片,鼠标离开,从该位置继续轮播。代码中有详细的注释
代码如下
<!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">
![](img/man1.jpg)
![](img/man2.jpg)
![](img/man3.jpg)
</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>