<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. smarty模板执行原理

    为了实现程序的业务逻辑和内容表现页面的分离从而提高开发速度,php 引入了模板引擎的概念,php 模板引擎里面最流行的可以说是smarty了,smarty因其功能强大而且速度快而被广大php web开 ...

  2. Linux下core文件产生的一些注意问题

    前面转载了一篇文章关于core文件的产生和调试使用的设置,但在使用有一些需要注意的问题,如 在什么情况 才会正确地产生core文件. 列出一些常见问题: 一,如何使用core文件 1. 使用core文 ...

  3. Django学习笔记（精简版）

    dos:安装:python setup.py install 环境变量:D:\Python27;D:\Python27\Lib\site-packages\django\bin; 转到创建的目录:dj ...

  4. Hdu3436-Queue-jumpers(伸展树)

    Description Ponyo and Garfield are waiting outside the box-office for their favorite movie. Because ...

  5. softlayer virtual machine vhd磁盘镜像导入shell脚本

    脚本

  6. ECMAScript 6新特性介绍

    箭头函数 箭头函数使用=>语法来简化函数.在语句结构上和C#.Java 8 和 CoffeeScript相似,支持表达式和函数体. . =>`操作符左边为输入的參数.而右边则是进行的操作以 ...

  7. css-文本及其他

    <!DOCTYPE html>css7-文本和其他 text-align行内元素对齐方式,值为 左/中/右 对齐:left/right/center.test{text-align:cen ...

  8. django中的Model模型一：

    在django的框架设计中采用了mtv模型,即Model,template,viewer Model相对于传统的三层或者mvc框架来说就相当对数据处理层,它主要负责与数据的交互,在使用django框架 ...

  9. Response.ContentType 详细列表 (转载)

    不同的ContentType 会影响客户端所看到的效果.默认的ContentType为 text/html 也就是网页格式.代码如: <% response.ContentType =" ...

  10. UIProgressView 圆角

    里面外面都变成圆角 不用图片 直接改变layer 重点是里面外面都是圆角哦 for (UIImageView * imageview in self.progress.subviews) { imag ...