<!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. hdu 4544 湫湫系列故事——消灭兔子（优先队列）

    题意:n只兔子(有血量),m只箭(有伤害.花费),每只兔子只能被射一次,求射死所有兔子的最少花费. 思路:贪心,2重循环,兔子从血量高到低,箭从伤害高到低,用能射死兔子的箭中花费最小的箭射. #inc ...

  2. sid, pid, gid

    (一) 参考 :https://unix.stackexchange.com/questions/18166/what-are-session-leaders-in-ps 命令: ps xao pid ...

  3. 默认action和ActionSupport

    默认action: <action></action>中的name属性值与<default-action-ref></default-action-ref&g ...

  4. C++ 指针p1 p2，p1-p2 与*p1-*p2的区别

    p1-p2 指 指针的地址值相减,计算两个指针之间的偏移量 *p1-*p2 指 指针指向的内存地址里面存的数值相减

  5. Docker容器日志管理最佳实践

    目录 一 .Docker 引擎日志 二.容器日志 2.1.常用查看日志命令--docker logs 2.2 .Docker 日志 驱动 三. 生产环境中该如何储存容器中的日志 一.当是完全是标准输出 ...

  6. [置顶] 一位ACMer过来人的心得

    刻苦的训练我打算最后稍微提一下.主要说后者:什么是有效地训练? 我想说下我的理解.        很多ACMer入门的时候,都被告知:要多做题,做个500多道就变牛了.其实,这既不是充分条件.也不会是 ...

  7. bzoj 4145: [AMPPZ2014]The Prices【状压dp】

    设f[s][i]为已经买了集合s,当前在商店i,转移的话就是枚举新买的物品,两种情况,一种是在原商店买,不用付路费,另一种是从其他商店过来,这种再枚举从那个商店过来是不行的,记一个mn[s]为已经买了 ...

  8. 洛谷P3577 [POI2014]TUR-Tourism

    给定一个n个点,m条边的无向图,其中你在第i个点建立旅游站点的费用为Ci.在这张图中,任意两点间不存在节点数超过10的简单路径.请找到一种费用最小的建立旅游站点的方案,使得每个点要么建立了旅游站点,要 ...

  9. Nginx系列篇二：linux搭建Nginx负载均衡

    建议先搭建好Nginx环境 可阅读--->Linux中搭建Nginx 1.准备好三台服务器[标配] 一.nginx负载均衡服务器:192.168.102.110,配置好Nginx 二.tomca ...

  10. 在MacOs上安装sqlsrv Mojave - 找不到'php.h'文件

    Mojave没有安装标头. 要安装标头: open /Library/Developer/CommandLineTools/Packages/macOS_SDK_headers_for_macOS_1 ...