// 列表布局，图片左浮动，外侧容器设置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. HPS基本概念及其设计

    DE1-SOC开发版上的FPGA在一个基于ARM的用户定制系统(SOC)中集成了分立处理器(HPS).FPGA和数字信号处理(DSP)功能.HPS是基于ARM cortex-A9双核处理器,具有丰富的 ...

  2. bootstrap的化妆页面

    Glyphicons 字体图标 所有可用的图标 包括260个来自 Glyphicon Halflings 的字体图标.Glyphi cons Halflings 一般是收费的,但是他们的作者允许 Bo ...

  3. open：在终端打开文件|应用程序等

    1. 需求&解决方案 打开文件 或url(用默认应用程序): $ open fileName 打开文件 或url(用指定应用程序): $ open -a appName fileName ## ...

  4. 【leetcode】 算法题2 两数相加

      问题      给定两个非空链表来表示两个非负整数.位数按照逆序方式存储,它们的每个节点只存储单个数字.将两数相加返回一个新的链表. 你可以假设除了数字 0 之外,这两个数字都不会以零开头. 示例 ...

  5. Postgres通用翻页函数

    CREATE OR REPLACE FUNCTION fun_turnpage( PageSize INT, PageIndex INT, FldSort VARCHAR, StrCondition ...

  6. 使用tinymce富文本

    1.tinymce入门参考 https://www.tiny.cloud/docs/general-configuration-guide/basic-setup/ 2.tinymce安装选项 htt ...

  7. Javascript高级编程学习笔记（5）—— JS操作符

    话不多说,开始今天的码字之旅. 突然有种日更小说的感觉,emm... 操作符 ECMAScript(JS核心)描述了一组用于操作数据值的操作符,也包括算术操作符等等 而JS中这些操作符最鲜明的特点就是 ...

  8. 微信小程序如何套用iconfont

    前言 如果你在开发微信时,没有图标的话,可以到http://www.iconfont.cn/ 官方下使用图标,那么我们去使用一些吧,到官方网址下点击使用~ 下载代码即可使用,看看下载的文件吧. 如图可 ...

  9. PHP错误处理函数register_shutdown_function

    当程序在线上运行时,如果遇到BUG,想不在前端输出错误信息,同时能及时邮件通知开发者,register_shutdown_function函数就可以派上用场了. 注册一个会在脚本执行完成或者 exit ...

  10. Tools - Windows OS

    001 - 文本操作 Ctrl + C / Ctrl + V / Ctrl + X / Ctrl + Z / Ctrl + A:复制/粘贴/剪贴/撤销/全选. 002 - 窗口分屏 使用快捷键 选中程 ...