js实现图片无缝滚动特效

JavaScript 做棵大树 来源:脚本之家">js实现图片无缝滚动特效 8年前 (2017-05-22) 2470次浏览 0个评论

这篇文章主要介绍了 js 实现图片无缝循环滚动特效的相关资料,本实例在网页中较为常见,需要的朋友可以参考下

首先,无缝滚动的第一个重点就是——动。关于怎么让页面的元素节点动起来,这就得学明白关于JavaScript中定时器的相关知识。

js 实现图片无缝滚动特效

这样当第一张图片 1 滚动出边框时,后面的图片 1 则出现在图片 4 的后面,这样效果看起来就和循环一样~

当图片滚动到下面的这种情况时:、

js 实现图片无缝滚动特效

继续滚动就会导致图片后面出现空白,就不是循环滚动的效果了,其实这点也是程序的关键所在,每当图片滚动到图(2)这种情况时,就应该让图片重新回到图(1)那种状态再继续滚动,这样的话就形成了无缝循环滚动的效果。

另外拓展一下程序写了鼠标移入图片停止滚动,移出继续滚动的效果,就是利用消除定时器的方法实现的,代码很简单就不介绍了。还有我为了样式好看一点,把图片都设置为 160*120 的尺寸使用的,大家运行代码是需要自己准备图片。

代码如下:

 

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #div1{
      width: 640px;
      height: 120px;
      margin: 100px auto;
      background-color: #646464;
      position: relative;
      overflow: hidden;
    }
    #div1 ul{
      position:absolute;
      left:0;
      top:0;
      overflow: hidden;
      background-color: #3b7796;
    }
 
    #div1 ul li{
      float: left;
      width: 160px;
      height: 120px;
      list-style: none;
    }
  </style>
 
  <script>
    window.onload = function(){
      var oDiv = document.getElementById('div1');
      var oUl = document.getElementById('ul1');
      var speed = 2;//初始化速度
 
      oUl.innerHTML += oUl.innerHTML;//图片内容*2-----参考图(2)
      var oLi= document.getElementsByTagName('li');
      oUl.style.width = oLi.length*160+'px';//设置 ul 的宽度使图片可以放下
 
      var oBtn1 = document.getElementById('btn1');
      var oBtn2 = document.getElementById('btn2');
 
 
      function move(){
        if(oUl.offsetLeft<-(oUl.offsetWidth/2)){//向左滚动,当靠左的图 4 移出边框时
          oUl.style.left = 0;
        }
 
        if(oUl.offsetLeft > 0){//向右滚动,当靠右的图 1 移出边框时
          oUl.style.left = -(oUl.offsetWidth/2)+'px';
        }
 
        oUl.style.left = oUl.offsetLeft + speed + 'px';
      }
 
      oBtn1.addEventListener('click',function(){
        speed = -2;
      },false);
      oBtn2.addEventListener('click',function(){
        speed = 2;
      },false);
 
      var timer = setInterval(move,30);//全局变量 ,保存返回的定时器
 
      oDiv.addEventListener('mouseout', function () {
        timer = setInterval(move,30);
      },false);
      oDiv.addEventListener('mousemove', function () {
        clearInterval(timer);//鼠标移入清除定时器
      },false);
    }
  </script>
</head>
<body>
  <input id="btn1" type="button" value="向左">
  <input id="btn2" type="button" value="向右">
  <div id="div1">
 
    <ul id="ul1">
      <li><img src="https://beatree.cn/wp-content/uploads/2017/06/img_1-1.jpg"></li>
      <li><img src="https://beatree.cn/wp-content/uploads/2017/06/img_2-1.jpg"></li>
      <li><img src="https://beatree.cn/wp-content/uploads/2017/06/img_3-1.jpg"></li>
      <li><img src="https://beatree.cn/wp-content/uploads/2017/06/img_4-1.jpg"></li>
    </ul>
  </div>
</body>
</html>

以上就是 JS 实现无缝滚动特效的详细代码,希望对大家有帮助。


转载自:脚本之家


做棵大树 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明js 实现图片无缝滚动特效
喜欢 (3)
[欢迎投币]
分享 (0)
关于作者:
一个整天无所事事的,有时候忽然热血的孩子
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
Ads Blocker Image Powered by Code Help Pro

靓仔,把广告拦截插件关了吧~ 给孩子两毛钱广告费吧~

我们检测到您使用了广告屏蔽插件,建议您把 广告屏蔽插件关闭 或者 添加本站为白名单 即可

个人网站运营不易,感谢体谅啊~

打赏博主会让我更加开心啦~(。・∀・)ノ

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock