<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0; } ul,ol,li{ list-style: none; } img{ display: block; } #banner{ width: 800px; height: 350px; border:1px solid #ff0; margin:100px auto; position: relative; } #bigImg{ width: 100%; height: 100%; position: relative; } #bigImg li{ position: absolute; top:0; left: 0; } #bigImg li img{ width: 800px; height: 350px; } #smallImg{ width: 180px; height: 20px; position: absolute; bottom: 10px; right: 0; } #smallImg li{ float: left; width: 20px; height: 20px; background: #f00; margin-right: 10px; border-radius: 50%; font-size: 18px; text-align: center; line-height: 20px; cursor: pointer; } #smallImg li.active{ background: #ff0; } </style> </head> <body> <div id="banner"> <ul id="bigImg"> <li><img src="images/1.jpg"></li> <li><img src="images/2.jpg"></li> <li><img src="images/3.jpg"></li> <li><img src="images/4.jpg"></li> <li><img src="images/5.jpg"></li> <li><img src="images/6.jpg"></li> </ul> <ol id="smallImg"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ol> </div> </body> </html> <script src="sport3.js"></script> <script> var timer = null; var index = 0; var list = document.getElementById("smallImg").children; var ul = document.getElementById("bigImg").children; timer = setInterval(autoPlay,1500); function autoPlay(){ index++; for(var i = 0;i < list.length;i++){ list[i].className = ""; startMove(ul[i],"opacity",0); } if(index == list.length){ index = 0; } list[index].className = "active"; startMove(ul[index],"opacity",100); } for(let i = 0;i < list.length;i++){ list[i].onmouseover = function(){ clearInterval(timer); index = i - 1; autoPlay(); } list[i].onmouseout = function(){ timer = setInterval(autoPlay,1500); } } </script>
引入的sport3.js文件
//支持 缓冲 + 多物体 + 链式
// obj ： 运动的对象
// attr : 运动的样式
// target ： 目标值
//callback ：代表一个功能 一个函数 当一个函数作为参数时，这样的函数叫做回调函数
//回调 ：回头再调用
function startMove(obj,attr,target,callback){
clearInterval( obj.timer );
obj.timer = setInterval( function(){
//获取实际样式值
var current = 0;
if( attr == "opacity" ){
current = getStyle( obj , attr )*100;
}else{
current = parseInt( getStyle( obj , attr ) );
}
//获取速度
var speed = (target - current)/10;
speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );
//判断结束条件 并设置样式
if( target == current ){
clearInterval( obj.timer );
//上一个动作完成了 开始进入到下一个动作
//下一个动作不确定 此处有一个功能 是可变的
if( callback ){//如果用户传递了该参数 就执行下一个动作
callback();
}
}else{
if( attr == "opacity" ){
obj.style[attr] = (current + speed)/100;
}else{
obj.style[attr] = current + speed + "px";
}
}
},30 )
}
//封装一个函数 功能是获取非行内元素样式值
function getStyle( obj ,attr ){
if( getComputedStyle ){
return getComputedStyle( obj,false )[attr];
}else{
return obj.currentStyle[attr];
}
}