// 列表布局，图片左浮动，外侧容器设置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. MySQL常用内置变量

      MySQL用很多常用的内置变量,掌握这些内置变量后对于我们快速获取当前MySQL的配置有很大帮助,下面就来列举几个常用的变量. 查看当前MySQL版本号信息.show variables like ...

  2. 札记：Property动画

    简介 Android 3.0 (API level 11)引入了属性动画系统,它是一个完善的框架,可以用来对几乎任何对象进行动画.只需要指定要动画的对象属性,动画时长,属性值区间等,无论对像是否在屏幕 ...

  3. 深圳scala-meetup-20180902（1）- Monadic 编程风格

    刚完成了9月份深圳scala-meetup,趁刮台风有空,把我在meetup里的分享在这里发表一下.我这次的分享主要分三个主题:“Monadic编程风格“.”Future vs Task and Re ...

  4. Android精通教程-第一节Android入门简介

    前言 大家好,给大家带来Android精通教程-第一节Android入门简介的概述,希望你们喜欢 每日一句 If life were predictable it would cease to be ...

  5. 通过shell快速配置J2EE运行环境

    虽然可以通过已经配置好的docker镜像来快速运行相关环境, 但是 现实往往就是这么残酷+有钱很任性的时候 就是给出了一个装好系统的电脑让配置环境,每次的配置环境变量真的很烦 纯体力活 就简单的写个脚 ...

  6. Android 开发工具推荐

    简评: 自己过去在 Android 开发中发现的好工具,在这里分享给大家.: ) Library methods count 每一个 Android App 的开发中都会用到很多的库,这个工具能够让你 ...

  7. Python——破解极验滑动验证码

    极验滑动验证码 以上图片是最典型的要属于极验滑动认证了,极验官网:http://www.geetest.com/. 现在极验验证码已经更新到了 3.0 版本,截至 2017 年 7 月全球已有十六万家 ...

  8. Ocelot 使用

    官方文档:http://ocelot.readthedocs.io/en/latest/introduction/gettingstarted.html 新建两个Asp.net core API项目 ...

  9. MD5加密之提取文件的MD5特征码

    public static String encodeFile(String path) { try { MessageDigest digester = MessageDigest.getInsta ...

  10. Django集成Markdown编辑器【附源码】

    专注内容写作的你一定不要错过markdown 简单介绍 markdown是一种标记语言,通过简单的标记语法可以使普通的文本内容具有一定的格式,使用非常简单,学习成本极低 目前各大Blog平台都已支持m ...