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


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 相关文章推荐
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
Nov 26 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
jQuery的ready方法详解
Nov 27 Javascript
jQuery中:first选择器用法实例
Dec 30 Javascript
js中for in语句的用法讲解
Apr 24 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
详细讲解JavaScript中的this绑定
Oct 10 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 Javascript
vue中node_modules中第三方模块的修改使用详解
May 31 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
一个简单实现多条件查询的例子
2006/10/09 PHP
php printf输出格式使用说明
2010/12/05 PHP
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
Prototype框架详解
2015/11/25 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
关于RxJS Subject的学习笔记
2018/12/05 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
js实现掷骰子小游戏
2019/10/24 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
JavaScript实现简单验证码
2020/08/24 Javascript
使用Python生成XML的方法实例
2017/03/21 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
介绍一下grep命令的使用
2012/06/28 面试题
物流管理应届生求职信
2013/11/07 职场文书
销售主管岗位职责
2014/02/08 职场文书
自我检讨书范文
2015/01/28 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
合同审查法律意见书
2015/06/04 职场文书
初中运动会前导词
2015/07/20 职场文书
高温慰问简报
2015/07/21 职场文书
超市员工管理制度
2015/08/06 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电