js 简单的滑动教程（三）

 
作者：Lellansin 转载请标明出处，谢谢
    在前面的基础上（js 简单的滑动教程（二）），我们可以再添加一些功能使程序的可用性更高。
    比如自动为图片的LI赋id值，这样在写网页的时候，可以不用麻烦再一个个为LI去添加ID，让程序自动赋值这样在开发的过程中效率可以更高，可移植性也会更强。除此之外，在已经可以循环显示的情况下，我们还可以写个功能让它自动播放，这也是一个很常见的功能。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>

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

<title>js简单的滑动教程（三） - Lellansin</title>

<style type="text/css">

    *{    margin:0; padding:0; }

    li{    list-style: none; }

    #window{ height:200px; width:230px;    margin:0 auto; overflow:hidden; }

    #center_window{    height:200px; width:160px; float:left; }

    #center_window ul{ height:200px; width:160px; position:absolute; overflow:hidden }

    #center_window ul li{ height:200px; width:160px; float:left; position:absolute; }

    #center_window img{ display:block; margin:5px auto; }

    #left_arrow{ height:200px; width:35px; float:left; background:url("left.png") no-repeat scroll 5px 75px #fff; }

    #left_arrow:hover{ cursor: pointer; }

    #right_arrow{ height:200px; width: 35px; float:right; background:url("right.png") no-repeat scroll 0px 75px #fff; }

    #right_arrow:hover{ cursor: pointer; }

</style>

</head>

<body>

    <div id="window">

        <div id="left_arrow" onclick="sliderLeft()"></div>

        <div id="center_window">

            <ul id="list">

                <li><img src="img/1.jpg" /></li>

                <li><img src="img/2.jpg" /></li>

                <li><img src="img/3.jpg" /></li>

                <li><img src="img/1.jpg" /></li>

                <li><img src="img/2.jpg" /></li>

                <li><img src="img/3.jpg" /></li>

            </ul>

        </div>

        <div id="right_arrow" onclick="sliderRight()"></div>

    </div>

<script>

    // 图片总数

    var total;

    // 计数器

    var count;        

    window.onload = function ini(){

        // id名称计数器

        nameCount = 0;

        // 最后一个计数

        var last;

        // 获取列表的对象

        var temp = document.getElementById("list").childNodes;

        // 为列表内的LI赋上id的值

        for(var i=0;i<temp.length;i++){

            // 不是文本节点 且 是LI节点则执行

            if(temp[i].nodeName != "#text" && temp[i].nodeName == "LI"){

                // li的id赋值

                temp[i].id = "list_" + nameCount;

                // 将其隐藏

                temp[i].style.display = "none";

                // 已经找到的li计数

                nameCount++;

                // 最后一计数

                last = i;

            }

        }

        // 图片总数为已经找到的LI的总数

        total = nameCount;

        // 当前图片为最后一个图片

        count = total-1;

        // 当前图片设为显示

        temp[last].style.display = "";

        // 调用自动播放方法

        AutoPlay();

    }

    function sliderLeft(){

        // 拼出当前以及左右图片的id

        var left = "list_"+((count+total*100-1)%total);

        var center = "list_"+((count+total*100)%total);

        var right = "list_"+((count+total*100+1)%total);

        // 获取对象

        var pic_left = document.getElementById(left);

        var pic_center = document.getElementById(center);

        var pic_right = document.getElementById(right);

        // 向左滑，设置左边的图片显示

        pic_left.style.display = "";

        // 设置坐标

        pic_left.style.left = -160 + "px";

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

        pic_right.style.left = 160 + "px";

        var i=0;

        var timer = setInterval(function(){

            if(i<=160){

                //滑动

                pic_left.style.left = i-160 + "px";

                pic_center.style.left = i + "px";

                pic_right.style.left = i+160 + "px";

                i+=40;

            }else{

                clearInterval(timer);

            }

        },80);

        // 计数

        count--;

    }

    function sliderRight(){

        // 拼出id

        var left = "list_"+((count+total*100-1)%total);

        var center = "list_"+((count+total*100)%total);

        var right = "list_"+((count+total*100+1)%total);

        // 获取对象

        var pic_left = document.getElementById(left);

        var pic_center = document.getElementById(center);

        var pic_right = document.getElementById(right);

        // 向右滑，设置右边的图片显示

        pic_right.style.display = "";

        //设置坐标

        pic_left.style.left = -160 + "px";

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

        pic_right.style.left = 160 + "px";

        var i=160;

        var timer = setInterval(function(){

            if(i>=0){

                // 滑动

                pic_left.style.left = i - 320 + "px";

                pic_center.style.left = i - 160 + "px";

                pic_right.style.left = i + "px";

                i-=40;

            }else{

                clearInterval(timer);

            }

        },80);

        // 计数

        count++;

    }

    // 自动播放的计时器

    var autoplayTimer;

    function AutoPlay(){

        // 鼠标悬停时停止自动播放

        document.getElementById("list").onmouseover = function(){

            clearInterval(autoplayTimer);

        };

        // 鼠标移开后继续自动播放

        document.getElementById("list").onmouseout = function(){

            AutoPlay();

        };

        autoplayTimer = setInterval(function(){

            sliderRight();

        },2000);// 每隔两秒调用一次sliderRight()方法，使其自动向右播放

    }

    </script>

