<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. C语言读写伯克利DB 4

    因为缓存数据的buffer总是不够大(会引起段错误)索性从堆上拿了两块大内存 /* 功能说明:逐日存储来访用户(使用伯克利DB) 根据存储的用户信息确定某用户是否是首次来访用户(未被存储的伯克利DB) ...

  2. Ceph的Block分析

    一个块是一个连续的字节序列(例如一个512字节的连续数据是一个块).基于块的存储接口通常是旋转介质,例如磁盘.光盘.软盘等.块设备接口的普及使得可以用虚拟的块设备成为和大容量数据存储系统交互的接口,如 ...

  3. 开心学习系列学习笔记－－－－－nodejs缺点

    不支持故障恢复   不知你是否在调试的过程中注意,当程序有错误发生时,整个进程就会结束,需要重  新在终端中启动服务器.这一点在开发中无可厚非,但在产品环境下就是严重的问题  了,因为一旦用户访问时触 ...

  4. cf C. Quiz

    http://codeforces.com/contest/337/problem/C 得到的分数为:(2^1+2^2+...+2^X)*k + m-X*k = (2^(X+1)-2)*k + m-X ...

  5. jQuery对象与DOM对象的互相转换

    jQuery对象转换成DOM对象jQuery提供了两种方法将一个jQuery对象转换成DOM对象,即[index]和get(index).1.jQuery对象是一个数组对象,可以通过[index]的方 ...

  6. Unix,windows和Mac中的换行

    Unix 系统里,每行结尾只有“<换行>”,即“\n”:Windows系统里面,每行结尾是“<换行><回车 >”,即“\r\n”:Mac系统里,每行结尾是“< ...

  7. JAVA Stack栈和Heap堆的区别(转)

          首先分清楚Stack,Heap的中文翻译:Stack—栈,Heap—堆.         在中文里,Stack可以翻译为“堆栈”,所以我直接查找了计算机术语里面堆和栈开头的词语:      ...

  8. back_insert_iterator和iterator用起来不一样。

    先看代码: #include<iostream> #include<vector> #include<algorithm> #include<iterator ...

  9. 如何在程序中调用Caffe做图像分类

    Caffe是目前深度学习比较优秀好用的一个开源库,采样c++和CUDA实现,具有速度快,模型定义方便等优点.学习了几天过后,发现也有一个不方便的地方,就是在我的程序中调用Caffe做图像分类没有直接的 ...

  10. [转载]C宏定义的小结

    FROM:http://blog.csdn.net/sunboy_2050/article/details/6103530 实现代码实例 程序代码: #include <stdio.h> ...