<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. LODS LODSB LODSW LODSD 例子【载入串指令】

    http://qwop.iteye.com/blog/1958761 // lodsb.cpp : Defines the entry point for the console applicatio ...

  2. wordpress显示多个分类的文章

    显示多个分类下的文章可以这样提取: <?php query_posts(array('posts_per_page'=>10,'orderby'=>'rand','category_ ...

  3. ps存jpeg，格式保存的时候为什么选择“基线”

    jpeg是印前和网页设计常用的格式,最大好处就是能很大程度上压缩图像大小. 在ps中将图片保存为jpeg格式的时候会出现以下选项: 其中:图像选项都很熟悉,是关于图像质量的:而格式选项的用途主要是针对 ...

  4. KMP算法总♂结

    讲KM♂P算法之前,我们先讲一个故♂事. 有一天,sgg给了老obo一封信和一个单词,并给他一个任务:找出这封信出现了多少个单词,然后在规定时间内告诉他. 碰到这个问题,老obo会怎么做呢? 首先最直 ...

  5. LeetCode_String to Integer (atoi)

    Implement atoi to convert a string to an integer. int atoi (const char * str); Convert string to int ...

  6. 一些80C51单片机支持双DPTR，C编译器是如何使用它的？

    在C51中,C编译器并不利用双DPTR来优化用户所写的程序,只有一些库例程使用了双数据指针.当在两个存储器块之间进行数据复制或比较时,以下库例程会使用双数据指针: memmovememcpymemcm ...

  7. Python 的开发环境

    建议在Windows 下开发,成本低廉,简单,效率高. 综合下:开发的程序,Python  Django (Mysql,PostgreSQL) Nginx Redis ,这一组组合可以适应不同的平台, ...

  8. 关于Yeoman使用的总结

    Yeoman由三部分组成 Yo 用于项目构建. Grunt 用于项目管理,任务制定. Bower 用于项目依赖管理. 经过一段时间的使用,对这些东西有了一些个人总结: 总体上说这些内容学习曲线略高,不 ...

  9. C/C++内存存储问题

    #include <stdio.h> #include "string.h" #include "malloc.h" void Swap(int a ...

  10. poj 2411 Mondriaan's Dream_状态压缩dp

    题意:给我们1*2的骨牌,问我们一个n*m的棋盘有多少种放满的方案. 思路: 状态压缩不懂看,http://blog.csdn.net/neng18/article/details/18425765 ...