JavaScript--水平幻灯片
// 列表布局,图片左浮动,外侧容器设置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">« 上一个</button><button data-direction="next">下一个 »</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--水平幻灯片的更多相关文章
- Javascript水平提升
1,学习js分几个阶段,没入门,入门初学者,中级水平,高级水平,ppt水平. 2,没入门的如何学习? 我当初是先学jquery,有css和html基础,有css基础看jq的语法很简单,就是选择符,jq ...
- 如何有效地提升JavaScript 水平?
lyuehh 努力学习中.. 9 人赞同 简单的介绍一下, 不一定准确, 大家一起进步... (单词大小写什么的别计较....) 学习js主要是一下几个方面, js语言本身的知识, 和浏览器相关的知识 ...
- 如何衡量一个人的 JavaScript 水平?
参考链接:https://blog.csdn.net/weixin_37615279/article/details/103658866
- JavaScript进阶之路(一)初学者的开始
一:写在前面的问题和话 一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...
- 一款炫酷的幻灯片播放框架介绍(附demo及使用方法)
废话不多说,先上demo(建议在chrome下打开 F键全屏 esc退出全屏): 我的demo-博客园简介 官网demo 更多demo 今天为大家介绍一款基于css3和JavaScript的幻灯片播放 ...
- javascript必知必会之prototype
本博客所有内容采用 Creative Commons Licenses 许可使用. 引用本内容时,请保留 朱涛, 出处 ,并且 非商业 . 点击 RSS 进行订阅.(推荐使用 google reade ...
- 高性能JavaScript(1)
---------------------------------------------------------------------------------------------------- ...
- JavaScript入门学习书籍的阶段选择
对于许多想学习 JavaScript 的朋友来说,无疑如何选择入门的书籍是他们最头疼的问题,或许也是他们一直畏惧,甚至放弃学习 JavaScript 的理由.在 JavaScript 方面,自己不是什 ...
- 提高你的javascript代码逼格系列之函数与数组
不知道大家有没有一种感觉,那就是自己写的javascript代码虽然能完全解决工作上的需要,但是,一眼望去,too simple!!!简直就是一个傻子都能看懂的水平,于是,在工作之余,我开始去收集一些 ...
- JavaScript进阶之路 初学者的开始
一:写在前面的问题和话 一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...
随机推荐
- Linux基础理论
本节内容 1. Linux的安装及相关配置 2. UNIX和Linux操作系统概述 3. Linux命令及帮助 4. 目录结构 6. 用户.群组和权限 7. 用户.群组和权限的深入讨论 1 ...
- python 使用进程池Pool进行并发编程
进程池Pool 当需要创建的子进程数量不多时,可以直接利用multiprocessing中的Process动态成生多个进程,但如果是上百甚至上千个目标,手动的去创建进程的工作量巨大,此时就可以用到mu ...
- 开源播放器 ijkplayer (一) :使用Ijkplayer播放直播视频
1.ijkplayer 编码 IjkPlayer支持硬解码和软解码. 软解码时不会旋转视频角度这时需要你通过onInfo的what == IMediaPlayer.MEDIA_INFO_VIDEO_R ...
- Python - 使用Pyinstaller将Python代码生成可执行文件
1 - Pyinstaller简介 Home-page: http://www.pyinstaller.org PyInstaller是一个能够在多系统平台(Windows.*NIX.Mac OS)上 ...
- 上下文无关的GMM-HMM声学模型
一.语音识别基本介绍 (一)统计语音识别的基本等式 X------声学特征向量序列,观测值 W------单词序列 W*------给定观测值下,概率最大的单词序列 应用贝叶斯理论等价于 进而得出统计 ...
- Spring Boot定制启动图案
启动图案 Spring Boot在启动的时候会显示一个默认的Spring的图案,对应的类为SpringBootBanner. . ____ _ __ _ _ /\\ / ___'_ __ _ _(_) ...
- # postgresql-shared_buffers
关于shared_buffers 什么是shred_buffer,我们为什么需要shared_buffers? 1.在数据库系统中,我们主要关注磁盘io,大多数oltp工作负载都是随机io,因此从磁盘 ...
- vscode中iview的</Col>标签报错问题
直接看问题截图: 这是vetur中eslint的问题,在vscode菜单中,文件->首选项->设置 找到 “vetur.validation.template”: true 将其改为fal ...
- [EXP]K8 DotNetNuke DNNspot Store <=3.0 GetShell exploit
# Exploit Title: DotNetNuke DNNspot Store <=3.0 GetShell exploit# Date: 31/03/2015# Author: K8拉登哥 ...
- 原生js实现vue组件功能
在如今VUE盛行的情况下,我们一直在惊叹于VUE的组件的功能,却不知道,原生js早就已经支持了这个功能. 最近在公开课学到的,js还有很多很多需要探索学习. 下面是一个简单的例子 <!DOCTY ...