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

代码如下:

<!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 结构必须要像上面的结构一样。

赞 (0)

相关推荐

  • 基于jquery实现点击左右按钮图片横向滚动

    基于jquery实现点击左右按钮图片横向滚动

    点击左右按钮图片横向滚动jquery,一次滚动四个,图片滚动完成,自动回到第一个版面: 效果图如下: 复制代码 代码如下: <!DOCTYPE html> <html lange="en"> <head> <title>点击左右按钮图片横向滚动</title> <meta charset=utf-8" /> <style type="text/css"> * { margi

  • 基于jQuery的左右滚动实现代码

    两个div. 一个div为固定宽度 .在次div中内嵌一个div ,这个为数据列. 复制代码 代码如下: <div class="box"> <div class="box-li"> <ul> <li>数据2</li> <li>数据2</li> <li>数据2</li> <li>数据2</li> <li>数据2</li

  • 基于jQuery的可以控制左右滚动及自动滚动效果的代码

    分享一个控制左右滚动及自动滚动的样例, 昨晚花了两个多小时, 忍受着悍蚊的叮咬, 汗水的侵袭, 一行行的敲出来的血汗代码. 哈哈. 封装了两种模式: 点击滚动版本DEMO 自动滚动版本DEMO,源码中有详细注释. 思路: 点击滚动模式下,是为点击(向前/向后/数字)添加click事件,通过控制展示区块left值实现切换. 1.向前(左):当在第一个版面时,滚动到最后一个页面,否则,累加left值,向前滚动; 2.向后(右):当在最后一个版面时,滚动到第一个页面,否则,累减left值,向后滚动;

  • 基于jquery的横向滚动条（滑动条）

    查找了很多方法,有些不能实现(被滚动内容的宽度未知,但使用这种方法必须已知),其它的不能完全兼容这些浏览器(IE6,Firefox,Chrome).最后决定使用JQuery的Slider控件. 1. 下载jquery-1.3.2.min.js,jquery-ui-1.7.1.custom.min.js 2. Html 复制代码 代码如下: <div id="topslider" runat="server"></div> <div id

  • jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)

    jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)

    demo01.html 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

  • DIV+CSS+JS不间断横向滚动实现代码

    DIV+CSS+JS实现不间断横向滚动代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>横向不间断滚动DIV CSS代码-DIVCSS5</title> </head> <body>

  • 基于jquery可配置循环左右滚动例子

    基于jquery可配置循环左右滚动例子

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>可配置横栏滚动De

  • 无缝滚动改进版支持上下左右滚动（封装成函数）

    复制代码 代码如下: <!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;}  

  • 常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全(推荐)

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <head> <-----> </head> <body> <!--向下滚动代码开始--> <div id="colee" style="overflow:hidden;height:253px;width:410px;"> <div id="colee1"> <p><img src=&quo

  • python 制作python包,封装成可用模块教程

    首先编写py程序: printtest.py def test(): print('print test') 将以上.py文件做成python模块,需要在相同目录下创建setup.py文件,setup.py中输入配置信息: from setuptools import setup setup(name='printtest', version='1.0', py_modules=['printtest'], ) 打开终端,定位到该文件夹下,输入: python setup.py sdist 此时

  • 基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解

    我就废话不多说了,大家还是直接看代码吧! # -*- coding: utf-8 -*- """ Created on Thu Apr 12 11:23:46 2018 @author: henbile """ #计算滚动波动率可以使用专门做技术分析的talib包里面的函数,也可以使用pandas包里面的滚动函数. #但是两个函数对于分母的选择,就是使用N还是N-1作为分母这件事情上是有分歧的. #另一个差异在于:talib包计算基于numpy,

  • 详解java调用存储过程并封装成map

    详解java调用存储过程并封装成map 本文代码中注释写的比较清楚不在单独说明,希望能帮助到大家, 实例代码: public List<Map<String , Object>> doCallProcedure(String procedureString,String[] parameters) throws PersistentDataOperationException { if (!isReady ()) { throw new PersistentDataOperatio

  • iOS UIScrollView滚动视图/无限循环滚动/自动滚动的实例代码

    我们都知道UIScrollView有一种很流畅的切换效果,结合UIPageControl的辅助展示效果,就可以完成一个很不错的产品介绍功能页面.下面给大家分享iOS UIScrollView滚动视图/无限循环滚动/自动滚动功能,具体代码如下所示: <UIScrollViewDelegate> #define WIDTH [[UIScreen mainScreen] bounds].size.width #define HEIGHT [[UIScreen mainScreen] bounds].

  • react native中的聊天气泡及timer封装成的发送验证码倒计时

    其实,今天我想把我近期遇到的坑都总结一下: 1.goBack的跨页面跳转,又两种方法,一可以像兔哥那样修改navigation源码,二可以用navigationActions 2.父子组件的传值,一可以用callBack  二可以用pubsub发布订阅模式 三可以用manager事件监听(a页面要显示的内容 有两种形式,一是从manager主动接收,也就是说不需要点击什么的获取数据,而是时时监听manager里数据的变化,第二种a页面获取要显示内容的形式是 点击出发,获取) 3 需要说的还是na

  • js封装成插件的步骤方法

    js封装成插件的步骤方法

    由于项目原因,工作一年多还没用js写过插件,项目太成熟,平时基本都是在使用已经封装好的功能插件.感觉自己好low......这两天想自己抽空写一个canvas画统计图与折现图的插件,所以就去网上学习了下如何封装.....虽然之前看了很多源码,但是感觉就算了解也是野路子..... 什么是封装呢? 我的理解就是 把一个功能单独做成一个组件,就像做饺子,以前做饺子必须自己先用面粉做饺子皮,再做饺子馅,然后再手工包饺子,但是现在人们发明了自动包饺子机器,虽然机器里面的每一步骤和你自己包饺子是一样的,但是

  • js封装成插件_Canvas统计图插件编写实例

    js封装成插件_Canvas统计图插件编写实例

    之前就说过,我想写一个canvas画统计图的插件,现在写好了 先说下实现的功能吧: 1.可以通过自定义X轴坐标属性和Y轴坐标属性按比例画出统计图 2.可以选择画折现图还是柱形统计图,或者两者都实现 3.可以自由定义折现颜色,坐标颜色,柱形图颜色 和canvas边框颜色,当然边框你也可以选择要或者不要 4.可以选择是否实现柱形图和折现图的动画实现 实现过程 画坐标--画箭头--做X轴和Y轴的标注--画柱形图--画折现图 话不多说,上代码 (function(window,document){ va

  • Python封装成可带参数的EXE安装包实例

    最近有一个小项目,有如下的需求: 将某几个源码文件夹进行打包,文件夹内有py文件.dll文件.exe文件等各种文件类型 打包生成的安装包,在进行安装的时候,应该能够带有参数,对配置文件进行修改配置 安装过程中,可以配置系统环境变量 能够检测环境,提示安装依赖包 整个过程要可以自动化,能够大量部署 综合考虑后,决定以下几个步骤完成: 用setup.py将源码文件夹都打包成msi安装包,这样可以使用msiexec进行静默安装 setup.py可以提示用户安装依赖包,否则安装失败 再编写一个py文件,

随机推荐