1.html代码
<div class="box"> <ul> <li class="show"><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> </ul> <ol> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div>
2.css代码
<style type="text/css"> body, div, ul ,li, ol{margin:0;padding:0;} img{border:none;vertical-align: top} li{list-style: none} .box{width:470px;height: 150px;margin:30px auto;overflow:hidden;position: relative;} ul{width:470px;height: 150px;position: absolute;left:0;top:0;z-index:1;} ul li{float: left;width: 470px;} ul li.show{display: block;} ol{position: absolute;right: 10px;bottom:10px;z-index: 2;width:120px} ol li{float: left;width: 20px;height:20px;background: #fff;color:orange;margin-right:3px;line-height: 20px;text-align: center;cursor:pointer;} ol li.active{background: orange;color:#fff;} </style>
3.js
window.onload = function(){ var oUl = document.getElementsByTagName('ul')[0], oOL = document.getElementsByTagName('ol')[0], aLi = oUl.getElementsByTagName('li'), aOL = oOL.getElementsByTagName('li'), oneHeight = aLi[0].offsetHeight, iNow = 0, iNow2 = 0, time = null, oBox = document.querySelector('.box'); for(var i=0; i<aLi.length;i++){ aOL[i].index = i; aOL[i].onclick = function(){ for(var j=0; j<aOL.length; j++){ aOL[j].className = ''; } aOL[this.index].className = 'active'; iNow = this.index;
iNow2 = this.index' startMove(oUl,{top : -this.index*oneHeight}) } } time = setInterval(run,1000) oBox.onmouseover = function(){ clearInterval(time); } oBox.onmouseout = function(){ time = setInterval(run,1000) } function run(){ if(iNow == 0){ aLi[0].style.position = 'static'; oUl.style.top = 0; iNow2 = 0; } if(iNow == aLi.length - 1){ iNow = 0; aLi[0].style.position = "relative"; aLi[0].style.top = aLi.length*oneHeight + 'px'; }else{ iNow++; } iNow2++; for(var j=0; j<aOL.length; j++){ aOL[j].className = ''; } aOL[iNow].className = 'active'; startMove(oUl,{top : -iNow2*oneHeight}) } }
4.运动框架
// JavaScript Document function startMove(obj,json,endFn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var bBtn = true; for(var attr in json){ var iCur = 0; if(attr == 'opacity'){ if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){ iCur = Math.round(parseFloat(getStyle(obj,attr))*100); } else{ iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100; } } else{ iCur = parseInt(getStyle(obj,attr)) || 0; } var iSpeed = (json[attr] - iCur)/8; iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if(iCur!=json[attr]){ bBtn = false; } if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')'; obj.style.opacity = (iCur + iSpeed)/100; } else{ obj.style[attr] = iCur + iSpeed + 'px'; } } if(bBtn){ clearInterval(obj.timer); if(endFn){ endFn.call(obj); } } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } }
5.一个无缝滚动的效果就做了出来