</body>

</html>

　　

js 简单的滑动3的更多相关文章

  1. js 简单的滑动4

    js 简单的滑动教程(四)   作者:Lellansin 转载请标明出处,谢谢 在大概的了解滑动的基本原理和怎么去实现之后,现在我们将更深入的去讨论js的滑动. 相信细心的朋友应该已经发现了,在本教程 ...

  2. js 简单的滑动2

    js 简单的滑动教程(二)   作者:Lellansin 转载请标明出处,谢谢 现在我们让滑动多一个功能,三张图.点击左边向左滑动,点右向右滑,碰到临界值的时候可以循环滑动 原理也很将简单,用posi ...

  3. js 简单的滑动1

    js 简单的滑动教程(一)   作者:Lellansin 转载请标明出处,谢谢 首先我们要实现一个简单的滑动,三张图.点击左边向左滑动,点右向右滑,碰到临界值的时候就不能滑动. 这个简单滑动的原理是, ...

  4. js实现图片滑动显示效果

    js实现图片滑动显示效果 今天用户提出一个需求,要实现一个滑动显示新闻列表的效果,具体就是图片新闻自动滑动显示,鼠标移上去就停止滑动,移开就继续滑动:效果如下: 第一:先用HTML和CSS实现显示,主 ...

  5. baguetteBox.js - 简单易用的 lightbox 插件

    baguetteBox.js 是一个简单和易于使用的响应式的图像 Lightbox 插件,支持滑动手势在移动设备上使用.纯 JavaScript 实现,不依赖第三方库和插件,赶紧来体验吧. 在线演示  ...

  6. js简单 图片版时钟，带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  7. js简单操作Cookie

    贴一段js简单操作Cookie的代码: //获取指定名称的cookie的值 function getCookie(objName) { var arrStr = document.cookie.spl ...

  8. js简单弹出层、遮罩层

    <html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...

  9. Tourist.js – 简单灵活的操作指南和导航插件

    Tourist.js 是一个基于 Backbone 和 jQuery 开发的轻量库,帮助你在应用程序创建简单易用的操作指南和导航功能.相比网站,它更适合用于复杂的,单页网站类型的应用程序.Touris ...

随机推荐

  1. 【0521模拟赛】小Z爱划水

    题目描述 小Z和其它机房同学都面临一个艰难的抉择,那就是 要不要划水? 每个人都有自己的一个意见,有的人想做题,有的人想划水. 当然,每个人只能选择一个事情做.如果一个人做的事情和他想做的不同,那么他 ...

  2. Js 之正则验证手机号、QQ、身份证等

    // 常见的 正则表达式 校验 // QQ号.手机号.Email.是否是数字.去掉前后空格.是否存在中文.邮编.身份证.URL.日期格式.IP let myRegExp = { // 检查字符串是否为 ...

  3. 大名鼎鼎的RPC和MQ到底有啥区别和联系

    RPC(Remote Procedure Call)远程过程调用,主要解决远程通信间的问题,不需要了解底层网络的通信机制. RPC框架 知名度较高的有Thrift(FB的).dubbo(阿里的). R ...

  4. 牛顿插值法（c++）

    X Y 0.40 0.41075 0.55 0.57815 0.65 0.69675 0.80 0.88811 0.90 1.02652 1.05 1.25382 #include using nam ...

  5. sprintf格式化字符串漏洞(转)

    深入解析sprintf格式化字符串漏洞 特征: 如何利用: 可以看到, php源码中只对15种类型做了匹配, 其他字符类型都直接break了,php未做任何处理,直接跳过,所以导致了这个问题: 没做字 ...

  6. ldap和phpldapadmin的安装部署

    LDAP 安装 一.安装LDAP 1. 安装包 yum install openssl-devel gcc libtool-ltdl-devel -y yum install openldap-ser ...

  7. 堆排序Heapsort的Java和C代码

    Heapsort排序思路 将整个数组看作一个二叉树heap, 下标0为堆顶层, 下标1, 2为次顶层, 然后每层就是"3,4,5,6", "7, 8, 9, 10, 11 ...

  8. uni-app打包程序 Hbuilder X 用自有证书 苹果证书打包 ios App、用DCloud公用证书打包Android APP

    Android用HBuilder的DCloud公用证书即可 HBuilderX  uni-app打包成apk安装到手机首先要登录,没有帐号可以注册,接着点击运行—原生App-云打包,配置完后点击打包, ...

  9. PAT 甲级 1076 Forwards on Weibo (30分)（bfs较简单）

    1076 Forwards on Weibo (30分)   Weibo is known as the Chinese version of Twitter. One user on Weibo m ...

  10. LODOP和C-LODOP注册与角色等简短问答【增强版】

    之前的简短问答:Lodop.c-lodop注册与角色简短问答.Lodop简短问答客户反馈篇 及排查步骤 及注册相关本文重新整理相关简短问答,调整问答顺序,增加相关的问答. 其他相关(非简短问答):LO ...