js实现无缝滚动特效


Posted in Javascript onDecember 20, 2015

本文实例为大家介绍了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实现无缝滚动还是正常实现了,希望对大家也能有所帮助。

Javascript 相关文章推荐
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
浅析JavaScript原型继承的陷阱
Dec 03 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
详解vuex的简单使用
Mar 12 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 Javascript
JavaScript实现无限轮播效果
Nov 19 Javascript
微信小程序实现简单的select下拉框
Nov 23 Javascript
JavaScript ES6的函数拓展
Jan 18 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 #Javascript
原生js页面滚动延迟加载图片
Dec 20 #Javascript
javascript实现的网站访问量统计代码
Dec 20 #Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 #Javascript
图解js图片轮播效果
Dec 20 #Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
Dec 20 #Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 #Javascript
You might like
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
使用php重新实现PHP脚本引擎内置函数
2007/03/06 PHP
discuz Passport 通行证 整合笔记
2008/06/30 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
PHP设计模式之责任链模式的深入解析
2013/06/13 PHP
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
webpack3+React 的配置全解
2017/08/21 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
vue中轮训器的使用
2019/01/27 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
在django中,关于session的通用设置方法
2019/08/06 Python
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
Jar包的作用是什么
2014/03/30 面试题
数控技术专业毕业自荐书范文
2014/02/05 职场文书
怎样写好创业计划书的内容
2014/02/06 职场文书
导游欢送词
2015/01/31 职场文书
感恩教育观后感
2015/06/17 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
Pytest中conftest.py的用法
2021/06/27 Python