常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全

最新推荐文章于 2024-06-30 15:38:14 发布

ww122081351

最新推荐文章于 2024-06-30 15:38:14 发布

阅读量723

点赞数

分类专栏： js 文章标签： js 滚动

本文链接：https://blog.csdn.net/ww122081351/article/details/18041209

版权

js 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本源代码收集了一些常用的网页图片滚动，无缝滚动，效果很平滑，包括上下左右四个方向的滚动，或许你现在用不上这些代码，不过先收藏起来以备后用哦。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)- www.codefans.net</title>
</head>
<body>
<div id="colee" style="overflow:hidden;height:253px;width:410px;">
<div id="colee1">
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
</div>
<div id="colee2"></div>
</div>
<script>
var speed=30;
var colee2=document.getElementById("colee2");
var colee1=document.getElementById("colee1");
var colee=document.getElementById("colee");
colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
function Marquee1(){
//当滚动至colee1与colee2交界时
if(colee2.offsetTop-colee.scrollTop<=0){
 colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
 }else{
 colee.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
colee.οnmοuseοver=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
colee.οnmοuseοut=function(){MyMar1=setInterval(Marquee1,speed)}
</script>
<!--向上滚动代码结束-->
<br>
<!--下面是向下滚动代码-->
<div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;">
<div id="colee_bottom1">
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
</div>
<div id="colee_bottom2"></div>
</div>
<script>
var speed=30
var colee_bottom2=document.getElementById("colee_bottom2");
var colee_bottom1=document.getElementById("colee_bottom1");
var colee_bottom=document.getElementById("colee_bottom");
colee_bottom2.innerHTML=colee_bottom1.innerHTML
colee_bottom.scrollTop=colee_bottom.scrollHeight
function Marquee2(){
if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0)
colee_bottom.scrollTop+=colee_bottom2.offsetHeight
else{
colee_bottom.scrollTop--
}
}
var MyMar2=setInterval(Marquee2,speed)
colee_bottom.οnmοuseοver=function() {clearInterval(MyMar2)}
colee_bottom.οnmοuseοut=function() {MyMar2=setInterval(Marquee2,speed)}
</script>
<!--向下滚动代码结束-->
<br>
<!--下面是向左滚动代码-->
<div id="colee_left" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="colee_left1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
</tr>
</table>
</td>
<td id="colee_left2" valign="top"></td>
</tr>
</table>
</div>
<script>
//使用div时，请保证colee_left2与colee_left1是在同一行上.
var speed=30//速度数值越大速度越慢
var colee_left2=document.getElementById("colee_left2");
var colee_left1=document.getElementById("colee_left1");
var colee_left=document.getElementById("colee_left");
colee_left2.innerHTML=colee_left1.innerHTML
function Marquee3(){
if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度
colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度
else{
colee_left.scrollLeft++
}
}
var MyMar3=setInterval(Marquee3,speed)
colee_left.οnmοuseοver=function() {clearInterval(MyMar3)}
colee_left.οnmοuseοut=function() {MyMar3=setInterval(Marquee3,speed)}
</script>
<!--向左滚动代码结束-->
<br>
<!--下面是向右滚动代码-->
<div id="colee_right" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="colee_right1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
</tr>
</table>
</td>
<td id="colee_right2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30//速度数值越大速度越慢
var colee_right2=document.getElementById("colee_right2");
var colee_right1=document.getElementById("colee_right1");
var colee_right=document.getElementById("colee_right");
colee_right2.innerHTML=colee_right1.innerHTML
function Marquee4(){
if(colee_right.scrollLeft<=0)
colee_right.scrollLeft+=colee_right2.offsetWidth
else{
colee_right.scrollLeft--
}
}
var MyMar4=setInterval(Marquee4,speed)
colee_right.οnmοuseοver=function() {clearInterval(MyMar4)}
colee_right.οnmοuseοut=function() {MyMar4=setInterval(Marquee4,speed)}
</script>
<!--向右滚动代码结束-->
</body>
</html>

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>无缝滚动——左右</title>
    <link rel="stylesheet" type="text/css" href="../css/base.css" media="all"/>
    <style type="text/css">
    #scroll{width:698px;height:108px;margin:50px auto 0;position:relative;overflow:hidden;}
    .btn_left{display:block;width:68px;height:68px;background:url(images/btn.jpg) no-repeat -70px -69px;position:absolute;top:20px;left:1px;z-index:1;}
    .btn_left:hover{background:url(images/btn.jpg) no-repeat -70px 0;}
    .btn_right{display:block;width:68px;height:68px;background:url(images/btn.jpg) no-repeat 1px -69px;position:absolute;top:20px;right:0;z-index:1;}
    .btn_right:hover{background:url(images/btn.jpg) no-repeat 1px 0;}
    #scroll .content{width:546px;height:108px;position:relative;overflow:hidden;margin:0 auto;}
    #scroll ul{position:absolute;}
    #scroll li{float:left;width:182px;height:108px;text-align:center;}
    #scroll li a:hover{position:relative;top:2px;}
    </style>
</head>
<body>
    <div id="scroll">
        <a href="javascript:;" class="btn_left"></a>
        <a href="javascript:;" class="btn_right"></a>
        <div class="content">
            <ul>
                <li><a href="#"><img src="images/1.jpg" width="178" height="108" alt=""/></a></li>
                <li><a href="#"><img src="images/2.jpg" width="178" height="108" alt=""/></a></li>
                <li><a href="#"><img src="images/3.jpg" width="178" height="108" alt=""/></a></li>
                <li><a href="#"><img src="images/4.jpg" width="178" height="108" alt=""/></a></li>
            </ul>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
    var oDiv = document.getElementById('scroll');
    var oUl = oDiv.getElementsByTagName('ul')[0];
    var aLi = oDiv.getElementsByTagName('li');
    var aBtn = oDiv.getElementsByTagName('a');
    var speed = -1;
    var timer = null;
    oUl.innerHTML += oUl.innerHTML;
    oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
    timer = setInterval(function(){
        oUl.style.left = oUl.offsetLeft + speed + 'px';
        if(oUl.offsetLeft < - oUl.offsetWidth / 2){
            oUl.style.left = '0';
        }else if(oUl.offsetLeft > 0){
            oUl.style.left = - oUl.offsetWidth / 2 + 'px';
        }
    },30);
    aBtn[0].onclick = function(){
        speed = -1;
    };
    aBtn[1].onclick = function(){
        speed = 1;
    };
    oUl.onmouseover = function(){
        clearInterval(timer);
    };
    oUl.onmouseout = function(){
        timer = setInterval(function(){
            oUl.style.left = oUl.offsetLeft + speed + 'px';
            if(oUl.offsetLeft < -oUl.offsetWidth / 2){
                oUl.style.left = '0';
            }else if(oUl.offsetLeft > 0){
                oUl.style.left = - oUl.offsetWidth / 2 + 'px';
            }
        },30);
    };
};
</script>

