javascript实现左右控制无缝滚动


Posted in Javascript onDecember 31, 2014

无缝滚动是项目中经常需要用到的一种特效,网上也有很多的示例代码,这里给大家分享的是一段比较简单实用的,而且兼容性也不错的代码,小伙伴们仔细研究下吧。

html 代码:

<</SPAN>html>

<</SPAN>head lang="en">

    <</SPAN>meta charset="UTF-8">

    <</SPAN>title>无缝滚动</</SPAN>title>

    <</SPAN>script src="js/0010.js"></</SPAN>script>

    <</SPAN>link rel="stylesheet" type="text/css" href="css/0010.css" />

</</SPAN>head>

<</SPAN>body>

   <</SPAN>a href="javascript:">向左走</</SPAN>a>

   <</SPAN>a href="javascript:">向右走</</SPAN>a>

   <</SPAN>div id="div1">

       <</SPAN>ul>

           <</SPAN>li><</SPAN>img src="image/1.jpg"></</SPAN>li>

           <</SPAN>li><</SPAN>img src="image/2.jpg"></</SPAN>li>

           <</SPAN>li><</SPAN>img src="image/3.jpg"></</SPAN>li>

           <</SPAN>li><</SPAN>img src="image/4.jpg"></</SPAN>li>

       </</SPAN>ul>

   </</SPAN>div>

</</SPAN>body>

</</SPAN>html>

CSS代码

*{

    margin:0;

    padding: 0;

}

#div1{

    overflow: hidden;

    background: blue;

    position: relative;

    width: 600px;

    height: 150px;

    margin:100px auto;

}

#div1 ul{

    position: absolute;

    left: 0px;

    top: 0px;

    list-style: none;

}

#div1 ul li{

    float: left;

}

#div1 ul li img{

    width:150px;

    height:150px;

}

js:代码

window.onload=function(){

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

    var oUl=oDiv.getElementsByTagName('ul')[0];

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

    var timer=null;

    var speed=2;//控制滚动速度以及方向

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

    oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';

    timer=setInterval(move,30);

    oDiv.onmouseover=function(){//鼠标移入暂定

        clearInterval(timer);

    };

    oDiv.onmouseout=function(){//鼠标移出继续滚动

        timer=setInterval(move,30);

    }

    document.getElementsByTagName('a')[0].onclick=function(){

        speed=-2;

    }

    document.getElementsByTagName('a')[1].onclick=function(){

        speed=2;

    }

    function move(){//图片滚动

        if(oUl.offsetLeft<-oUl.offsetWidth/2){

            oUl.style.left=0;

        }

        if(oUl.offsetLeft>0){

            oUl.style.left=-oUl.offsetWidth/2+'px';

        }

        oUl.style.left=oUl.offsetLeft+speed+'px';

    }

}

效果是不是非常棒呢。

Javascript 相关文章推荐
Prototype使用指南之dom.js
Jan 10 Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 Javascript
jQuery实现点击小图显示大图代码分享
Aug 25 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
jsTree事件和交互以及插件plugins详解
Aug 29 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
小程序云开发初探(小结)
Oct 24 Javascript
vue动画效果实现方法示例
Mar 18 Javascript
javascript比较两个日期的先后示例代码
Dec 31 #Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 #Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 #Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 #Javascript
修复bash漏洞的shell脚本分享
Dec 31 #Javascript
分享一个常用的javascript静态类
Dec 31 #Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 #Javascript
You might like
PHP 常见郁闷问题答解
2006/11/25 PHP
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
YII中assets的使用示例
2014/07/31 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
Javascript----文件操作
2007/01/18 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
python 图片验证码代码
2008/12/07 Python
Python中__init__和__new__的区别详解
2014/07/09 Python
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
python 模拟银行转账功能过程详解
2019/08/06 Python
Pytorch中实现只导入部分模型参数的方式
2020/01/02 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
城市规划毕业生求职信
2013/10/10 职场文书
个人委托书范本
2014/04/02 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书
社区干部培训心得体会
2016/01/06 职场文书
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
Java中的随机数Random
2022/03/17 Java/Android