<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQ版大图滚动</title>
<style>
*{margin: 0; padding: 0; list-style: none; -webkit-user-select: none;}
/*-webkit-user-select: none;取消频繁点击下，文字和图片选中态，每个浏览器有不同的写法，这里只举例了谷歌*/
.btn_mod,.img_mod{width: 400px; margin: 20px auto 0; overflow: hidden;}
.img_mod,.img_mod img{height: 400px;}
.img_mod{position: relative;}
.img_mod .scroll{position: absolute; left: 0; top: 0;}
.img_mod .scroll img{float: left; width: 400px; height: 400px;}
.btn_mod{padding-left: 10px;}
.btn_mod li,.btn_mod div{float: left; width: 60px; height: 30px; line-height: 30px; text-align: center; color: #666; background: #ccc; cursor: pointer; font-size: 14px; margin-right: 6px;}
.btn_mod .active{background: #999;}
</style>
</head>
<body>
<div class="btn_mod">
<div class="prev">上一页</div>
<ul class="btn_list">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="next">下一页</div>
</div>
<div class="img_mod">
<div class="scroll" style="width: 9999px;">
<img src="img/img01.jpg"/>
<img src="img/img02.jpg"/>
<img src="img/img03.jpg"/>
<img src="img/img04.jpg"/>
<img src="img/img01.jpg"/>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var btns = $(".btn_list li");//数字按钮
var prevBtn = $(".prev");//上一页按钮
var nextBtn = $(".next");//下一页按钮
var scroll = $(".scroll");//滚动对象
var imgs = $(".scroll img");//图片
var width = $(".img_mod img:eq(0)").width();//图片宽度
var index = 0;//初始下标
var imgLength = imgs.length - 1;//最后一张图的下标
var lock = false;//锁，防止频繁操作发生错乱
//下一张按钮的点击事件
nextBtn.click(function(){
clearInterval(timer);
aa();
if (lock) {
return;
}
lock = true;
var left = parseInt(scroll.position().left);
//在原本最后一张图和结尾重复的第一张图之间时
if (left <= -(imgLength-1)*width && left > -imgLength*width) {
index = 0;
scroll.animate({
left : -imgLength*width
})
} else if(left <= -imgLength*width){//滚到结尾重复的第一张图时
//由于结尾重复的第一张图已经出现过，所以从第二张图开始继续新一轮滚动
index = 1;
scroll.css("left", 0);
scroll.animate({
left : -width
})
} else{
index++;
//边界值判断
index = index > imgLength ? imgLength - 1:index;
scroll.animate({
left : -index*width
})
}
//数字选中态
btns.eq(index).addClass("active").siblings().removeClass("active");
setTimeout(function(){
lock = false;
},500);
});
//上一张按钮的点击事件
prevBtn.click(function(){
clearInterval(timer);
aa();
if (lock) {
return;
}
lock = true;
var left = parseInt(scroll.position().left);
//在第一张图和第二张之间
if (left > -width && left <= 0) {
//index等于原本最后一张图的坐标
index = imgLength - 1;
//从重复的第一张滚到原本最后一张
scroll.css("left", -imgLength*width);
scroll.animate({
left : -index*width
});
} else{
index--;
//边界值判断
index = index < 0 ? 0:index;
scroll.animate({
left : -index*width
})
}
//数字选中态
btns.eq(index).addClass("active").siblings().removeClass("active");
setTimeout(function(){
lock = false;
},500);
});
//数字的点击事件
btns.click(function(){
clearInterval(timer);
aa();
index = $(this).index();
btns.eq(index).addClass("active").siblings().removeClass("active");
scroll.animate({
left : -index*width
})
});
var timer;
function aa(){
//自动轮播
timer = setInterval(function(){
index++;
if (index == imgLength) {
index = 0;
}
scroll.animate({
left : -index*width
})
btns.eq(index).addClass("active").siblings().removeClass("active");
},2000);
}
aa();
</script>
</html>