纯JS实现多张图片无缝滚动和多张图片上下滚动的效果--JavaScript实例集锦（初学）

时间：2024-03-05 12:51:45

我们会看到很多的网站上会使用多张图片无缝滚动的效果。

下面我就介绍几种纯JS实现多张图片的无缝滚动，并实现鼠标移到图片上运动停止的效果，可以控制图片左右滚动。
1.效果展示：

代码实现：

<!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\';
}//定义到边界的时候，实现无缝衔接

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

//定义图片的右边距随着速度不断不断增加，或减小，实现运动的效果
}
timer=setInterval(fnMove,30);
aA[0].onclick=function(){
iSpeed=-10;

//按下左箭头，定义向左运动

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

//按下右箭头，定义向右运动
}
oDiv.onmouseover=function(){
clearInterval(timer);

//鼠标移动到图片上，清除定时器，停止运动
}
oDiv.onmouseout=function(){
timer=setInterval(fnMove,30);

//鼠标移出，重新开启定时器，重新运动
}
};
</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>