// 列表布局，图片左浮动，外侧容器设置overflow:hidden;

// 组合使用构造函数模式(对象不共享的数据)和原型模式(对象共享的数据)

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="utf-8">

     <style type="text/css" media="screen">

         * { margin:0; padding:0; font-size: 14px;}

         .slider { width:550px; height:200px; margin:50px auto 0; overflow: hidden;}

         .slider ul { width:10000px; list-style:none; }

         .slider li { float: left; }

         .slider li img { width:550px; text-align: center;}

         #slider-nav { width:550px;  margin:30px auto; text-align: center;}

         #slider-nav button { height:34px; line-height: 34px; width:75px; text-align: center; cursor:pointer; margin:0 20px;}

     </style>

 </head>

 <body>

     <div class="slider">

         <ul>

             <li><img src="http://www.gbtags.com/gb/networks/uploads/afb73f09-8334-46b2-ad66-4abeb7c67a0a/images/gbtags1.jpg" alt="image"></li>

             <li><img src="http://www.gbtags.com/gb/networks/uploads/afb73f09-8334-46b2-ad66-4abeb7c67a0a/images/gbtags2.jpg" alt="image"></li>

             <li><img src="http://www.gbtags.com/gb/networks/uploads/afb73f09-8334-46b2-ad66-4abeb7c67a0a/images/gbtags3.jpg" alt="image"></li>

             <li><img src="http://www.gbtags.com/gb/networks/uploads/afb73f09-8334-46b2-ad66-4abeb7c67a0a/images/gbtags4.jpg" alt="image"></li>

         </ul>

     </div>

     <div id="slider-nav">

         <button data-direction="prev">&laquo;&nbsp;上一个</button><button data-direction="next">下一个&nbsp;&raquo;</button>

     </div>

 </body>

     <script src="http://cdn.gbtags.com/jquery/2.1.1/jquery.min.js"></script>

     <script>

     function Slider(container,nav){                             // 构造Slider()函数;

         this.container = container;                             // 定义一系列局部变量;

         this.nav = nav;

         this.imgs = this.container.find('img');

         this.imgWidth = this.imgs[0].width;

         this.imgsLen = this.imgs.length;

         this.current = 0;

     };

     Slider.prototype.transition = function(){                   // 使用prototype来定义transition()方法;

         this.container.animate({                                // 编写外包围容器(ul)的运动方向及运动长度;

             'margin-left':-(this.current*this.imgWidth)

         });

     };

     Slider.prototype.setCurrent = function(dir){                // 使用prototype来定义setCurrent()方法;

         var pos = this.current;

         pos += (~~(dir === 'next') || -1);                      // 使用"~~"进行类型转换,转换成数字类型; ~~true == 1; ~~false == 0;

         this.current = (pos < 0) ? this.imgsLen - 1 : pos % this.imgsLen;

         return pos;

     };

     $(function(){

         var container = $('.slider').children('ul'),            // 定义container变量的值;

             slider = new Slider(container, $('#slider-nav'));   // 实例化Slider()函数并传参;

         slider.nav.find('button').on('click',function(){        // 找到触发按钮并绑定事件;

             slider.setCurrent($(this).data('direction'));       // 调用setCurrent()函数并传入按钮的data-direction的值;

             slider.transition();                                // 调用transition()方法,使幻灯片运动;

         })

     });

     </script>

 </html>

