js 简单的滑动教程（二）

 
作者：Lellansin 转载请标明出处，谢谢
现在我们让滑动多一个功能，三张图、点击左边向左滑动，点右向右滑，碰到临界值的时候可以循环滑动
原理也很将简单，用position:absolute将定位设置成决定定位，通过改变图片相对于绝对位置的坐标来实现滑动。
<!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简单的滑动教程（2）</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>

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

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

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

            </ul>

        </div>

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

    </div>

    <div id="text" style="margin:0 auto;width:200px;">

    </div>

    <script>

        // 图片总数

        var total = 3;

        //当所有图片都显示的时候，所有图片的left都=0，这个时候最后一张图会叠最上面，所以计数器从最后一个开始计数

        var count = total-1;

        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.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_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++;

        }

    </script>

</body>

</html>

　　

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

  1. js 简单的滑动4

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

  2. js 简单的滑动3

    js 简单的滑动教程(三)   作者:Lellansin 转载请标明出处,谢谢 在前面的基础上(js 简单的滑动教程(二)),我们可以再添加一些功能使程序的可用性更高. 比如自动为图片的LI赋id值, ...

  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. 【2019】Charles视频教程，接口测试工具最新教程

    Charles 是在 windows/mac/linux下常用的网络封包截取工具,也是电商/直播/搜索/金融/H5/App等测试专用接口测试工具. Charles 支持Http/Https/Webso ...

  2. CTF RCE(远程代码执行)

    目录 php代码执行 一.相关函数 1.代码注入 2.命令执行 二.命令执行的绕过 1.命令执行的分隔符 2.空格代替 3.绕过 4.命令执行的各种符号 三.命令无回显的情况 1.判断 2.利用 四. ...

  3. 剑指offer：和为S的两个数字

    题目描述: 输入一个递增排序的数组和一个数字S,在数组中查找两个数,使得他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 输出描述: 对应每个测试案例,输出两个数,小的先输出. 思 ...

  4. java里的数组和list分别在什么情况下使用？

    数组长度固定,List未限定长度,且支持的功能更多,最常用的ArrayList底层实际上也是使用数组实现. 不需要复杂功能和确定长度的情况下,使用数组效率更高,通常情况建议使用List.

  5. asp.net core mvc 读取配置文件appsettings.json

    上一篇我们将了读取自定义配置文件.这篇我们讲一下asp.net core mvc里读取自带的配置文件 appsettings.json 首先创建个asp.net core mvc项目,项目里有Prog ...

  6. 【面试】c++单例模式

    1. 单例模式 #include <iostream> using namespace std; class CSingleton { private: CSingleton() {} / ...

  7. cmd 连接oracle

    第一步: sqlplus/nolog 第二步: conn  数据库名/密码@ip:端口/database: conn bill:/orcl 如果是连接不上. 报错信息为 Oracle ORA-0103 ...

  8. Android 调试桥介绍 (adb)

    Android 调试桥 adb ( Android Debug Bridge)是一个通用命令行工具,其允许您与模拟器实例或连接的 Android 设备进行通信.它可为各种设备操作提供便利,如安装和调试 ...

  9. 【linux基础err】NVIDIA-SMI has failed because it could't communicate with the NVIDIA driver.

    问题 安装nvidia driver和cuda关机重启之后出现不能进入系统的问题,进入命令行模式使用nvidia-smi检查驱动的问题. nvidia-smi NVIDIA-SMI has faile ...

  10. 如何使APP开机自启动

    方案一 将app做成系统应用,直接安装在 system/app 目录下 具体步骤为: 1.在AndroidManifest文件中,添加 android:sharedUserId="andro ...