图片轮播，纯js+css
生活随笔
收集整理的這篇文章主要介紹了
图片轮播，纯js+css
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
圖片輪播，純js+css <!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>
?
posted on 2015-06-09 21:22 資江河畔 閱讀(...) 評論(...) 編輯 收藏轉載于:https://www.cnblogs.com/yudishow/p/4564593.html
總結
以上是生活随笔為你收集整理的图片轮播，纯js+css的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Handler延迟事件使用
- 下一篇： 《使用Nessus进行渗透测试》- 简介