Jquery实现图片左右滚动轮播

点击(此处)折叠或打开

<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="UTF-8">
<title>轮播特效</title>
<style type="text/css">
*{
border: 0;
margin: 0;
}
.carousel{
width:500px;
height:334px;
position: fixed;
overflow: hidden;
}
.view{
width:2000px;
height:334px;
position:relative;
}
.view img{
float: left;
}
.view ul{
position:fixed;
top:300px;
left: 200px;
}
.view ul li{
height: 12px;
width: 12px;
background:white;
list-style: none;
display: inline-block;
margin: 10px;
}
.view ul li.color{
background:#60b860;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="carousel">
<div class="view">
<img src="images/1.jpg" alt="第一张轮播图">
<img src="images/2.jpg" alt="第一张轮播图">
<img src="images/3.jpg" alt="第一张轮播图">
<img src="images/4.jpg" alt="第一张轮播图">
<ul>
<li class="color"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
<script>
//左右滚动轮播器
$(document).ready(function(){
var n=0;//设置计数器
//封装冗余函数
function fn(n){
$(".view ul li").removeClass("color");
$(".view ul li").eq(n).addClass("color");
$(".view").animate({right:n*500+'px'},300) //设置动画
}
//设置鼠标悬停于li时事件
$(".view ul li").hover(function(){
n=$(".view ul li").index(this);//把当前索引号赋予n;
fn(n);
})
function start(){
n++;
if(n>=$(".view ul li").length){
n=0;
}
fn(n);
}
var auto=setInterval(start,2000);//设置定时器
//设置鼠标悬停在该轮播器时事件
$(".view").hover(function(){
clearInterval(auto);//清除定时器
},function(){
auto=setInterval(start,2000);//启动定时器
})
});
</script>
</html>

水中残月

Jquery实现图片左右滚动轮播