// 列表布局，图片左浮动，外侧容器设置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. magic cube

    搜索题, 每个状态能扩展出12种状态,最多进行5次旋转12^5 要用到iddfs,或者我看到网上其他人用的ida* 我也是参考了别人的代码,而且这个题vj上有点问题,我看数据看了半天,愣是没看明白第二 ...

  2. 异步请求获取JSON数据

    json格式的数据广泛应用于异步请求中前后端的数据交互,本文主要介绍几种使用场景和使用方法. <script type="text/javascript"> funct ...

  3. Django 通过 mongoengine 连接 MongoDB 进而使用orm进行CRUD

    一. 在python脚本中, 我们通常可以使用pymongo模块实现与mongodb数据库的交互, 但是在使用Django框架进行定制开发的web server 项目中, 仍然使用pymongo模块的 ...

  4. eclipse——JDK安装与环境变量配置步骤

    第一次接触eclipse的时候,让我自己安装jdk和配置环境变量,我是懵逼的,后来百度到找到了一个比较详细的引导,本人测试没问题,截图按步骤如下: JDK安装   步骤1: 步骤2: 配置环境变量 步 ...

  5. 详解 leetcode 猜数字大小 II

    375. 猜数字大小 II 原题链接375. 猜数字大小 II 题目下方给出了几个提示: 游戏的最佳策略是减少最大损失,这引出了 Minimax 算法,见这里,和这里 使用较小的数开始(例如3),看看 ...

  6. 周末，说声php的setter&getter（魔术）方法，你们辛苦了

    php 作为快速迭代项目的语言,其牛逼性质自不必多说.今天咱们要来说说php语言几个魔术方法,当然了,本文主要以setter&getter方法说明为主. 首先,咱们得知道什么叫魔术方法? 官方 ...

  7. 使用Swagger 搭建高可读性ASP.Net WebApi文档

    一.前言 在最近一个商城项目中,使用WebApi搭建API项目.但开发过程中,前后端工程师对于沟通接口的使用,是非常耗时的.之前也有用过Swagger构建WebApi文档,但是API文档的可读性并不高 ...

  8. iOS开发笔记－一种任意字体、颜色混排UILabel的实现

    最近开发新App,射妓狮给的图上出现一种不同大小字体混排的Label,就像下面这种: 想了想,最简单的方法是使用多个UILabel排列显示,但是这样不仅麻烦而且效果也不好,索性自定义UILabel来尽 ...

  9. OC学习4——OC新特性之块（Block）

    文章主要参考  关于OC中的block自己的一些理解(一) 对块的深入理解  浅析ios开发中Block块语法的妙用 1.关于block block的作用:保存一段代码. 苹果官方推荐的一种语法,类似 ...

  10. Devops流程规范

    芯盾时代_Devops_Docker操作说明及使用规范 北京芯盾时代科技有限公司 2019年1月 修订记录 版本号 修订人 修订日期 修订描述 v0.1 芯盾 2019/1/15 初次创建 v0.2 ...