js功能實現top輪播圖

時間 2019-12-05

標籤功能實現欄目 JavaScript 简体版

原文原文鏈接

做用：向左滾動的輪播圖

參數：主容器的id

調用方式：直接拷貝調用方法

function autoPlay(id){

var scroll=document.getElementById(id);

var ul=scroll.children[0]

var num=0

var timer=null;

timer=setInterval(autoGoing,20); //滾動軸方法

function autoGoing(){

num--;

num<=-1200 ? num=0:num;

ul.style.left=num+"px";

}

scroll.onmouseover=function(){ //鼠標懸停中止滾動

clearInterval(timer)

}

scroll.onmouseout=function(){ //鼠標移開繼續滾動

timer=setInterval(autoGoing,20);

}

參考標籤：

<body>

<ul>

</ul>

</div>

參考樣式：

*{margin: 0;padding: 0;}

ul{list-style: none;}

img{

vertical-align: top; /*取消三個圖片底部像素距離*/

}

.box{

width: 600px;

height: 200px;

margin: 100px auto;

position: relative;

overflow: hidden;

}

.box ul li {

float: left;

}

.box ul{

width: 400%;

position: absolute;

left: 0;

top: 0;

}

------------------------------------------------------------------------------------------------------------------------

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。