<!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. fastText(三)：微博短文本下fastText的应用（二）

    上一篇讲到,fastText在训练数据中过拟合的问题.接下来将介绍一些提高fastText泛化能力的尝试. 模型泛化使用过fastText的人,往往会被它的很多特性征服,例如训练速度.兼具word e ...

  2. ImportError: No module named 'httplib'

    原因:Python 2.x中的"httplib"模块在Python 3.x中变成了"http.client" 原代码: import httplib impor ...

  3. Codechef SUMCUBE

    SUMCUBE code 给定无向简单图 G = (V, E)(即不存在自环和重边),以及 k = 1, 2, 或3 .求$$ \sum_{S \subseteq V} f(S)^k, $$其中 $f ...

  4. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 09. Model验证

    数据注解 这样前后就会有div把这个inoput给包起来 添加一个Label使用TagHelper也有只能提示 出现的效果是这样的,实际上是把model的属性名打印出来.了. 把其他几个label也添 ...

  5. Android中shape的使用 （转载）

    转自:http://blog.csdn.net/ekeuy/article/details/12349853 在看很多开源代码中都使用到了shape,我看代码的时候一般都一带而过了,没有仔细去研究,这 ...

  6. poj3069【贪心，水】

    妈蛋,题意看错-看了挑战时被标记的点还是给出的点,瞎搞了半个多小时... = =都想气的扔进水题系列了 #include <iostream> #include <cstdio> ...

  7. POJ2105【进制转化】

    直接瞎写就可以水过.我记得STL有很多好的函数,哎.水过去补多校的题. //#include <bits/stdc++.h> #include<cstdio> #include ...

  8. HDOJ2955 0/1背包的价值和重量

    [hdoj2955] 1.概率问题: 计算逃跑率,但是要变成相×的 2.背包处理问题 然后因为率不能作为那个重量,所以价值作为重量,求一个在每个价值下的最大的逃跑率,然后在给定的逃跑率下面,来一个su ...

  9. 暴力 BestCoder Round #41 1001 ZCC loves straight flush

    题目传送门 /* m数组记录出现的花色和数值,按照数值每5个搜索,看看有几个已满足,剩下 5 - cnt需要替换 ╰· */ #include <cstdio> #include < ...

  10. 解题报告：hdu 3572 Task Schedule（当前弧优化Dinic算法）

    Problem Description Our geometry princess XMM has stoped her study in computational geometry to conc ...