<html>

<head>

<title>Js图片无缝滚动</title>

<style type="text/css">

body{

    background:gray;

}

#wrap{

    width:810px;

    height:200px;

    border:1px solid black;

    position:relative;

    left:50%;

    top:50%;

    margin-left:-410px;

    margin-top:-250px;

    background:#F5E0E3;

    overflow:hidden;

}

#wrap ul{

    margin:0px;

    padding:0px;

    position:absolute;

    top:0px;

    left:0px;

}

#wrap ul li{

    list-style:none;

    float:left;

    margin:5px 10px;

}

#wrap ul li img{

    width:250px;

    height:180px;

    cursor:pointer;

}

.direction{

    width:104px;

    margin:50px auto;

}

.direction img{

    border:1px dotted pink;

    cursor:pointer;

}

.active{

    border:2px solid gray;

}

</style>

<script type="text/javascript">

window.onload = function(){

    var ul = document.getElementById("wrap").getElementsByTagName("ul")[0];

    var lis = ul.getElementsByTagName("li");

    var btn1 = document.getElementById("button1");

    var btn2 = document.getElementById("button2");

    var imgs = ul.getElementsByTagName("img");

    var speed = 3;

    var time = null;

    ul.innerHTML += ul.innerHTML;

    ul.style.width = (lis[0].offsetWidth+20)*lis.length + "px";

    time = setInterval(function(){

        ul.style.left = ul.offsetLeft - speed + "px";

        if(ul.offsetLeft <= -ul.offsetWidth/2){

            ul.style.left ="0px";

        }else if(ul.offsetLeft >=0){

            ul.style.left = -ul.offsetWidth/2 + "px";

        }

    },30);

    btn1.onmouseover = function(){

        speed = 3;

    }

    btn2.onmouseover = function(){

        speed = -3;

        }

    for(var i in imgs){

        imgs[i].onmouseover = function(){

            clearInterval(time);

            for(var i = 0;i<imgs.length;i++){

                    imgs[i].className = "none";

                }

            this.className = "active";

        }

        imgs[i].onmouseout = function(){

            time = setInterval(function(){

                ul.style.left = ul.offsetLeft - speed + "px";

                if(ul.offsetLeft <= -ul.offsetWidth/2){

                    ul.style.left ="0px";

                }else if(ul.offsetLeft >=0){

                    ul.style.left = -ul.offsetWidth/2 + "px";

                }

            },30);

            for(var i = 0;i<imgs.length;i++){

                imgs[i].className = "none";

            }

        }

    }

}

</script>

</head>

<body>

    <div class="direction"><img src="/jscss/demoimg/201204/left.png" alt="" id="button1"/><img src="/jscss/demoimg/201204/right.png" alt="" id="button2"/></div>

    <div id="wrap">

        <ul>

            <li><img src="/jscss/demoimg/wall1.jpg" alt="pic one" /></li>

            <li><img src="/jscss/demoimg/wall2.jpg" alt="pic two" /></li>

            <li><img src="/jscss/demoimg/wall3.jpg" alt="pic three" /></li>

            <li><img src="/jscss/demoimg/wall4.jpg" alt="pic four" /></li>

        </ul>

    </div>

</body>

</html>

js 图片无缝循环的更多相关文章

  1. js实现图片无缝循环跑马灯

    html 代码 <div class="myls-out-div" style="overflow: hidden;"> <ul id=&qu ...

  2. js图片无缝滚动代码

    想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一 ...

  3. js实现无缝循环滚动

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. js 图片无缝滚动

    html部分 <div id="roll"> <a href="javascript:void(0)" class="prev&qu ...

  5. js 图片自动循环切换setInterval();

    stlye样式定义 <style type="text/css">             body{background-image: url(img/001.jpg ...

  6. CSS和jQuery分别实现图片无缝滚动效果

    一.效果图 二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  7. jQuery图片无缝滚动JS代码ul/li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 图片滚动js 实现图片无缝滚动

    在改章节中,我们主要介绍图片滚动的内容,自我感觉有个不错的建议和大家分享下 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据 ...

  9. JavaScript学习笔记——简单无缝循环滚动展示图片的实现

    今天做了一个简单的无缝循环滚动的实例,这种实例在网页中其实还挺常见的,下面分享一下我的学习收获. 首先,无缝滚动的第一个重点就是——动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScri ...

随机推荐

  1. [Codeforces Round #247 (Div. 2)] A. Black Square

    A. Black Square time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  2. sizeof与类，继承，virtual的种种

    对虚继承层次的对象的内存布局,在不同编译器实现有所区别. 首先,说说GCC的编译器. 它实现比较简单,不管是否虚继承,GCC都是将虚表指针在整个继承关系中共享的,不共享的是指向虚基类的指针. clas ...

  3. Delphi 实现任务栏多窗口图标显示（使用WS_EX_APPWINDOW风格）

    uses Windows;type TfrmLogin = class(TForm) end; implementation {$R *.dfm} procedure TfrmLogin.FormCr ...

  4. C/C++ 指针的非空判断

    一定要分得清楚C和C++的“空指针常量”不是一样的.C标准不保证NULL等于0,所以做指针非空判断时,应该用if(p != NULL):因为“上下文转换到bool值”的统一性,C++就应该用if(p) ...

  5. 六款主流免费网络嗅探软件wireshark,tcpdump,dsniff,Ettercap,NetStumbler

    1.WireShark WireShark是一个开源免费的高性能网络协议分析软件,它的前身就是非常著名的网络分析软 件Ethereal.你可以使用它来解决网络疑难问题,进行网络协议分析,以及作为软件或 ...

  6. C# 知识点收集

    1. 数组复制 byte[] source; byte[] dest; int srcOffset = 0; int dstOffset = 0; int count = 10; System.Buf ...

  7. 【BBST 之伸展树 (Splay Tree)】

    最近“hiho一下”出了平衡树专题,这周的Splay一直出现RE,应该删除操作指针没处理好,还没找出原因. 不过其他操作运行正常,尝试用它写了一道之前用set做的平衡树的题http://codefor ...

  8. 【POJ2739】Sum of Consecutive Prime Numbers

    简单的素数打表,然后枚举.开始没注意n读到0结束,TLE了回..下次再认真点.A过后讨论里面有个暴力打表过的,给跪了! #include <iostream> #include <c ...

  9. Linux2.6内核 -- 编码风格（3）

          9.typedef     内核开发者们强烈反对使用 typedef 语句.他们的理由是:     1> typedef 掩盖了数据的真实类型     2> 由于数据类型隐藏起 ...

  10. proxy 利用get拦截，实现一个生成各种DOM节点的通用函数dom。

    const dom = new Proxy({}, { get(target, property) { return function(attrs = {}, ...children) { const ...