<!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. fuse的write过程到底是怎么样的，128KB的buffer怎么用？

    1. 在fuse/lib/fuse_kern_chan.c中有一个buffer设置 #define MIN_BUFSIZE 0x21000 //十进制132×1024  //为何不是128? 下面有一 ...

  2. DP专辑之线性DP

    POJ1390 题目链接:http://poj.org/problem?id=1390 分类:记忆化搜索 dp[i][j][k] 表示,从i到j块且j后面有k块与第j块的颜色一样.dp[l][r][k ...

  3. UIAlterController 的使用

    相对于IOS8.4之后苹果对提示框做了进一步的封装,这将与之前的提示框有很大的同. 之前的 UIAlterView  是弹出一个提示框. 而今天学习的提示框是 通过视图控制器进行弹出,这就意味着,我们 ...

  4. 如何升级xcode 中的cocos2dx 到v2.2.2以上版本

    每次升级cocos2dx版本都觉得不知道怎么弄才行. 这次升级到v2.2.2版本又花了我不少时间.因此在这里分享一下,以后也有地方可以查询. 1. 到http://cocos2d-x.org/ 下载最 ...

  5. E20170510-hm

    prototype  n.     原型,雏形,蓝本; omit (omitted)  vt.     省略; 遗漏; autonomous  adj.     自治的; 有自主权的; fold   ...

  6. LuoguP2822 组合数问题(组合数，二维前缀和)

    P2822 组合数问题 输入输出样例 输入样例#1: 复制 1 2 3 3 输出样例#1: 复制 1 输入样例#2: 复制 2 5 4 5 6 7 输出样例#2: 复制 0 7 说明 [样例1说明] ...

  7. Django学习:模板继承和配置静态文件

    一.模板继承 目的是:减少代码的冗余 语法: {% block classinfo %} {% endblock %} 具体步骤: 1.创建一个base.html文件,2.把要显示的页面的内容写在这里 ...

  8. 易爆物（X-Plosives ）基础并查集

    #include <iostream> #include <algorithm> using namespace std; + ; int fa[maxn]; int Find ...

  9. iOS 上传的图片在HTML上显示时，图片方向信息(EXIF Orientation)异常

    将iPhone 6s拍摄的照片上传到服务器之后, 在Web网页上看到图片被逆时针旋转了90度, 这让我很惆怅呐! 出现这个问题其实是因为上传的图片为.jpg格式,.jpg文件含有EXIF信息, 其中E ...

  10. Qt 2D绘图之一：基本图形绘制和渐变填充

    Qt中提供了强大的2D绘图系统,可以使用相同的API在屏幕和绘图设备上进行绘制,它主要基于QPainter.QPaintDevice和QPaintEngine这三个类.它们三者的关系如下图所示: QP ...