原生JS簡單的無縫自動輪播
阿新 • • 發佈:2018-09-25
討論 aid 500px 設置 我們 哈哈 可能 java afr
最近在不斷的加強鞏固js。在學習jq和vue之後發現很多東西其實都是不明所以,有些底層的東西自己不懂,到頭來也只是一昧的使用,一直在用別人的東西,對自己的成長幫助也不大。
萬丈高樓平地起,基礎打紮實了學什麽都快,而且我覺得用原生的代碼寫完好像自己有點小成就感的。現在記錄一下今天復習的原生js無縫輪播吧。
先上一張自拍鎮樓,哈哈哈
首先先說一下思路吧,首先任意張圖片以ul的形式保存顯示,上代碼吧
<div id="wrap"> <ul id="ul"> <li> <img src="http://img3.imgtn.bdimg.com/it/u=1135520735,2369294998&fm=200&gp=0.jpg"> </li> <li> <img src="http://img2.imgtn.bdimg.com/it/u=695607252,2370769232&fm=200&gp=0.jpg"> </li> <li> <img src="http://img4.imgtn.bdimg.com/it/u=4133407901,1533904167&fm=200&gp=0.jpg"> </li> <li> <img src="http://img5.imgtn.bdimg.com/it/u=4083237979,1376579798&fm=26&gp=0.jpg"> </li> <li> <img src="http://img2.imgtn.bdimg.com/it/u=1640379911,3259036309&fm=26&gp=0.jpg"> </li> </ul> </div>
圖片輪播的話我是讓整個ul移動顯示,而不是更改li的margin,上css代碼,因為一張圖片設置是80px;所以容器的width就是400了。
#wrap{ width: 400px; height: 80px; overflow: hidden; margin-left: 500px; margin-top: 300px; position: relative; } #ul{ position: absolute; left: 0; top: 0; width: 400px; font-size: 0; margin: 0; padding: 0; }
然後js代碼就很簡單了,直接設置一個定時器,讓ul緩慢的右移或者左移就可以了。但是會有一個問題,我們等下再討論,先附上代碼
window.onload = function(){ var odiv = document.getElementById(‘wrap‘); var oul = document.getElementById(‘ul‘); setInterval(function(){ oul.style.left = oul.offsetLeft + 5 +‘px‘;},30)
但是圖片往右走了就回不了頭了,上面的代碼只是讓圖片一直往左移動,那怎麽實現當最後一張圖片移動到左邊緣時第一張圖片重新顯示,其實很簡單
比如圖片是1、2、3、4這麽顯示,那麽我們多一份圖片不就可以了,也就是說1、2、3、4、1、2、3、4,然後當第2組圖片顯示到4的時候,我們將ul重新拉回來
那麽代碼就可以這麽寫了
var odiv = document.getElementById(‘wrap‘); var oul = document.getElementById(‘ul‘); var oli = oul.getElementsByTagName(‘li‘); oul.innerHTML = oul.innerHTML + oul.innerHTML;//拼接li,因為圖片可能是任意張 oul.style.width = oli[1].offsetWidth * oli.length + ‘px‘;//ul的寬度等於所有圖片寬度的總和 setInterval(function(){ if (oul.offsetLeft < -oul.offsetWidth/2) { oul.style.left = 0;//如果ul已經顯示完了一組,也就是寬度的一半,那麽就把他拉回來重新輪播 }else{ oul.style.left = oul.offsetLeft - 2 +‘px‘; } },30);
這樣就完成了,可以復制代碼在瀏覽器查看效果。
原生JS簡單的無縫自動輪播