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


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 相关文章推荐
JS的Document属性和方法小结
Sep 17 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
jQuery实现文件上传进度条特效
Aug 12 Javascript
jQuery文字轮播特效
Feb 12 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
jquery传参及获取方式(两种方式)
Feb 13 jQuery
JavaScript语句错误throw、try及catch实例解析
Aug 18 Javascript
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
php计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
php内嵌函数用法实例
2015/03/20 PHP
php上传图片类及用法示例
2016/05/11 PHP
PHP实现执行外部程序的方法详解
2017/08/17 PHP
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
Python引用计数操作示例
2018/08/23 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
python Tornado框架的使用示例
2020/10/19 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
如何实现jdbc性能优化
2012/07/30 面试题
大学专科生推荐信范文
2013/11/23 职场文书
岗位职责的构建方法
2014/02/01 职场文书
采购意向书范本
2014/03/31 职场文书
温馨提示标语
2014/06/26 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
交通事故协议书范本
2014/11/18 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
2015年度物流工作总结
2015/04/30 职场文书
演讲开场白和结束语
2015/05/29 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
python在package下继续嵌套一个package
2022/04/14 Python