教你一步步用jQyery实现轮播器


Posted in Javascript onDecember 18, 2016

实现原理

如图,试想一下,若是将<ul>的width属性值设置的很宽,直到可以装下你所有的图片,而每一个图片又用<li>包着并且设置了左浮动。

那么当我们向左移动ul的时候并且移动的距离为<li>的宽度,第二个<li>不就被移动到了<div>的窗口,这样一来图片不就被一张一张显示出来了吗?

接下来我们在设置<div>的属性overflow:hidden,那么<div>窗口以外的图片不显示,只显示移动到当前窗口的图片,是不是又完美了一些,感觉快做好了是吧!

教你一步步用jQyery实现轮播器 

说了一些原理,好了,直接上代码,记得引入jquery。

这是div做的布局,做的时候记得加上边框,做后在删掉,这样便于测试

<div class="slideShow">
 <div class="nav-t">
  <ul>
   <li><a href="#" target="_blank"><img src="images/1.png" alt=""></a></li>
   <li><a href="#" target="_blank"><img src="images/2.png" alt=""></a></li>
   <li><a href="#" target="_blank"><img src="images/3.png" alt=""></a></li>
   <li><a href="#" target="_blank"><img src="images/4.png" alt=""></a></li>
   <li><a href="#" target="_blank"><img src="images/5.png" alt=""></a></li>
  </ul>
  <div class="nav-b">
   <span class="active">1</span>
   <span>2</span>
   <span>3</span>
   <span>4</span>
   <span>5</span>
  </div>
 </div>
 </div>
 <script type="text/javascript" src="jquery-min.js"></script>
 <script type="text/javascript" src="lunbo.js"></script>

接下来设置一下样式

<style>
 .slideShow{
  border:0px solid blue;
  width:600px;
  height:450px;
  margin:50px auto;
  position:relative;
 }
 .nav-t{
  border:0px solid red;
  width:580px;
  height:430px;
  margin:8px auto;
  position:relative;
  overflow:hidden;
 }
 .nav-t ul{
  border:0px solid green;
  list-style:none;
  width:3000px;
  height:430px;
  margin:0;
  padding:0;
  position:relative;
 }
 .nav-t li{
  height:427px;
  width:580px;
  float:left;
 }
 .nav-b{
  position:absolute;
  top:390px;
  left:220px;
  cursor:default;
 }
 .nav-b span{
  margin-right:5px;
  border:1px solid red;
  padding:0 6px;
  border-radius:12px;
  color:#fff;
  background:rgba(132,125,119,0.5);
  cursor:pointer;
 }
 .nav-b span.active{
  background:rgba(0,0,0,0.8);
 }
 </style>

用js实现点击轮播图片、自动轮播图片,鼠标移动上去停止轮播

$(function(){
 
 $(function(){
 var slide=$(".slideShow"),
  navt=slide.find(".nav-t"),
  ul=navt.find("ul"),
  navbs=slide.find(".nav-b span"),
  onwidth=ul.find("li").eq(0).width(), //获取ul下的li宽度
  timer=null,
  inow=0;
 navt.hover(function(){
   clearInterval(timer); //鼠标移上去,清除掉自动轮播功能,即定时轮播
  },autoPlay); 
 navbs.on("click",function(){ //点击轮播事件
  var me=$(this);
   inow=me.index();  //此处变量用的与自动轮播函数里的相同,为的是能在随便点击后,自动轮播时按照我们点击了的继续向后轮播,这叫动态实时
  ul.animate({left:-inow*onwidth},0.01); //ul向左移动从而使得下一个li显示到div的当前窗口
  navbs.removeClass("active");   //清除掉上一个点击按钮的样式
  me.addClass("active");     //为当前被点击的按钮添加第一个按钮样式
 });
 autoPlay();     
 function autoPlay(){     //自动轮播函数
 timer=setInterval(function(){   //开定时器
  inow++;
  if(inow==navbs.length){    //判断是否到了最后一张,若是到了,返回到第一张
   inow=0
   }
  navbs.eq(inow).trigger("click"); //根据定时的时间用span的索引自动调用click事件,trigger为jQuery的自动调用函数
  },3000);
 }

});



});

看一下效果图?好的

教你一步步用jQyery实现轮播器

教你一步步用jQyery实现轮播器

总结

好了,以上就是利用jQyery实现轮播器的全部内容了,怎么样,要不你也做一个?希望本文的内容对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
Jquery带搜索框的下拉菜单
May 06 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
Vue自定义指令封装节流函数的方法示例
Jul 09 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
Js数组扁平化实现方法代码总汇
Nov 11 Javascript
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
Angular.js实现注册系统的实例详解
Dec 18 #Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 #Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 #Javascript
纯js实现悬浮按钮组件
Dec 17 #Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 #Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 #Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 #Javascript
You might like
php SQL之where语句生成器
2009/03/24 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
PHP CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
php使用百度翻译api示例分享
2014/01/31 PHP
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
yii分页组件用法实例分析
2015/12/28 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
js中this的用法实例分析
2015/01/10 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
javascript适合移动端的日期时间拾取器
2015/11/10 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
使用Python更换外网IP的方法
2018/07/09 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
基于python实现KNN分类算法
2020/04/23 Python
python第三方库学习笔记
2020/02/07 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
送温暖献爱心活动总结
2014/07/08 职场文书
生物工程专业求职信
2014/09/03 职场文书
风之谷观后感
2015/06/11 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
Python Socket编程详解
2021/04/25 Python