純javaScript實(shí)現(xiàn)個(gè)性化圖片輪播
輪播原理說(shuō)明<如上圖所示>：
1. 畫(huà)布部分（可視區(qū)域）屬性說(shuō)明：overflow:hidden使得超出畫(huà)布部分隱藏或說(shuō)不可見(jiàn)。position:relative 會(huì)導(dǎo)致自身位置的相對(duì)變化，而不會(huì)影響其他元素的位置、大小的變化。使得使用了position：absolute 元素相對(duì)于畫(huà)布位置進(jìn)行定位；
absolute元素脫離了文檔結(jié)構(gòu)，產(chǎn)生破壞性，導(dǎo)致父元素坍塌，float元素也會(huì)脫離文檔結(jié)構(gòu)，absolute元素會(huì)懸浮在頁(yè)面上方，遮擋其他部分顯示，這點(diǎn)和PhotoShop圖層相似，所以要使用z-index控制出現(xiàn)順序
2.輪播注意點(diǎn)：左右無(wú)限滾動(dòng)
prev-button 第一張圖片的前一張是最后一張圖片，
next-button 最后一張圖片的下一張圖片是第一張，
prev-button、next-button位置的偏移是通過(guò)設(shè)置prev-img-container、next-img-container的left<相對(duì)于畫(huà)布>屬性值
click-select-show-button區(qū)域，點(diǎn)擊該區(qū)域小圓圈是通過(guò)上一次圖片的所在index，當(dāng)前點(diǎn)擊myIndex, 計(jì)算公式：（myIndex-index）*(-圖片的寬度width)
3.動(dòng)畫(huà)過(guò)渡注意點(diǎn)：點(diǎn)擊prev-button、next-button、click-select-show-button小圓圈，判定當(dāng)前是否處于動(dòng)畫(huà)狀態(tài)中
4.定時(shí)器setTimeout()、clearTimeout
<實(shí)現(xiàn)效果圖>
Css樣式
/**CSS-style**//**畫(huà)布大小*/#container { margin:0 auto; width: 600px; height: 400px; overflow: hidden;/*超出畫(huà)布部分隱藏*/ position: relative;/*相對(duì)定位*/ cursor: pointer;}/**圖片容器*/#list { width: 4200px; height: 400px; position: absolute; z-index:1;}#list img { float: left; }/**輪播選中按鈕樣式*/#button { position: absolute; bottom: 25px; left: 175px; width: 250px; z-index: 2; }#button ul li { list-style: none; width: 15px; border-radius: 50%; padding: 7.5px; height: 15px; margin-right: 10px; background: green; float: left; font:15px/15px "microsoft yahei"; text-align: center; font-weight: bold; color: white; cursor: pointer;}#button ul li.chos { background: orange;}#container:hover .arrow{ display: block;}#pre { left: 20px;}#next { right: 20px;}/**pre next定位*/.arrow { position: absolute; width: 40px; height: 40px; background: black; z-index: 3; top: 180px; text-decoration: none; text-align: center; line-height: 40px; font-size: 40px; color: white; opacity: 0.3; filter: alpha(opacity=0.3); display: none;}/**pre next按鈕透明度*/#container a:hover { opacity: 0.7; filter: alpha(opacity=0.7);}html代碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>純javaScript實(shí)現(xiàn)個(gè)性化圖片輪播</title> <link rel="stylesheet" type="text/css" href="styles/main.css"> <script type="text/javascript" src="scripts/scroImg.js"></script></head><body> <div id="container"> <div id="list" style="left:-600px"> <img src="images/5.jpg"> <img src="images/1.jpg"> <img src="images/2.jpg"> <img src="images/3.jpg"> <img src="images/4.jpg"> <img src="images/5.jpg"> <img src="images/1.jpg"> </div> <div id="button"> <ul> <li index='1'>1</li> <li index='2'>2</li> <li index='3'>3</li> <li index='4'>4</li> <li index='5'>5</li> </ul> </div> <a href="#" class="arrow" id="prev"><</a> <a href="#" class="arrow" id="next">></a> </div></body></html>
一、javaScript實(shí)現(xiàn)圖片輪播
window.onload=function(){ var container=document.getElementById('container'); var list=document.getElementById('list'); var buttons=document.getElementById('button').getElementsByTagName('li'); var prev=document.getElementById('prev'); var next=document.getElementById('next'); var index=1; var interval=1000; var timer=null; var animated=false; //next next.onclick=function(){ if (!animated) { animate(-600); }; index+=1; if (index>5) { index=1; }; showButton(); console.info('next'+index); } //prev prev.onclick=function(){ if(!animated){ animate(600); } index-=1; if(index<1){ index=5; } showButton(); console.info('prev'+index); } //animate function animate(offset){ animated=true; var left=parseInt(list.style.left)+offset; var animateTime=600;//位移總時(shí)間 var interval=10;//時(shí)間間隔 var speed=offset/(animateTime/interval);//每次位移量 var go=function(){//animate內(nèi)部函數(shù) if ((speed<0 && parseInt(list.style.left)>left) || (speed>0 && parseInt(list.style.left)<left)) {//是否位移 list.style.left=parseInt(list.style.left)+speed+'px'; setTimeout(go,interval) }else{ list.style.left=left+'px'; if (left<-3000) { //最后一張后面 list.style.left=-600+'px'; //顯示前一張 }; if(left>-600){//第一張最前面 list.style.left=-3000+'px';//顯示最后一張 } animated=false; }; } go(); } //chos function showButton(){ for (var i = 0; i < buttons.length; i++) { buttons[i].className=''; }; buttons[index-1].className='chos'; } //buttons-click for (var i = 0; i < buttons.length; i++) { buttons[i].onclick=function(){ if(this.className=='chos'){ return; } var myIndex=parseInt(this.getAttribute('index')); var offset=(myIndex-index)*-600; //偏移量 animate(offset); index=myIndex;//set Index showButton(); } }; function play(){ timer=setTimeout(function(){ next.click(); play(); },interval) } function stop(){ clearInterval(timer); } play(); container.onmouseover=function(){ stop(); } container.onmouseout=function(){ play(); }}二、jQuery實(shí)現(xiàn)圖片輪播
$(function () { var container = $('#container'); var list = $('#list'); var buttons = $('#container').find('li'); var prev = $('#pre'); var next = $('#next'); var index = 1; var len = 5; var interval = 3000; var timer; function animate (offset) { var left = parseInt(list.css('left')) + offset; if (offset>0) { offset = '+=' + offset; } else { offset = '-=' + Math.abs(offset); } list.animate({'left': offset}, 300, function () { if(left > -200){ list.css('left', -600 * len); } if(left < (-600 * len)) { list.css('left', -600); } }); } function showButton() { buttons.eq(index-1).addClass('chos').siblings().removeClass('chos'); } function play() { timer = setTimeout(function () { next.trigger('click'); play(); }, interval); } function stop() { clearTimeout(timer); } next.bind('click', function () { if (list.is(':animated')) { return; } if (index == 5) { index = 1; } else { index += 1; } animate(-600); showButton(); }); prev.bind('click', function () { if (list.is(':animated')) { return; } if (index == 1) { index = 5; } else { index -= 1; } animate(600); showButton(); }); buttons.each(function () { $(this).bind('click', function () { if (list.is(':animated') || $(this).attr('class')=='chos') { return; } var myIndex = parseInt($(this).attr('index')); var offset = -600 * (myIndex - index); animate(offset); index = myIndex; showButton(); }) }); container.hover(stop, play); play();});源碼下載 http://pan.baidu.com/s/1kVfnGF1
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持武林網(wǎng)！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
