<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#parent{
position: relative;
margin: 50px auto;
padding: 0;
width: 500px;
height: 300px;
}
#uls{
position: relative;
margin: 0px;
padding: 0px;
width: 500px;
height: 300px;
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: 0px;
padding: 0px;
width: 500px;
height: 300px;
}
#img_ul li img{
width: 500px;
height: 300px;
}
#litCir_ul{
position: absolute;
margin: 0px;
padding: 0px;
right: 10px;
bottom: 10px;
list-style: none;
}
#litCir_ul li{
margin: 0px;
padding: 0px;
float: left;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 50%;
margin-left: 10px;
cursor: pointer;
}
li.active{
background: white;
}
li.quiet{
background: #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-family: simsun;
font-size: 30px;
border: 1px solid #FFFFFF;
opacity: 0.3;
cursor: pointer;
color: #FFFFFF;
background: black;
}
#left{
left: 5px;
}
#right{
right: 5px;
}
</style>
</head>
<body>
<div id="parent">
<div id="uls">
<ul id="img_ul">
<li><img src="img/1.png"/></li>
<li><img src="img/2.png"/></li>
<li><img src="img/3.png"/></li>
<li><img src="img/2.png"/></li>
</ul>
<ul id="litCir_ul">
</ul>
</div>
<div id="buttons">
<span id="left">‹</span>
<span id="right">›</span>
</div>
</div>
<script type="text/javascript">
//获取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; i++){
var a_li = document.createElement('li');
a_li.className = 'quiet'; //默认li的class为quiet
litCir_ul.appendChild(a_li);
}
litCir_ul.children[0].className = 'active'; // 第一个li默认为active
/*
无缝滚动：
通过控制img_ul的left值来控制显示某张图片，为了实现滚动效果
我们定义一个动画效果函数Roll()
我们需要逐渐改变img_ul的left值，而不能直接使该值变化图片宽度的倍数
*/
function Roll(distance){
//参数distance：滚动的目标点（必为图片宽度的倍数）
clearInterval(img_ul.timer)//每次运行该函数必须清除之前的定时器
var speed = img_ul.offsetLeft < distance ? rate : (0 - rate); // 判断图片移动的方向
img_ul.timer = setInterval(function(){//设置定时器，每隔10毫秒调用匿名函数
img_ul.style.left = img_ul.offsetLeft + speed + 'px'; //每一次调用滚动到的地方(速度为 speed px/10 ms)
var leave = distance - img_ul.offsetLeft; //距目标点剩余的px值
//接近目标点时的处理，滚动接近目标时直接到达，避免rate值设置不当时不能完整显示图片
if(Math.abs(leave) <= Math.abs(speed)){
clearInterval(img_ul.timer);
img_ul.style.left = distance + 'px'
}
},10)
}
//克隆到第一个li列表末
img_ul.appendChild(img_ul.children[0].cloneNode(true))
//自动滚动
function autoRun(){
picN++;
cirN++;
if(picN > len){ //滚动完克隆项后
img_ul.style.left = 0;//改变left至真正的第一项处
picN = 1; //从第二张开始显示
}
Roll(-picN*width);
if(cirN > len-1){//判断是否到了最后一个原点
cirN = 0
}
for(var i = 0; i <len; i++){
cLis[i].className = 'quiet'
}
cLis[cirN].className = 'active'
}
//开始自动滚动
timer = setInterval(autoRun,gap);
//触及小圆点切换至对应图片
for(var i = 0; i <len; i++){
cLis[i].index = i;
cLis[i].onmouseover = function(){
for(var j = 0; j<len; j++){
cLis[j].className = 'quiet';
}
this.className = 'active';
temp = cirN;
picN = cirN = this.index;
times = Math.abs(this.index - temp); //距离上个小圆点的距离
rate = rate*times; //根据距离改变切换速度
Roll(-this.index * width);
rate = 15;
}
}
//触及轮播图区域
parent.onmouseover = function(){
clearInterval(timer);
buttons.style.display = 'block';
}
//离开轮播图区域
parent.onmouseout = function(){
timer = setInterval(autoRun,gap);
buttons.style.display = 'none';
}
//给两个按钮添加点击事件
//上一张
buttons.children[0].onclick = function(){
picN--;
cirN--;
if(picN < 0){ //滚动完最后一项
img_ul.style.left = -len*width +'px'; //改变left至克隆的第一项
picN = cirN = len-1;
}
Roll(-picN*width);
//bug处理
if(cirN < 0){
cirN = len-1;
}
for(var i = 0; i <len; i++){
cLis[i].className = 'quiet';
}
cLis[cirN].className = 'active'
}
// 下一张
buttons.children[1].onclick = autoRun;
</script>
</body>
</html>
