javascript實(shí)現(xiàn)左右控制無(wú)縫滾動(dòng)
無(wú)縫滾動(dòng)是項(xiàng)目中經(jīng)常需要用到的一種特效,網(wǎng)上也有很多的示例代碼,這里給大家分享的是一段比較簡(jiǎn)單實(shí)用的,而且兼容性也不錯(cuò)的代碼,小伙伴們仔細(xì)研究下吧。
html 代碼:
<</SPAN>html>
<</SPAN>head lang="en">
<</SPAN>meta charset="UTF-8">
<</SPAN>title>無(wú)縫滾動(dòng)</</SPAN>title>
<</SPAN>script src="js/0010.js"></</SPAN>script>
<</SPAN>link rel="stylesheet" type="text/css" href="css/0010.css" />
</</SPAN>head>
<</SPAN>body>
<</SPAN>a href="javascript:">向左走</</SPAN>a>
<</SPAN>a href="javascript:">向右走</</SPAN>a>
<</SPAN>div id="div1">
<</SPAN>ul>
<</SPAN>li><</SPAN>img src="image/1.jpg"></</SPAN>li>
<</SPAN>li><</SPAN>img src="image/2.jpg"></</SPAN>li>
<</SPAN>li><</SPAN>img src="image/3.jpg"></</SPAN>li>
<</SPAN>li><</SPAN>img src="image/4.jpg"></</SPAN>li>
</</SPAN>ul>
</</SPAN>div>
</</SPAN>body>
</</SPAN>html>
CSS代碼
*{
margin:0;
padding: 0;
}
#div1{
overflow: hidden;
background: blue;
position: relative;
width: 600px;
height: 150px;
margin:100px auto;
}
#div1 ul{
position: absolute;
left: 0px;
top: 0px;
list-style: none;
}
#div1 ul li{
float: left;
}
#div1 ul li img{
width:150px;
height:150px;
}
js:代碼
window.onload=function(){
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var timer=null;
var speed=2;//控制滾動(dòng)速度以及方向
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
timer=setInterval(move,30);
oDiv.onmouseover=function(){//鼠標(biāo)移入暫定
clearInterval(timer);
};
oDiv.onmouseout=function(){//鼠標(biāo)移出繼續(xù)滾動(dòng)
timer=setInterval(move,30);
}
document.getElementsByTagName('a')[0].onclick=function(){
speed=-2;
}
document.getElementsByTagName('a')[1].onclick=function(){
speed=2;
}
function move(){//圖片滾動(dòng)
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left=0;
}
if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+'px';
}
oUl.style.left=oUl.offsetLeft+speed+'px';
}
}
效果是不是非常棒呢。
相關(guān)文章
js傳遞數(shù)組參數(shù)到后臺(tái)controller的方法
下面小編就為大家分享一篇js傳遞數(shù)組參數(shù)到后臺(tái)controller的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03原生JavaScript編寫(xiě)canvas版的連連看游戲
這篇文章主要為大家詳細(xì)介紹了原生JavaScript編寫(xiě)連連看游戲的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05input file上傳 圖片預(yù)覽功能實(shí)例代碼
input file上傳圖片預(yù)覽其實(shí)很簡(jiǎn)單。今天小編就通過(guò)本文給大家介紹input file上傳 圖片預(yù)覽功能的實(shí)現(xiàn)代碼,比較簡(jiǎn)單,對(duì)input file 上傳預(yù)覽功能感興趣的朋友參考下吧2016-10-10淺談javascript中this在事件中的應(yīng)用
這篇文章主要介紹了淺談javascript中this在事件中的應(yīng)用實(shí)例,非常有助于我們對(duì)this關(guān)鍵字的理解,這里推薦給大家。2015-02-02解決Layui數(shù)據(jù)表格顯示無(wú)數(shù)據(jù)提示的問(wèn)題
今天小編就為大家分享一篇解決Layui數(shù)據(jù)表格顯示無(wú)數(shù)據(jù)提示的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11JS實(shí)現(xiàn)點(diǎn)擊Radio動(dòng)態(tài)更新table數(shù)據(jù)
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊Radio動(dòng)態(tài)更新table數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2017-07-07