教你一步步用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 相关文章推荐
Javascript 判断函数类型完美解决方案
Sep 02 Javascript
javascript sudoku 数独智力游戏生成代码
Mar 27 Javascript
JavaScript中链式调用之研习
Apr 07 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
深入浅出es6模板字符串
Aug 26 Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 Javascript
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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
社区(php&amp;&amp;mysql)三
2006/10/09 PHP
php 前一天或后一天的日期
2008/06/28 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
详解Vue2 添加对scss的支持
2019/01/02 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
windows下安装Python和pip终极图文教程
2017/03/05 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
python机器学习之神经网络(三)
2017/12/20 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
pytorch SENet实现案例
2020/06/24 Python
python openCV自制绘画板
2020/10/27 Python
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
经营理念口号
2014/06/21 职场文书
大学毕业生推荐信
2014/07/09 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
领导干部考核评语
2015/01/04 职场文书
承诺书模板大全
2015/05/04 职场文书
小学教研工作总结2015
2015/05/13 职场文书
机关工会工作总结2015
2015/05/26 职场文书