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 相关文章推荐
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
Mar 13 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
js获取form表单中name属性的值
Feb 27 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/10/09 PHP
用PHP制作的意见反馈表源码
2007/03/11 PHP
测试您的 PHP 水平的题目
2007/05/30 PHP
通过PHP CLI实现简单的数据库实时监控调度
2009/07/01 PHP
Yii的CDbCriteria查询条件用法实例
2014/12/04 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
JS焦点图切换,上下翻转
2011/05/12 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
Linux内核产生并发的原因
2016/11/08 面试题
银行授权委托书范本
2014/10/04 职场文书
2015年七夕情人节感言
2015/08/03 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
Python实现视频中添加音频工具详解
2021/12/06 Python