<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. 唯品会安卓版app分析

    .................................................................................................... ...

  2. VBoxManage.exe: error: Resize hard disk operation for this format is not implemented yet!

    VirtualBox虚拟磁盘空间不够了,默认10G.想扩大,图形界面下没有找到可操作菜单.Google了一下用 Vbox自带的命令工具VBoxManage即可解决. C:\Program Files\ ...

  3. 转：MVC分页

    原文地址:http://www.cnblogs.com/iamlilinfeng/p/4075292.html 分页总是搞得我很烦,也是因为刚接触,貌似有好多插件,之前在用一个,可是后来发现一翻页原来 ...

  4. Razor Generator 将cshtml自动生成对应的CS文件

  5. poj2242

                                                        The Circumference of the Circle Time Limit: 1000 ...

  6. 《Two Days DIV + CSS》读书笔记——CSS选择器

    1.1.2 CSS选择器 CSS 选择器最基本的有四种:标签选择器.ID 选择器.类选择器.通用选择器. [标签选择器] 一个完整的 HTML 页面由很多不同的标签组成,而标签选择器,则是决定哪些标签 ...

  7. 腾讯课堂-草图大师 Sketchup 初级到精通视频讲座

    腾讯课堂-草图大师 Sketchup 初级到精通视频讲座 草图大师 Sketchup 初级到精通视频讲座

  8. iOS AFNetworking 详解

    1. 很不错的介绍 http://m.blog.csdn.net/blog/jackljf/38736625

  9. 【转】vlc android 代码编译

    转自:http://blog.csdn.net/asircao/article/details/7734201 系统:ubuntu12.04代码:git://git.videolan.org/vlc- ...

  10. input里面check 状态检测

    if($("#check_status").attr('checked')) //检测checkbox状态 { //checked状态 }else { //不是checked状态 ...