// 列表布局，图片左浮动，外侧容器设置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. 从MATLAB到FPGA 视频和图像处理——讲座学习小结（视频地址https://ww2.mathworks.cn/videos/from-matlab-to-fpga-video-and-image-processing-102492.html）

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

  2. Spring AOP的实现及源码解析

    在介绍AOP之前,想必很多人都听说AOP是基于动态代理和反射来实现的,那么在看AOP之前,你需要弄懂什么是动态代理和反射及它们又是如何实现的. 想了解JDK的动态代理及反射的实现和源码分析,请参见下面 ...

  3. 抽取JDBC工具类并增删改查

    抽取工具类: package demo; /* * 工具类 */ import java.sql.Connection; import java.sql.DriverManager; import j ...

  4. scikit-image 图像处理库介绍

    今天学习图像处理的时候,无意中看到了scikit 软件包,抱着学习的态度,这里做个记录,方便以后翻阅. 概念:scikit-image 是一种开源的用于图像处理的 Python 包.它包括分割,几何变 ...

  5. 词向量：part 2 CBoW、Skip-Gram、Negative Sampling、Hierarchical Softmax、GloVe、fastText、doc2vec

  6. docker学习篇（二）---- 基础篇

    引言 在之前的学习中,我知道了docker的三大组件分别是----镜像,容器,仓库.了解了这三个组件也就初步理解了docker.所以我学习了这三个组件,并记录下来. 镜像 docker在运行一个容器时 ...

  7. [每天解决一问题系列 - 0008] 关于.net framework 路径最大长度的问题

    问题描述: 有时候,在copy文件的时候,会提示目录长度太大,无法copy 解决方法: 可以使用Long Path Tool 解决问题 相关解释: http://blogs.msdn.com/b/bc ...

  8. .net core通过发布nuget实现引用项目

    1 获取 api key 登录  https://www.nuget.org/account 进行api key获取操作 2 安装 nuget package explorer 3 进入要发布的项目目 ...

  9. Android Systom

  10. Kafka实战－KafkaOffsetMonitor

    1.概述 前面给大家介绍了Kafka的背景以及一些应用场景,并附带上演示了Kafka的简单示例.然后,在开发的过程当中,我们会发现一些问题,那就是消息的监控情况.虽然,在启动Kafka的相关服务后,我 ...