<!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. 一步一步学Silverlight 2系列（21）：如何在Silverlight中调用JavaScript

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  2. hdu-5720 Wool(区间并+扫描线)

    题目链接: Wool Time Limit: 8000/4000 MS (Java/Others)     Memory Limit: 262144/262144 K (Java/Others) Pr ...

  3. I.MX6 wpa_supplicant_8 编译问题

    /************************************************************************ * I.MX6 wpa_supplicant_8 编 ...

  4. bzoj1911 [Apio2010]特别行动队——斜率优化DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1911 相当明显的斜率优化,很好做: 注意slp里面要有(double),以免出现精度问题. ...

  5. 微信小程序服务类目大坑：特殊行业服务类目所需资质材料

    作为一个技术开发人员,遇到特殊行业服务类目所需资质材料,只能叫苦连天了,妈的,这个不是技术可以解决的问题,如果技术可以解决的问题都不是问题. 百牛信息技术bainiu.ltd整理发布于博客园 特殊行业 ...

  6. Codechef SEPT17

    Codechef SEPT17 比赛链接:https://www.codechef.com/SEPT17 CHEFSUM code给定数组 a[1..n] ,求最小的下标 i ,使得 prefixsu ...

  7. hibernate的基础学习--一对一关联

    一对一关系以丈夫和妻子模型 配置文件 妻子配置文件: <?xml version="1.0" encoding="utf-8" ?> <!DO ...

  8. html5盒子模型

    相关博客: Flex 布局教程:语法篇:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex 布局教程:实例篇:http://ww ...

  9. GCC在C语言中内嵌汇编 asm __volatile__

    2012-11-26 22:20 17958人阅读 评论(2) 收藏 举报  分类: linux(59)  架构管理(24)  C/C++(59)  目录(?)[+] 在内嵌汇编中,可以将C语言表达式 ...

  10. mysql数据库基本操作（五）

    表纪录之查(单表查询)2 上一篇讲了4类查询的方式,现在接着上一篇继续看还有哪些方式. group by 分组查询 顾名思义,分组查询要分组,因为mysql5.7之后默认不支持group by语句,需 ...