<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0; padding:0;}
#container {width:400px; height:400px; position:relative; margin:0 auto; border:1px solid; overflow:hidden;}
ul {list-style:none;}
#box {height:400px; position:absolute; left:0; top:0;}
li {width:400px; height:400px; float:left;}
#pages{ width:100%; height:20px; padding:5px 0; position:absolute; bottom:0; background:black;}
#pages div {width:20px; height:20px; border-radius:10px; margin:0 5px; float:left; background:white;}
#pages div.curr {background:red;}
#prev,#next{width:45px; height:100px; background:url(img/sprite.bmp) no-repeat; top:0; bottom:0; margin:auto; position: absolute; opacity:0.1;}
#next {background-position:top right; right:0;}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var $lis = $("#box>li"), // 所有在 #box 下的 li
len = $lis.length, // li 的个数
liWidth = $lis.width(), // 每个 li 的宽度
index = 1, // 保存的是下一张显示的图片的索引
timer = null; // 计时器 ID
// 设置 ul#box 的宽度
$("#box").width(liWidth * len);
//"<div></div><div></div><div></div><div></div>"
// 添加小圆点
var html = "";
for (var i = 0; i < len; i++) {
html += "<div></div>";
/*$("<div>").appendTo("#pages").on("click", function(){
// 停止自动轮播的计时器
clearInterval(timer);
// 获取到所点击的小圆点在其同辈元素中的索引
// 这个索引和对应要显示出的图片的索引一致
index = $(this).index();
// 运动
move();
// 重新启动自动轮播的计时器
timer = setInterval(move, 2000);
});*/
}
// 追加小圆点并给小圆点绑定点击事件
$(html).appendTo('#pages').on("click", function(){
// 停止自动轮播的计时器
// clearInterval(timer);
// 获取到所点击的小圆点在其同辈元素中的索引
// 这个索引和对应要显示出的图片的索引一致
index = $(this).index();
// 运动
move();
// 重新启动自动轮播的计时器
// timer = setInterval(move, 2000);
}).eq(0).click(); // .trigger("click"); // .eq(0).addClass('curr');
// 当鼠标进入 div#container 的范围，则停止自动轮播，离开时继续启动自动轮播
$("#container").hover(function(){
clearInterval(timer);
}, function(){
timer = setInterval(move, 2000);
}).trigger("mouseleave");
// 上一页
$("#prev").click(function() {
// index = 2 index -= 2 index = 0
// index = 1 index -= 2 index = -1 index = len - 1 = len + index
// index = 0 index -= 2 index = -2 index = len - 2 = len + index
index -= 2;
if (index < 0)
index = len + index;
move();
});
// 下一页
$("#next").click(move);
// 自动轮播切换
// timer = setInterval(move, 2000);
function move() {
// 求在轮播过程中， ul#box 的 left 定位位置
var _left = -liWidth * index;
// 切换小圆点的样式
$("#pages>div").eq(index).addClass('curr').siblings().removeClass("curr");
// 设置下一张图片索引
index++;
if (index >= len)
index = 0;
// 运动动画
$("#box").stop(true).animate({left:_left}, 1000);
}
});
</script>
</head>
<body>
<div id="container">
<ul id="box">
<li><img src="img/002.jpg"></li>
<li><img src="img/003.jpg"></li>
<li><img src="img/004.jpg"></li>
<li><img src="img/005.jpg"></li>
<li><img src="img/006.jpg"></li>
<li><img src="img/007.jpg"></li>
</ul>
<div id="pages"></div>
<div id="prev"></div>
<div id="next"></div>
</div>
</body>
</html>
365
02-14
11-23
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
