js实现无缝滚动特效

 更新时间:2015年12月20日 09:31:33   作者:霪霖笙箫  
这篇文章主要介绍了js实现无缝滚动特效,结合已学知识进行扩展性练习,感兴趣的朋友可以参考一下

本文实例为大家介绍了js实现无缝滚动特效需要做到的功能,以及关键性js代码,分享给大家供大家参考,具体内容如下

运行效果图:

结合下学了的知识,做个模拟的综合性扩展练习~~  大致功能如下:

  • 1、点开html后,图片自动移动展示
  • 2、点击左右方向,可以改变 图片移动的方向(改变left的值,正负)
  • 3、鼠标移入移出图片后,图片暂停移动(setInterval,clearInterval)
  • 4、鼠标移到图片上,高亮(a:hover)
  • 5、点击小图, 下面的大图会改变
  • 6、文字区域随着图片的变化而变化(未成功,有待提高)

 具体代码:

window.onload = function(){

  //声明部分( 现在的习惯是要写什么声明什么, 一起写容易搞忘了。。也不知道好不好这样)

  var oDiv = document.getElementById('box');

  var oUl = oDiv.getElementsByTagName('ul');

  var oLi = oUl.getElementsByTagName('li');

  var speed = 2;

  var timer = null;

   

  //让ul的内容增一倍,从而实现无缝滚动

  oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;

  oUl.style.width = oLi[1].offsetWidth * oLi.length + 'px';

  //move函数

  function move(){
    oUl.style.left = oUl.offsetLeft + speed + 'px';
    //控制左
    if(oUl.offsetLeft < -oUl.offsetWidth/2){
    oUl.style.left = 0;
    }

    //控制右
    if(oUl.offsetLeft > 0){
    oUl.style.left = -oUl.offsetWidth/2 + 'px';
    }

  }

    //图标点击~ 控制移动方向

    var oLeft = document.getElementById('jt_left');
    var oRight= document.getElementById('jt_right');

    oLeft.onclick = function(){
    speed = -2;
    }

    oRight.onclick = function(){
    speed = 2;
    }

    //鼠标移入移出效果

    oDiv.onmouseover = function(){
      clearInterval(timer);
    }

    oDiv.onmouseout = function(){
      timer = setInterval(move,20);
    }
    timer = setInterval(move,20); 

    //点击获取大图

    

    var aA = oDiv.getElementsByTagName('a');
    for(var i=0;i<aA.length;i++){
      aA[i].onclick = function(){
        showPic(this);
        return false;
      }
    }
    
    function showPic(whichpic){
      var source = whichpic.href;
      var placeholder = document.getElementById('placeholder');
      placeholder.src = source;
    }

}

最后文字的替换效果 ,本想用图片的方式,让文本框对应的数字跟着变~~ 结果未能成功,不知原因,这方面还需待提高,希望大家能提供一些好的建议,不过js实现无缝滚动还是正常实现了,希望对大家也能有所帮助。

相关文章

  • 浅析TypeScript 命名空间

    浅析TypeScript 命名空间

    命名空间一个最明确的目的就是解决重名问题。这篇文章主要介绍了TypeScript 命名空间的相关知识,本文通过实例详解给大家介绍的非常详细,需要的朋友可以参考下
    2020-03-03
  • JavaScript使用Promise实现并发请求数限制

    JavaScript使用Promise实现并发请求数限制

    本文主要介绍了JavaScript使用Promise实现并发请求数限制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • 用html+css+js实现的一个简单的图片切换特效

    用html+css+js实现的一个简单的图片切换特效

    这篇文章主要介绍了用html+css+js实现的一个简单的图片切换特效,需要的朋友可以参考下
    2014-05-05
  • layui实现table加载的示例代码

    layui实现table加载的示例代码

    今天小编就为大家分享一篇layui实现table加载的示例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 向fckeditor编辑器插入指定代码的方法

    向fckeditor编辑器插入指定代码的方法

    这篇文章主要向大家分享如何在fckeditor编辑器插入代码操作,这里脚本之家小编就为大家分享一下啊
    2007-05-05
  • canvas+gif.js打造自己的数字雨头像的示例代码

    canvas+gif.js打造自己的数字雨头像的示例代码

    本篇文章主要介绍了canvas+gif.js打造自己的数字雨头像的示例代码,这里整理了详细的代码,非常具有实用价值,需要的朋友可以参考下
    2017-10-10
  • 理解JavaScript中的事件

    理解JavaScript中的事件

    理解JavaScript中的事件...
    2006-09-09
  • 微信小程序开发篇之踩坑记录

    微信小程序开发篇之踩坑记录

    这篇文章主要给大家介绍了关于微信小程序开发篇之踩坑记录的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • AutoJs4.4.1免费版快速接通vscode调试脚本的操作方法

    AutoJs4.4.1免费版快速接通vscode调试脚本的操作方法

    这篇文章主要介绍了AutoJs4.4.1免费版快速接通vscode进行调试脚本,首先下载AutoJs并安装,下载完成后,将2个apk文件拷贝到手机安装即可,接下来需要安装插件,本文分步骤给大家介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • Javascript中的String对象详谈

    Javascript中的String对象详谈

    这篇文章主要介绍了Javascript中的String对象,需要的朋友可以参考下
    2014-03-03

最新评论