<!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文件css
//根據給定的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文件html
//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文件json
body { background: #666; }
ul { padding: 0; margin: 0; }
li { list-style: none; }
img { border: 0; }
.play { width: 400px; height: 430px; margin: 50px auto 0; background: #999; font: 12px Arial; }
.big_pic { width: 400px; height: 320px; overflow: hidden; border-bottom: 1px solid #ccc;
background: #222; position: relative; }
.big_pic li { width: 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 { width: 200px; height: 320px; position: absolute; left: 0; top: 0; background: red;
filter: alpha(opacity:0); opacity: 0; z-index:3000; }
.mark_right { width: 200px; height: 320px; position: absolute; left: 200px; top: 0;
background: green; filter: alpha(opacity:0); opacity: 0; z-index:3000; }
.big_pic .prev { width: 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 { width: 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 { width: 400px; height: 25px; background: #000; filter: alpha(opacity=60);
opacity: 0.6; position: absolute; z-index: 2999; bottom: 0; left: 0; }
.small_pic { width: 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 { width: 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 { width: 120px; height: 94px; }