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


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 相关文章推荐
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
jquery图片放大功能简单实现
Aug 01 Javascript
jQuery使用ajaxSubmit()提交表单示例
Apr 04 Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
jQuery mobile 移动web(6)
Dec 20 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 Javascript
jquery实现抽奖功能
Oct 22 jQuery
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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
php中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
2016/02/28 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
OpenCV实现人脸识别
2017/04/07 Python
Python生成密码库功能示例
2017/05/23 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
经典导游欢迎词大全
2014/01/16 职场文书
优秀高中生事迹材料
2014/02/11 职场文书
信息总监管理职责范本
2014/03/08 职场文书
廉洁自律承诺书
2014/03/27 职场文书
加强作风建设工作总结
2014/10/23 职场文书
遗愿清单观后感
2015/06/09 职场文书
2016年师德师风学习心得体会
2016/01/12 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技