JavaScript--水平幻灯片的更多相关文章

  1. Javascript水平提升

    1,学习js分几个阶段,没入门,入门初学者,中级水平,高级水平,ppt水平. 2,没入门的如何学习? 我当初是先学jquery,有css和html基础,有css基础看jq的语法很简单,就是选择符,jq ...

  2. 如何有效地提升JavaScript 水平？

    lyuehh 努力学习中.. 9 人赞同 简单的介绍一下, 不一定准确, 大家一起进步... (单词大小写什么的别计较....) 学习js主要是一下几个方面, js语言本身的知识, 和浏览器相关的知识 ...

  3. 如何衡量一个人的 JavaScript 水平？

    参考链接:https://blog.csdn.net/weixin_37615279/article/details/103658866

  4. JavaScript进阶之路（一）初学者的开始

    一:写在前面的问题和话 一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...

  5. 一款炫酷的幻灯片播放框架介绍（附demo及使用方法）

    废话不多说,先上demo(建议在chrome下打开 F键全屏 esc退出全屏): 我的demo-博客园简介 官网demo 更多demo 今天为大家介绍一款基于css3和JavaScript的幻灯片播放 ...

  6. javascript必知必会之prototype

    本博客所有内容采用 Creative Commons Licenses 许可使用. 引用本内容时,请保留 朱涛, 出处 ,并且 非商业 . 点击 RSS 进行订阅.(推荐使用 google reade ...

  7. 高性能JavaScript（1）

    ---------------------------------------------------------------------------------------------------- ...

  8. JavaScript入门学习书籍的阶段选择

    对于许多想学习 JavaScript 的朋友来说,无疑如何选择入门的书籍是他们最头疼的问题,或许也是他们一直畏惧,甚至放弃学习 JavaScript 的理由.在 JavaScript 方面,自己不是什 ...

  9. 提高你的javascript代码逼格系列之函数与数组

    不知道大家有没有一种感觉,那就是自己写的javascript代码虽然能完全解决工作上的需要,但是,一眼望去,too simple!!!简直就是一个傻子都能看懂的水平,于是,在工作之余,我开始去收集一些 ...

  10. JavaScript进阶之路 初学者的开始

    一:写在前面的问题和话 一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...

随机推荐

  1. 嵌入式FIFO核的调用

    本次设计源码下载地址:http://download.csdn.net/detail/noticeable/9915523 课程目标:学习调用quartus II 软件的FIFO(先进先出)IP核,并 ...

  2. 从MATLAB到FPGA 视频和图像处理——讲座学习小结（视频地址https://ww2.mathworks.cn/videos/from-matlab-to-fpga-video-and-image-processing-102492.html）

    1.HDLcoder产品介绍 图像处理分为两个部分: 这里主要讨论第一部分图像处理部分. 一般产品设计流程如下: 适用人群有以下两类: 这里先用一张slider来进行整体概括: 基于模型的设计的好处— ...

  3. Scala数组小结

    1.定长数组 定长数组:指长度不可变的数组Array. 第一种方式: 先声明一个数组,后初始化该数组: scala> val array = new Array[Double](5) array ...

  4. 在.NET Core中三种实现“可插拔”AOP编程方式（附源码）

    一看标题肯定会联想到使用动态编织的方式实现AOP编程,不过这不是作者本文讨论的重点. 本文讨论另外三种在netcore中可实现的方式,Filter(过滤器,严格意义上它算是AOP方式),Dynamic ...

  5. 宽字符wchar_t和窄字符char——putwchar、wprintf

    宽字符wchar_t 与 窄字符char 先说下窄字符char,这个大部分读者应该很清楚,char类型的变量占一个字节(byte)(也就是8个bit(比特)),能表示256个字符,那char的范围有两 ...

  6. javaweb中的乱码问题

    0.为什么需要编码,解码, 无论是图片,文档,声音,在网络IO,磁盘io中都是以字节流的方式存在及传递的,但是我们拿到字节流怎么解析呢?这句话就涉及了编码,解码两个过程,从字符数据转化为字节数据就是编 ...

  7. 软件包管理之rpm与yum

    软件包的安装和卸载时很平常的事,但在Linux上面却不简单..Linux的其中一个哲学就是一个程序只做一件事,并且做好.组合小程序来完成复杂的任务,这样做有很多好处,但是各个小程序之间往往会存在着复杂 ...

  8. Apache重写规则

    1..htaccess文件使用前提 .htaccess的主要作用就是实现url改写,也就是当浏览器通过url访问到服务器某个文件夹时,作为主人,我们可以来接待这个url,具体 地怎样接待它,就是此文件 ...

  9. Testing - 软件测试知识梳理 - 软件性能测试

    软件性能测试的基本概念 软件的性能是软件的一种非功能特性,它关注的不是软件是否能够完成特定的功能,而是软件在完成该功能时展示出来的及时性. 软件性能的指标 响应时间:是指系统对请求作出响应的时间,并且 ...

  10. tomcat-四种运行模式和三种部署模式（优化）

    四中运行模式如下: 1-bio: 传统的Java I/O操作,同步且阻塞IO. 2-nio: JDK1.4开始支持,同步阻塞或同步非阻塞IO 3-aio(nio.2): JDK7开始支持,异步非阻塞I ...