<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> body,div,ul,li,ol,dl,img{padding:0; margin:0; list-style:none;} .all{width:400px; height:307px; margin:50px auto;border:5px solid #ccc;position:relative;} .all div{ width:400px; height:307px;overflow:hidden; position:relative;} .all ul{height:307px; position:absolute; width:2000px;} .all ul li{width:400px; height:307px; overflow:hidden; float:left;} .all dl{position:absolute; top:40%; height:52px; z-index:20; width:440px; left:-20px; cursor:pointer;} .all dl dt{width:50px; height:52px; float:left; background:url(images/arr.png) no-repeat;} .all dl dd{width:50px; height:52px; float:right; background:url(images/arr.png) no-repeat right;} .all ol{width:100px; height:13px; bottom:-25px; left:45%; position:absolute;} .all ol li{height:13px; width:14px; background:url(images/00.png) no-repeat; float:left; margin-right:10px; cursor:pointer; overflow:hidden;} .all ol li.current{background-position:0 -26px;} #img_ul li img{width:400px;height:307px;} </style> <!--<script type="text/javascript" src="jquery-1.8.3.min.js"></script>--> <script type="text/javascript"> /** * * //eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c])}}return p}('$(6(){m a=0,b=0;$("o").7(6(){a++,a>4&&(a=1,$("5").d({2:0})),$("5").c().9({2:f*-a},e),b++,b>3&&(b=0),$("l k").g(b).i("j").h().8()}),$("n").7(6(){a--,0>a&&(a=3,$("5").d({2:-p})),$("5").c().9({2:f*-a},e),b--,0>b&&(b=3),$("l k").g(b).i("j").h().8()})});',26,26,'||left|||ul|function|click|removeClass|animate|||stop|css|500|400|eq|siblings|addClass|current|li|ol|var|dt|dd|1600'.split('|'),0,{})) */ window.onload = function(){ var ulObj = document.getElementById('img_ul'); var li_length = document.getElementById('img_ul').getElementsByTagName('li'); var left_btn = document.getElementById('prev'); var right_btn = document.getElementById('next'); var botton_btn = document.getElementById('btton_btn'); var icoBtn = botton_btn.getElementsByTagName('li'); var baseWidth = li_length[0].offsetWidth; var toclick = true; var nowPos = 1; var timer = null; // console.log(li_length) sttimer(); left_btn.onclick = function(){ if(toclick){ clearInterval(timer); move(nowPos-1,true); sttimer(); } }; right_btn.onclick = function(){ if(toclick){ clearInterval(timer); move(nowPos+1,true); sttimer(); } } for(var i = 0; i < icoBtn.length;i++){ icoBtn[i].onclick = function(cc){ // if(toclick){ var _self = this; var t_num = parseInt(_self.getAttribute('value')); clearInterval(timer); move(t_num),false; sttimer(); // } } } /** * 移动到当前位置索引 * @param cIndex */ function move(cIndex,bool){ toclick = false; var tt = null; var temp_o = 1; var count = 0; clearInterval(tt); if(bool){ tt = setInterval(function(){ if(count == 8){ clearInterval(tt); temp_o = 0; ulObj.style.opacity = 0; if(li_length.length < cIndex){ // 跳入第一页 ulObj.style.left = '-0px'; nowPos = 1; }else if(cIndex <1){ // 跳入最后一页 ulObj.style.left = '-'+baseWidth*(li_length.length-1)+'px'; nowPos = li_length.length; }else { // 下一页 ulObj.style.left = '-' + baseWidth * (cIndex - 1) + 'px'; nowPos = cIndex; } showcurrent(nowPos); tt = setInterval(function(){ if(temp_o >= 1){ clearInterval(tt); toclick = true; }else{ ulObj.style.opacity = temp_o+0.1; temp_o = temp_o+0.1; } },80); }else{ ulObj.style.opacity = temp_o-0.1; temp_o = temp_o-0.1; count++; } },80); }else{ if(li_length.length < cIndex){ // 跳入第一页 ulObj.style.left = '-0px'; nowPos = 1; }else if(cIndex <1){ // 跳入最后一页 ulObj.style.left = '-'+baseWidth*(li_length.length-1)+'px'; nowPos = li_length.length; }else { // 下一页 ulObj.style.left = '-' + baseWidth * (cIndex - 1) + 'px'; nowPos = cIndex; } showcurrent(nowPos); } } function showcurrent(cc){ for(var i = 1; i <= icoBtn.length;i++){ icoBtn[i-1].className = ''; if(cc == i){ icoBtn[i-1].className = 'current'; } } } function sttimer(){ timer = setInterval(function(){ move(nowPos+1,true); },5000); } } </script> </head> <body> <div id="id" class="all"> <div> <ul id="img_ul"> <li class="current"><img src="images/01.jpg"/></li> <li><img src="images/02.jpg"/></li> <li><img src="images/03.jpg"/></li> <li><img src="images/04.jpg"/></li> <!--<li><img src="images/01.jpg"/></li>--> </ul> </div> <dl> <dt id="prev"><a href="#"></a></dt> <dd id="next"><a href="#"></a></dd> </dl> <ol id="btton_btn"> <li value="1" class="current"></li> <li value="2"></li> <li value="3"></li> <li value="4"></li> </ol> </div> </body> </html>