<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> * { 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; overflow: hidden; } #bigImg { width: 1000%; height: 100%; position: absolute; top: 0; left: 0; } #bigImg li{ float: left; } #bigImg li img{ width: 800px; height: 350px; } #smallImg{ position: absolute; width:120px ; height: 20px; bottom: 20px; right: 0; } #smallImg li{ float: left; width: 20px; height: 20px; background: #f00; margin-right: 10px; text-align: center; line-height: 20px; font-size: 16px; cursor: pointer; } #smallImg li.active{ background: #ff0; } </style> </head> <body> <div id="banner"> <ul class="bigImg" id="bigImg"> <li><img src="images/001.jpg"></li> <li><img src="images/002.jpg"></li> <li><img src="images/003.jpg"></li> <li><img src="images/004.jpg"></li> <li><img src="images/001.jpg"></li> </ul> <ul class="smallImg" id="smallImg"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> </html> <script src="sport5.js"></script> <script src="public.js"></script> <script> var timer = null; var index = 0; var list = $id("smallImg").children; var ul = $id("bigImg"); timer = setInterval(autoPlay,1500); function autoPlay(){ index++; for(var i = 0;i < list.length;i++){ list[i].className = ""; } if(index == 5){ index = 1; ul.style.left = 0; } list[index == 4 ? 0 : index].className = "active"; startMove(ul,{left:-index*ul.children[0].offsetWidth}); } 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>
public.js文件
//根据给定的id获取页面元素 并返回该元素 function $id(id){ return document.getElementById(id); } //获取任意区间的随机整数 返回随机整数 function rand(min,max){ return Math.round( Math.random()*(max-min) + min ); } //定义一个函数 获取随机的颜色值 function getColor(){ return "rgb("+rand(0,255)+","+rand(0,255)+","+rand(0,255)+")"; } //六位十六进制颜色值 function randColor(){ var str = "0123456789abcdef"; // 从这个字符串中随机取出6位 var color = "#"; for( var i = 1 ; i <= 6 ; i++ ){ color += str.charAt( rand(0,15) ); } return color; } //定义一个函数 将日期时间格式转成 字符串 function dateToString(now){ var y = now.getFullYear(); var m =toTwo( now.getMonth()+1 ); var d =toTwo( now.getDate() ); var h = toTwo( now.getHours() ); var mi =toTwo( now.getMinutes() ); var s = toTwo( now.getSeconds() ) ; return y+"-"+m+"-"+d + " " + h + ":" + mi + ":" + s; } //如果是一位数的时间 前面拼接一个0 function toTwo(val){ return val < 10 ? "0"+val : val } //定义一个函数 将一个字符串转成日期时间对象 function stringToDate(str){ return new Date(str); } //定义一个时间差函数 function diff(start,end){ return end.getTime() - start.getTime(); } //定义函数功能创建一个元素节点 返回创建的节点 function create(ele){ return document.createElement(ele); } //碰撞函数 function pz(obj1,obj2){ //获取obj1 的上下 左右四个边的数据 T1 = obj1.offsetTop; B1 = obj1.offsetTop + obj1.offsetHeight; L1 = obj1.offsetLeft; R1 = obj1.offsetLeft + obj1.offsetWidth; //获取obj2 的上下 左右四个边的数据 T2 = obj2.offsetTop; B2 = obj2.offsetTop + obj2.offsetHeight; L2 = obj2.offsetLeft; R2 = obj2.offsetLeft + obj2.offsetWidth; //查找碰不上的条件 如果碰不上 返回false 碰上了返回true if( R1<L2 || L1>R2 || B1<T2 || T1>B2 ){ //碰不上 return false; }else{ return true; } }
sport5.js文件
//obj 操作的元素
//json 参数为 要操作的属性和目标值 键--属性 值--目标值
//callback 回调函数
var flag;//开关变量 当值为true时，表示 所有的动作都执行完毕 ，可以关掉定时器 ，也可以进入下一个动作
function startMove(obj,json,callback){//attr表示要操作的属性
clearInterval(obj.timer);
obj.timer = setInterval(function(){
flag = true;
var current = 0;
for(var attr in json){
if( attr =="opacity" ){//操作透明度
//获取透明度的样式值
current =parseFloat( getStyle(obj,attr) )*100;
}else{
current =parseInt( getStyle(obj,attr) ) ;//接收当前元素的样式值
}
var speed = (json[attr] - current)/10;
speed = speed>0?Math.ceil(speed) :Math.floor(speed);
if( current != json[attr] ){//动作完成后的条件
flag = false;//当目标值和当前的样式值 不相等时 ， 将开关变量值关闭 false
}
//定时器开启时 不停的改变元素的样式
if( attr == "opacity" ){
obj.style.opacity = (current+speed)/100;
}else{
obj.style[attr] = current + speed + "px";
}
}
//循环结束后判断flag的值，当值为true时，表示 所有的动作都执行完毕 ，可以关掉定时器 ，也可以进入下一个动作
if( flag ){
clearInterval(obj.timer);
//上一个动作完成后 就开启下一个动作的执行 调用callback
//判断 callback是否存在 存在就调用
if( callback ){
callback();
}
}
},30)
}
//获取样式值函数
function getStyle(obj,attr){
if( window.getComputedStyle ){
return window.getComputedStyle( obj,false )[attr];
}else{
return obj.currentStyle[attr];
}
}
style.css文件
body { background: #666; }
ul { padding: 0; margin: 0; }
li { list-style: none; }
img { border: 0; }
.play { 400px; height: 430px; margin: 50px auto 0; background: #999; font: 12px Arial; }
.big_pic { 400px; height: 320px; overflow: hidden; border-bottom: 1px solid #ccc;
background: #222; position: relative; }
.big_pic li { 400px; height: 320px; overflow: hidden; position: absolute; top: 0; left: 0;
z-index: 0; background: url(images/loading.gif) no-repeat center center; }
.mark_left { 200px; height: 320px; position: absolute; left: 0; top: 0; background: red;
filter: alpha(opacity:0); opacity: 0; z-index:3000; }
.mark_right { 200px; height: 320px; position: absolute; left: 200px; top: 0;
background: green; filter: alpha(opacity:0); opacity: 0; z-index:3000; }
.big_pic .prev { 60px; height: 60px; background: url(images/btn.gif) no-repeat;
position: absolute; top: 130px; left: 10px; z-index: 3001;
cursor: pointer; filter:alpha(opacity: 0); opacity:0; }
.big_pic .next { 60px; height: 60px; background: url(images/btn.gif) no-repeat 0 -60px;
position: absolute; top: 130px; right: 10px; z-index: 3001;cursor: pointer;
filter:alpha(opacity: 0); opacity:0; }
.big_pic .text { position: absolute; left: 10px; bottom:4px; z-index: 3000; color: #ccc; }
.big_pic .length { position: absolute; right: 10px; bottom: 4px; z-index: 3000; color: #ccc; }
.big_pic .bg { 400px; height: 25px; background: #000; filter: alpha(opacity=60);
opacity: 0.6; position: absolute; z-index: 2999; bottom: 0; left: 0; }
.small_pic { 380px; height: 94px; position: relative; top: 7px; left: 10px; overflow: hidden; }
.small_pic ul { height: 94px; position: absolute; top: 0; left: 0; }
.small_pic li { 120px; height: 94px; float: left; padding-right: 10px;
background: url(images/loading.gif) no-repeat center center; cursor: pointer;
filter: alpha(opacity=60); opacity: 0.6; }
.small_pic img { 120px; height: 94px; }