上午做了无缝滚动-左右的效果，现在做下无缝滚动——上下的效果。其他代码和左右的差不多，只是改变的是 offsetTop 的值，并且不需要计算 ul 整体的宽度了。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>无缝滚动——上下</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    li{list-style:none;}
    img{border:0;}
    #scroll{width:178px;margin:50px auto;position:relative;}
    .btn{display:block;width:27px;height:27px;margin-left:auto;margin-right:auto;cursor:pointer;}
    .up{background:url(images/up.gif);}
    .down{background:url(images/down.gif);}
    .content{margin:10px 0;height:440px;overflow:hidden;position:relative;}
    .content ul{position:absolute;top:0;left:0;}
    .content li{height:110px;}
    </style>
</head>
<body>
    <div id="scroll">
        <a href="javascript:;" id="up" class="btn up"></a>
        <div class="content">
            <ul>
                <li><a href="#" title="111"><img src="images/1.jpg" alt="111" width="178" height="108"/></a></li>
                <li><a href="#" title="222"><img src="images/2.jpg" alt="222" width="178" height="108"/></a></li>
                <li><a href="#" title="333"><img src="images/3.jpg" alt="333" width="178" height="108"/></a></li>
                <li><a href="#" title="444"><img src="images/4.jpg" alt="444" width="178" height="108"/></a></li>
            </ul>
        </div>
        <a class="btn down" href="javascript:;" id="down"></a>
    </div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
    var oDiv = document.getElementById('scroll');
    var btnUp = document.getElementById('up');
    var btnDown = document.getElementById('down');
    var oUl = oDiv.getElementsByTagName('ul')[0];
    var timer = null;
    var speed = -1;
    
    oUl.innerHTML += oUl.innerHTML;
    
    setTimeout(move,1500);
    
    btnUp.onclick = function(){
        clearInterval(timer);
        speed = -1;
        move();
    };
    btnDown.onclick = function(){
        clearInterval(timer);
        speed = 1;
        move();
    };
    oUl.onmouseover = function(){
        clearInterval(timer);
    };
    oUl.onmouseout = function(){
        move();
    };
    function move(){
        timer = setInterval(function(){
            oUl.style.top = oUl.offsetTop + speed + 'px';
            if(oUl.offsetTop <= - oUl.offsetHeight / 2){
                oUl.style.top = '0';
            }else if(oUl.offsetTop >= 0){
                oUl.style.top = - oUl.offsetHeight / 2 + 'px';
            };
        },30);
    };
};
</script>