純JS實現多張圖片無縫滾動和多張圖片上下滾動的效果--JavaScript實例集錦（初學）

時間 2020-05-07

標籤實現圖片無縫滾動上下效果 javascript 實例集錦初學欄目 JavaScript 简体版

原文原文鏈接

咱們會看到不少的網站上會使用多張圖片無縫滾動的效果。javascript

下面我就介紹幾種純JS實現多張圖片的無縫滾動，並實現鼠標移到圖片上運動中止的效果，能夠控制圖片左右滾動。
1.效果展現：
css

代碼實現：html

<!DOCTYPE html>
<html>
<head>
<title>無縫滾動</title>
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
#div1{position: relative;border:1px solid #0ff;width:1100px; height: 180px;margin:50px auto 0;overflow: hidden;}
#div1 ul{position: absolute;left: 0;}
#div1 ul li{list-style: none;width:200px;float: left;padding: 10px;height: 160px;}
#div1 ul li img{width:100%;}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var aA=document.getElementsByTagName('a');//獲取向右向左的箭頭
var timer=null;
var iSpeed=10;
oUl.innerHTML+=oUl.innerHTML;//定義圖片能夠循環播放
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';//定義外層ul的寬度，根據圖片的個數和每一個圖片的寬度計算，保證總寬度是可調整的
function fnMove(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left=0;
}else if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+'px';
}//定義到邊界的時候，實現無縫銜接java

oUl.style.left=oUl.offsetLeft+iSpeed+'px';ide

//定義圖片的右邊距隨着速度不斷不斷增長，或減少，實現運動的效果
}
timer=setInterval(fnMove,30);
aA[0].onclick=function(){
iSpeed=-10;函數

//按下左箭頭，定義向左運動網站

}
aA[1].onclick=function(){
iSpeed=10;spa

//按下右箭頭，定義向右運動
}
oDiv.onmouseover=function(){
clearInterval(timer);code

//鼠標移動到圖片上，清除定時器，中止運動
}
oDiv.onmouseout=function(){
timer=setInterval(fnMove,30);htm

//鼠標移出，從新開啓定時器，從新運動
}
};
</script>
<body>
<a href="javascript:;">←</a>
<a href="javascript:;">→</a>
<div id="div1">
<ul>
<li><img src="miaoflash/images/1.jpg"></li>
<li><img src="miaoflash/images/2.jpg"></li>
<li><img src="miaoflash/images/3.jpg"></li>
<li><img src="miaoflash/images/4.jpg"></li>
<li><img src="miaoflash/images/5.jpg"></li>
<div style="clear: none;"></div>
</ul>
</div>
</body>
</html>

使用函數，此代碼更爲簡便。
2.簡易的無縫滾動：

效果圖：

只朝一個方向滾動，鼠標移入暫停滾動，鼠標移出，滾動繼續，沒有使用單獨的函數

代碼實現：

<!DOCTYPE html>
<html>
<head>
    <title>無縫滾動</title>
    <style type="text/css"> *{margin:0;padding: 0;} .roll .wrap{width:1500px;overflow: hidden; height: 344px;margin: 0 auto;position: relative;} .roll li{float: left;list-style: none;width: 700px;height: 344px;} .roll ul{position: absolute;top: 0;left: 0;} } </style>
    <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById('roll'); var oUl=oDiv.getElementsByTagName('ul')[0]; var aLi=oUl.getElementsByTagName("li"); var iSpeed=-5; var timer=null; oUl.style.width=aLi[0].offsetWidth*aLi.length+'px'; timer=setInterval(function(){ oUl.style.left=oUl.offsetLeft+iSpeed+'px'; if(oUl.offsetLeft<-oUl.offsetWidth/2){
 oUl.style.left='0px'; } },30); oUl.onmouseover=function(){ clearInterval(timer); } oUl.onmouseout=function(){ timer=setInterval(function(){ oUl.style.left=oUl.offsetLeft+iSpeed+'px'; if(oUl.offsetLeft<-oUl.offsetWidth/2){
 oul.style.left='0px'; } },30); } }; </script>
</head>
<body>
<div class="roll" id="roll">
    <div class="wrap">
        <ul>
            <li><img src="images/1.jpg"></li>
            <li><img src="images/2.jpg"></li>
            <li><img src="images/3.jpg"></li>
            <li><img src="images/4.jpg"></li>
        </ul>
    </div>
</div>
</body>
</html>

3.上下滾動：效果圖：

代碼實現：

<!DOCTYPE html>
<html>
<head>
    <title>上下滾動</title>
    <style type="text/css"> *{margin:0;padding: 0;} div#miaovslide {text-align: center;} .wrap{width:500px;overflow: hidden; height: 700px;margin: 0 auto;position: relative;} .wrap img{width: 100%;} li{list-style: none;width: 700px;height: 344px;padding: 10px 0;} ul{position: absolute;top: 0;left: 0;} } </style>
    <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById('miaovslide'); var oUl=oDiv.getElementsByTagName('ul')[0]; var aLi=oUl.getElementsByTagName('li');//獲取全部的li
            var oUp=document.getElementById('up');//獲取向上輪播的按鈕
            var oDown=document.getElementById('down');//獲取向下輪播的按鈕
            var timer=null;//定義定時器
            var iSpeed=0;//定義初始速度
 oUl.innerHTML+oUl.innerHTML; //實現循環無間斷的圖片流
 oUp.onmousedown=function(){ timer=setInterval(doMove,30); iSpeed=-5; 　　　　　　　　　//當按下向左的按鈕時，設置速度爲負，即向上滾動
 }; oUp.onmouseup=function(){ clearInterval(timer); 　　　　　　　　//當擡起鼠標時，清除定時器
 }; oDown.onmousedown=function(){ iSpeed=5; timer=setInterval(doMove,30); 　　　　　　　　　　//當鼠標按下向右的按鈕時，設置速度爲正，即向下滾動
 } oDown.onmouseup=function(){ clearInterval(timer); 　　　　　　　　　　//當鼠標擡起時，清除定時器
 } function doMove(){ oUl.style.top=oUl.offsetTop+iSpeed+'px'; if(oUl.offsetTop<-oUl.offsetHeight/2){
 oUl.style.top='0px'; }else if(oUl.offsetTop>0){ oUl.style.top=-oUl.offsetHeight/2+'px';
 } }; }; </script>
</head>
<body>
<div class="slide_module" id="miaovslide">
    <div id="up"><img src="images/prevup.png"></div>
    <div class="wrap">
        <ul>
            <li><img src="images/1.jpg"></li>
            <li><img src="images/2.jpg"></li>
            <li><img src="images/3.jpg"></li>
            <li><img src="images/4.jpg"></li>
        </ul>
    </div>
    <div id="down"><img src="images/nextdown.png"></div>
</div>
</body>
</html>

相關標籤/搜索

每日一句

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