无缝滚动改进版支持上下左右滚动(封装成函数)


Posted in Javascript onDecember 04, 2012
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>无缝滚动——上下</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    li{list-style:none;}
    img{border:0;}
    #scroll{width:178px;margin:50px auto;position:relative;}
    .btn{display:block;width:27px;height:27px;position:absolute;left:75px;}
    .up{background:url(images/up.gif);top:0;}
    .down{background:url(images/down.gif);top:490px;}
    .content{height:440px;overflow:hidden;position:relative;top:40px;}
    .content ul{position:absolute;top:0;left:0;}
    .content li{height:110px;}
    </style>
</head>
<body>
    <div id="scroll">
        <a href="javascript:;" class="btn up"></a>
        <a href="javascript:;" class="btn down"></a>
        <div class="content">
            <ul>
                <li><a href="#" title="111"><img src="images/1.jpg" alt="111" width="178" height="108"/></a></li>
                <li><a href="#" title="222"><img src="images/2.jpg" alt="222" width="178" height="108"/></a></li>
                <li><a href="#" title="333"><img src="images/3.jpg" alt="333" width="178" height="108"/></a></li>
                <li><a href="#" title="444"><img src="images/4.jpg" alt="444" width="178" height="108"/></a></li>
            </ul>
        </div>
    </div>
</body>
</html>
<script type="text/javascript" src="scroll.js"></script>
<script type="text/javascript">
window.onload = function(){
    scroll('top',1,1000);
};
</script>           

scroll.js:
/**********
    功能:实现水平或垂直无缝滚动
    参数:direction方向,总共4个值:left,right,top,bottom
          speed移动距离
          iTime多少时间后开始移动,若不写则页面加载完开始移动
**********/
function scroll(direction,speed,iTime){
    var oDiv = document.getElementById('scroll');
    var oUl = oDiv.getElementsByTagName('ul')[0];
    var aLi = oDiv.getElementsByTagName('li');
    var aBtn = oDiv.getElementsByTagName('a');
    var timer = null;
    var iSpeed = 0;
    var flag = true;    //判断水平移动还是垂直移动    oUl.innerHTML += oUl.innerHTML;
    switch(direction){
        case 'left':
            iSpeed = -speed;
            oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
            flag = true;
            break;
        case 'right':
            iSpeed = speed;
            oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
            flag = true;
            break;
        case 'top':
            iSpeed = -speed;
            flag = false;
            break;
        case 'bottom':
            iSpeed = speed;
            flag = false;
            break;
    };
    setTimeout(move,iTime);
    //左按钮和上按钮
    aBtn[0].onclick = function(){
        clearInterval(timer);
        iSpeed = -speed;
        move();
    };
    //右按钮和下按钮
    aBtn[1].onclick = function(){
        clearInterval(timer);
        iSpeed = speed;
        move();
    };
    oUl.onmouseover = function(){
        clearInterval(timer);
    };
    oUl.onmouseout = function(){
        move();
    };
    function move(){    
        timer = setInterval(function(){
            if(flag){
                oUl.style.left = oUl.offsetLeft + iSpeed + 'px';
                if(oUl.offsetLeft < -oUl.offsetWidth / 2){
                    oUl.style.left = '0';
                }else if(oUl.offsetLeft > 0){
                    oUl.style.left = - oUl.offsetWidth / 2 + 'px';
                }
            }else{
                oUl.style.top = oUl.offsetTop + iSpeed + 'px';
                if(oUl.offsetTop <= - oUl.offsetHeight / 2){
                    oUl.style.top = '0';
                }else if(oUl.offsetTop >= 0){
                    oUl.style.top = - oUl.offsetHeight / 2 + 'px';
                };
            };
        },30);
    };
};

需要注意的是:html 结构必须要像上面的结构一样。

 

Javascript 相关文章推荐
javascript dom 操作详解 js加强
Jul 13 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
JS声明变量背后的编译原理剖析
Dec 28 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
学习JavaScript设计模式之装饰者模式
Jan 19 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
js动画(animate)简单引擎代码示例
Dec 04 #Javascript
JavaScript中“+”的陷阱深刻理解
Dec 04 #Javascript
将光标定位于输入框最右侧实现代码
Dec 04 #Javascript
JavaScript中__proto__与prototype的关系深入理解
Dec 04 #Javascript
js 限制数字 js限制输入实现代码
Dec 04 #Javascript
JSON语法五大要素图文介绍
Dec 04 #Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 #Javascript
You might like
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
thinkphp实现数组分页示例
2014/04/13 PHP
PHP积分兑换接口实例
2015/02/09 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
javascript编程起步(第四课)
2007/01/10 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
详解webpack自动生成html页面
2017/06/29 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
通信工程专业女生个人求职信
2013/09/21 职场文书
大专生自我评价
2014/01/28 职场文书
四议两公开实施方案
2014/03/28 职场文书
委托书的写法
2014/09/16 职场文书
主题班会开场白
2015/06/01 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
党风廉政建设心得体会
2019/05/21 职场文书
Node与Python 双向通信的实现代码
2021/07/16 Javascript
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