js 简单的滑动教程（一）

 
作者：Lellansin 转载请标明出处，谢谢
首先我们要实现一个简单的滑动，三张图、点击左边向左滑动，点右向右滑，碰到临界值的时候就不能滑动。
这个简单滑动的原理是，通过改变边距来达到移动图片的效果，比如向右滑动的时候，让左边li的左边距不断减小来移动图片，而右边的li（向左浮动）会自动靠过来，等到图片移出center_window之后，再设置左边li的display为none使其隐藏。在时间恰当好的情况下，看起来就好像是当前的图片向左滑动，而右边的图片滑了过来。
要实现这一功能并不难，我们首先需要把静态页面准备好。
<div id="window">

        <div id="left_arrow"></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"></div>

    </div>

　　整体一个window，里面包含三个部分，分别是向左和向右的箭头，以及中间的显示列表。

<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:600px; }

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

    #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>

　　以上是css部分，我们将显示的图片宽高需在160px和200px以内。

<script>

        //全局计数器

        var count = 0; 

        function sliderLeft(){

            if(count>0){

                count--;

            }

            //获取当前要操作的li

            var pic = document.getElementById("list_"+count);

            //若上一个li已经被隐藏，表示已经到了第一个li

            if(!(pic.style.display == "none")){

                return;

            }

            //显示li

            pic.style.display = "";

            var i=250;

            var timer = setInterval(function(){

                if(i<251){

                    //通过改变边距来滑动

                    pic.style.margin = "0 0 0 -"+ i +"px";

                    i-=50;

                }else{

                    // 清楚计时器

                    clearInterval(timer);

                }

            },80);

            //80为每80微秒执行一次,通过这个执行间隔与上方每次减少的像素来控制滑动的速度

        }

        function sliderRight(){

            if(count<2){

                count++;

            }

            /** count-1 是为了让计数器计到当前的li,

            /* 否则计数器未计到当前的li,会导致向左滑动时向左多减一个

            **/

            var pic = document.getElementById("list_"+(count-1));

            var i=0;

            var timer1 = setInterval(function(){

                if(i<251){

                    pic.style.margin = "0 0 0 -"+ i +"px";

                    i+=50;

                }else{

                    // 滑出边界后使其隐藏

                    pic.style.display = "none";

                    clearInterval(timer1);

                }

            },80);

        }

    </script>

　　简单的js已经出现，具体已经有注释，注意getElementById的时候里面的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滑动</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:600px; }

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

    #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>

    <script>

        var count = 0;

        function sliderLeft(){

            if(count>0){

                count--;

            }

            var pic = document.getElementById("list_"+count);

            if(!(pic.style.display == "none")){

                return;

            }

            pic.style.display = "";

            var i=250;

            var timer = setInterval(function(){

                if(i<251){

                    pic.style.margin = "0 0 0 -"+ i +"px";

                    i-=50;

                }else{

                    clearInterval(timer);

                }

            },80);

        }

        function sliderRight(){

            if(count<2){

                count++;

            }

            var pic = document.getElementById("list_"+(count-1));

            var i=0;

            var timer1 = setInterval(function(){

                if(i<251){

                    pic.style.margin = "0 0 0 -"+ i +"px";

                    i+=50;

                }else{

                    pic.style.display = "none";

                    clearInterval(timer1);

                }

            },80);

        }

    </script>

</body>

</html>

　　

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

  1. js 简单的滑动4

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

  2. js 简单的滑动3

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

  3. js 简单的滑动2

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

  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. hbase 整合ranger

    一.安装hbase插件 1.解压安装插件 从target目录下拷贝ranger-2.1.0-SNAPSHOT-hbase-plugin.tar.gz到hbase集群,你的这个包的版本可能跟我不一致. ...

  2. SDN初体验（软件定义网络实验一）

    作业说明 本次实验步骤2.3是在机房环境下完成的,步骤1.4是在自己笔记本上重新配置完成的,所以环境.用户名什么的会略有差别. 1. 安装轻量级网络仿真工具Mininet 为了节约课程时间,实验室机房 ...

  3. 【2019.12.04】SDN上机第6次作业

    实验拓扑 通过图形化界面建立拓扑 先清除网络拓扑 sudo mn -c 生成Python语句 #!/usr/bin/python from mininet.net import Mininet fro ...

  4. 2019 SDN第3次上机作业

    0.报文类型与含义 1.Controller-to-Switch 报文 ​ Cortoller-to-Switch是由控制器初始化并下发给交换机的报文类型,其可能会要求交换机回复对应的报文,此类型报文 ...

  5. Java-JUC（十四）：SimpleDateFormat是线程不安全的

    SimpleDateFormat是Java提供的一个格式化和解析日期的工具类,日常开发中应该经常会用到,但是由于它是线程不安全的,多线程公用一个SimpleDateFormat实例对日期进行解析.格式 ...

  6. excel打开csv 出现乱码

    现在做舆情分析的相关项目,在数据处理的时候,发现了一个问题.将数据写入到csv文件,用excel打开(默认)就会出现乱码,如果将数据写入到.xlsx文件就不会出现乱码,因为csv是通用格式,所以我猜想 ...

  7. kubernetes-subpath用法（把文件挂载在已存在的目录下，不覆盖原目录）

    以ngxin的配置文件为例子: nginx-deployment.yaml : apiVersion: v1 kind: ConfigMap metadata: name: nginx-cm data ...

  8. 【Python学习之九】模块

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 python3.6 一.模块的使用和安装模块和C语言中的头文件以及Ja ...

  9. 【CUDA开发】 Check failed: error == cudaSuccess (8 vs. 0) invalid device function

    最近在复现R-CNN一系列的实验时,配置代码环境真是花费了不少时间.由于对MATLAB不熟悉,实验采用的都是github上rbg大神的Python版本.在配置Faster R-CNN时,编译没有问题, ...

  10. java8新特性：对map集合排序

    一.简单介绍Map 在讲解Map排序之前,我们先来稍微了解下map,map是键值对的集合接口,它的实现类主要包括:HashMap, TreeMap, Hashtable以及LinkedHashMap等 ...