用JQ做一个无缝滚动效果，图片自动轮播，左右按钮点击可切换图片，下面一排带索引的按钮可点击，点击到哪个就切换到对应的第几张图片，布局有些简陋，主要是实现效果，起初有bug，快速点击按钮时会有卡顿然后出现空白，解决办法在animate()后加stop()，可实现无缝滚动效果。
布局以及样式如下：一个大div(相对定位)，里面放ul(装图片，最后一张图片跟第一张图片一样)，左右两个按钮，以及下面的p标签(装有索引的按钮)全都相对于大div定位，给大div图片的宽度，给ul足够大的宽度，将图片左浮动，通过改变ul的left值来实现无缝滚动。思想：计时器改变left值，当走到最后一张图片时(跟第一张图片一样)，通过0秒跳到第一张图片，继续运动。当点击左按钮，从索引为0的第一张图片转到前一张的时候，通过0秒跳到最后一张，并继续运动。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul,li {
list-style: none;
}
a {
text-decoration: none;
}
.main {
width: 714px;
height: 382px;
margin: 50px auto;
overflow: hidden;
position: relative;//大DIV相对定位
}
.box {
width: 10000px;
position: absolute;
}
.box li {
float: left;
}
.left {
position: absolute;
left: 0;
top: 160px;
display: blcok;
height: 60px;
width: 30px;
background: url(img/left.png);//左按钮图片
z-index: 100;
}
.right {
position: absolute;
right: 0;
top: 160px;
display: blcok;
height: 60px;
width: 30px;
background: url(img/right.png);//右按钮图片
z-index: 100;
}
.many_btn {
position: absolute;
bottom: 20px;
left: 310px;
}
.many_btn a {
display: block;
height: 20px;
width: 20px;
float: left;
text-align: center;
line-height: 20px;
margin-right: 10px;
border-radius: 100%;
background: white;
color: #000;
}
.many_btn .active {
background: red;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script> //引入的jq文件
</head>
<body>
<div class="main">
<ul class="box">//装图片的div
<li><img src="img/top1.jpg"/></li>
<li><img src="img/top2.jpg"/></li>
<li><img src="img/top3.jpg"/></li>
<li><img src="img/top4.jpg"/></li>
<li><img src="img/top5.jpg"/></li>
<li><img src="img/top1.jpg"/></li>
</ul>
<a class="left" href="javascript:;"></a>//左按钮
<a class="right" href="javascript:;"></a>//右按钮
<p class="many_btn">//
<a class="active" href="###">1</a>
<a href="###">2</a>
<a href="###">3</a>
<a href="###">4</a>
<a href="###">5</a>
</p>
</div>
</body>
</html>
//下面是实现无缝滚动的JQ代码
<script type="text/javascript">
var timer = 0; //定时器初始化
var index = 0; //图片索引值
var left = 714;//图片的宽度
var $len = $(".box>li").size();//图片的数量
function autoImg(){
clearInterval(timer);//开启一个新的计时器前需要清空之前的计时器
timer = setInterval(function(){//开启计时器
index ++;//切换下一张图片
tab();
},2000);
}
autoImg();//调用计时器
$(".left").click(function(){//给左按钮添加点击事件
index --;//往左走图片的索引值是变小的
tabImg();//实现轮播
autoImg();//开启计时器
});
$(".right").click(function(){//给右按钮添加点击事件
index ++;//往左右走图片的索引值是变大的
tab();//实现轮播
autoImg();//开启计时器
});
$(".many_btn a").click(function(){//给下面按钮添加点击事件
clearInterval(timer);//开启一个新的计时器前需要清空之前的计时器
index = $(this).index();//将当前按钮的索引赋值给index
$(".box").stop().animate({left: - index * left},0);//通过获取的索引来算出left值
$(".many_btn a").eq(index).addClass("active").siblings().removeClass("active");//使当前下面的索引背景随着图片滚动变色
autoImg();//开启计时器
});
function tab(){//轮播函数
if(index > $len - 1){//当运动到最后一张图片
$(".box").stop().animate({left:0},0,function(){//用0秒跳转到第一张图片后继续运动
index = 1//让索引变为1，目的是刚跳转到第一张图片立即运动第二张图片，实现无缝滚动
$(".box").stop().animate({left:-index*left},500);
});
}else{
$(".box").stop().animate({left:-index*left},500);//每隔500毫秒left值减一张图片的宽度，也就是显示出下一张图片
}
$(".many_btn a").eq(index).addClass("active").siblings().removeClass("active");//使当前下面的索引背景随着图片滚动变色
}
function tabImg(){
if(index < 0){//当从第一张图到前一张图
$(".box").stop().animate({left:- ($len - 1) * left},0,function(){//立刻跳转到最后一张图
index = $len - 2;让索引变为倒数第二张，目的是刚跳转到最后一张图片立即运动到倒数第二张图片，实现无缝滚动
$(".box").stop().animate({left:- index * left},500);
});
}else{
$(".box").stop().animate({left: - index * left},500);//每隔500毫秒left值减一张图片的宽度，也就是显示出下一张图片
}
$(".many_btn a").eq(index).addClass("active").siblings().removeClass("active");//使当前下面的索引背景随着图片滚动变色
}
</script>
350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
