<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title></title>

    </head>

    <body>

        <style>

            * {

                margin: 0;

                padding: 0;

            }

            li {

                float: left;

                list-style-type: none;

            }

            ul {

                z-index: 10;

                position: absolute;

                width: 2000px;

                height: 200px

            }

            .img_item {

                width: 200px;

                height: 200px;

            }

            div {

                left: 100px;

                top: 100px;

                position: absolute;

                width: 1000px;

                height: 200px;

                overflow: hidden;

            }

        </style>

        <input type="button" name="name" value="左" id="left" />

        <input type="button" name="name" value="右" id="right" />

        <div>

            <ul id="ul_box">

                <li>

                    <img src="a6189de972494360df2db2140db81e49.jpg" class="img_item" />

                </li>

                <li>

                    <img src="b4eee4a4f162745ebb5c0f676b1045ba.jpg" class="img_item" />

                </li>

                <li>

                    <img src="dcab10748c31dcfc75f4ba6a36a313fb.jpg" class="img_item" />

                </li>

                <li>

                    <img src="f38f0c784dbcb4080f03cf41ed0864b5.jpg" class="img_item" />

                </li>

                <li>

                    <img src="ffe27b977dfb30c1854ebc1fdf999c1e.jpg" class="img_item" />

                </li>

                <li>

                    <img src="a6189de972494360df2db2140db81e49.jpg" class="img_item" />

                </li>

                <li>

                    <img src="b4eee4a4f162745ebb5c0f676b1045ba.jpg" class="img_item" />

                </li>

                <li>

                    <img src="dcab10748c31dcfc75f4ba6a36a313fb.jpg" class="img_item" />

                </li>

                <li>

                    <img src="f38f0c784dbcb4080f03cf41ed0864b5.jpg" class="img_item" />

                </li>

                <li>

                    <img src="ffe27b977dfb30c1854ebc1fdf999c1e.jpg" class="img_item" />

                </li>

            </ul>

        </div>

        <script>

            var left_btn = document.getElementById("left");

            var right_btn = document.getElementById("right");

            var ul_box = document.getElementById("ul_box");

            var r = 1;

            left_btn.onclick = function() {

                r = 1;

            }

            right_btn.onclick = function() {

                r = -1;

            }

            function run() {

                ul_box.style.left = ul_box.offsetLeft + r + "px";

                if(ul_box.offsetLeft > 0) {

                    ul_box.style.left = -1000 + "px";

                }

                if(ul_box.offsetLeft < -1000) {

                    ul_box.style.left = 0 + "px";

                }

            }

            setInterval(run, 10);

        </script>

    </body>

</html>

js图片轮播效果常见的产品无缝轮播的更多相关文章

  1. js图片瀑布流效果

    要实现图片瀑布流效果,首先得准备几张图片. html的部分比较简单就是将图片加载到浏览器就可以了 代码如下(注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果): <!DOCTYPE ...

  2. 无缝轮播的案例 及css3无缝轮播案例

    无缝轮播的案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  3. js实现多行图片点击（自动）左右无缝轮播特效

    /*效果图*/ HTML:    <div class="scroll">       <div class="picbox">     ...

  4. js+css3实现多行图片点击（自动）左右无缝轮播特效

    /*效果图*/ HTML:    <div class="scroll">       <div class="picbox">     ...

  5. android实现3D Gallery 轮播效果，触摸时停止轮播

    1.轮播控件涉及到的两个类 CarouselViewPager.java public class CarouselViewPager extends ViewPager { @IntDef({RES ...

  6. JS图片灯箱(lightBox)效果基本原理和demo

    到年底了,项目不怎么忙,所以有空特地研究了下KISSY中源码JS灯箱效果,感觉代码比较简单,所以就按照他们的思路依赖于Jquery框架也封装了一个,特地分享给大家,以前经常看到网上很多这样的插件,感觉 ...

  7. js图片加载效果（延迟加载+瀑布流加载）

    概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...

  8. js图片放大境效果

    放大境效果如下图所示,当鼠标放到小图时,就会出现浅黄色的小块,而右边方框也出现了,并且右边方框的内容时根据浅黄色小块的内容变换而变换: 原理: 1,准备2张图,一大一小,如上图所示,小图的盒子div1 ...

  9. js图片跑马灯效果

    <style. type="text/css">body{margin:0px auto; padding:0px;}ul,li{margin:0px; padding ...

随机推荐

  1. python startswith和endswith

    startswith判断文本是否以某个或某几个字符开始; endswith判断文本是否以某个或某几个字符结束; text = 'Happy National Day!' print text.star ...

  2. 「LuoguP4047」 [JSOI2010]部落划分

    Description 聪聪研究发现,荒岛野人总是过着群居的生活,但是,并不是整个荒岛上的所有野人都属于同一个部落,野人们总是拉帮结派形成属于自己的部落,不同的部落之间则经常发生争斗.只是,这一切都成 ...

  3. 【SOUTH CENTRAL USA 1998】 eight

    [题目链接] 点击打开链接 [算法] 这是经典的八数码问题,据说此题不做人生不完整 这里笔者用的是双向广搜,由于细节较多,笔者花了3h才通过此题 [代码] #include <algorithm ...

  4. FINDSTR 命令使用详解

    Findstr 使用正则表达式搜索文件中的文本模式. 语法 findstr [/b] [/e] [/l] [/r] [/s] [/i] [/x] [/v] [/n] [/m] [/o] [/p] [/ ...

  5. Where Amazing Happens

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submission( ...

  6. Windows远程服务器不能复制粘贴

    操作步骤: 在服务器上打开任务管理器,查看进程,有 rdpclip.exe 进程,关闭此进程: 然后 开始->运行->rdpclip.exe 重新运行此程序,恢复正常.

  7. 任务17：从UML角度来理解依赖

    什么是依赖 如果我们用EF操作数据库. 那么CustomerController就对Context形成了依赖. 我们这种依赖的写法就是隐式的依赖 显式依赖于隐式依赖 怎么理解隐式的依赖呢? 三层架构是 ...

  8. 开源一个基于dotnet standard的轻量级的ORM框架-Light.Data

    还在dotnet framework 2.0的时代,当时还没有EF,而NHibernate之类的又太复杂,并且自己也有一些特殊需求,如查询结果直接入表.水平分表和新增数据默认值等,就试着折腾个轻量点O ...

  9. HDOJ1584蜘蛛牌【DFS】

    10张牌,大的只能跟小的跑,可以针对每一个状态进行搜索,求一个最小的移动距离. 但是不会怎么遍历整个状态是硬伤? 因为只能大的跟着小的. 先把小的标记,去寻找大的点,最终一定是满足的吧. 比如先标记1 ...

  10. bzoj 4550: 小奇的博弈【博弈论+dp】

    首先看出终止状态是全都堆在左边或者右边,然后发现黑的向左白的向右是最优策略(如果不能这样了也就该输了) 然后就不会了 参考 http://www.cnblogs.com/CQzhangyu/p/770 ...