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 相关文章推荐
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 Javascript
js简单实现点击左右运动的方法
Apr 10 Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
Openlayers实现图形绘制
Sep 28 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
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
php将图片文件转换成二进制输出的方法
2015/06/10 PHP
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
2010/11/16 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
轻松实现js选项卡切换效果
2016/09/24 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
零基础写python爬虫之神器正则表达式
2014/11/06 Python
python妙用之编码的转换详解
2017/04/21 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
Numpy中的mask的使用
2018/07/21 Python
django中related_name的用法说明
2020/05/20 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
大宝sod蜜广告词
2014/03/21 职场文书
励志演讲稿大全
2014/08/21 职场文书
三好学生评语大全
2014/12/29 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
交通安全教育主题班会
2015/08/12 职场文书
护士旷工检讨书
2015/08/15 职场文书
Python预测分词的实现
2021/06/18 Python
Nginx 匹配方式
2022/05/15 Servers