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


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下查找父节点的简单方法
Aug 13 Javascript
基于jquery的一个浮动框(扩展性比较好 )
Aug 27 Javascript
jquery中animate动画积累的解决方法
Oct 05 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
jQuery 删除或是清空某个HTML元素示例
Aug 04 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
Jun 27 Javascript
微信小程序实现左侧滑动导航栏
Apr 08 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实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
python如何制作缩略图
2019/04/30 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
C语言笔试集
2012/07/24 面试题
致全体运动员广播稿
2014/02/01 职场文书
医学生求职信
2014/07/01 职场文书
教师职位说明书
2014/07/29 职场文书
物业保安辞职信
2015/05/12 职场文书
2016年情人节问候语
2015/11/11 职场文书
导游词之塘栖古镇
2019/12/04 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
新手必备Python开发环境搭建教程
2021/05/28 Python