|
0.最终效果预览
鼠标未触及区域时（自动滚动中）
鼠标触及区域后 （停止滚动，显示按钮）
基本功能
自动无缝滚动
左右按钮控制滚动
点击圆点切换图片
1.整体结构与思路
Html部分
;
;
三个div，最外层id为parent的大div内包含了uls和buttons两个div，divuls中包含了两个列表img_ul（图片列表）, litCir_ul（小圆点列表），divbuttons里则包含了“左”， “右”两个按钮。
CSS部分
#parent{
position: relative;
margin: 50px auto;
padding: 0;
width: 500px;
height: 309px;
}
#uls{
position: relative;
margin: 0;
padding: 0;
width: 500px;
height: 309px;
overflow: hidden;
}
#img_ul{
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 0;
width: 3000px; /*多留出一张图片的宽度！*/
list-style: none;
}
#img_ul li{
float: left;
margin: 0;
padding: 0;
width: 500px;
height: 309px;
}
#img_ul li img{
width: 500px;
height: 309px;
}
#litCir_ul{
position: absolute;
margin: 0;
padding: 0;
right: 10px;
bottom: 10px;
list-style: none;
}
#litCir_ul li{
margin: 0;
padding: 0;
float: left;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 50%;
margin-left:10px ;
cursor: pointer;
}
li.active{
background-color: white;
}
li.quiet{
background-color: #1e90ff;
}
#buttons{
margin: 0;
padding: 0;
display: none;
}
#buttons span{
position: absolute;
width: 40px;
height: 40px;
top: 50%;
margin-top: -20px;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: Simsun;
font-size: 30px;
border: 1px solid #fff;
opacity: 0.3;
cursor: pointer;
color: #fff;
background: black;
}
#left{
left: 5px;
}
#right{
left: 100%;
margin-left: -45px;
}
需要注意的地方
图片的宽，高度应和img_ul中的li标签， 以及div#parent， div#uls的宽，高度一致。
img_ul的宽度应为(图片数目+1）*每张图片的宽度。也就是要多留出一张图片的宽度（下一部分解释）。
div uls部分使用overflow:hidden隐藏img_ul超出的部分，确保每次该区域只能显示一张完整的图片。
2.功能实现（JS部分）
①将会在下面用到的Html中的对象和一些变量
/*获取HTML中的对象*/
var parent = document.getElementById("parent");
var img_ul = document.getElementById("img_ul");
var litCir_ul = document.getElementById("litCir_ul");
var buttons = document.getElementById("buttons");
var cLis =litCir_ul.children;
var len = img_ul.children.length; //图片张数
var width = parent.offsetWidth; //每张图片的宽度
var rate = 15; //一张图片的切换速度， 单位为px
var times = 1; //切换速度的倍率
var gap = 2000; //自动切换间隙， 单位为毫秒
var timer = null; //初始化一个定时器
var picN = 0; //当前显示的图片下标
var cirN = 0; //当前显示图片的小圆点下标
var temp;
②添加小圆点
之所用js添加小圆点，是因为小圆点的数量是由图片张数决定的。
for (var i=0; i len-1){ //判断是否到了最后一个圆点
cirN = 0;
}
for(var i=0; i |