教你一步步用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 特殊字符
Apr 05 Javascript
js 编写规范
Mar 03 Javascript
javascript dom 基本操作小结
Apr 11 Javascript
javascript简易缓动插件(源码打包)
Feb 16 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
javascript常用的方法整理
Aug 20 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
js实现导航栏中英文切换效果
Jan 16 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
JS一次前端面试经历记录
Mar 19 Javascript
基于js实现逐步显示文字输出代码实例
Apr 02 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
一次编写,随处运行
2006/10/09 PHP
php smarty的预保留变量总结
2008/12/04 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
php截取字符串函数分享
2015/02/02 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
php实现session共享的实例方法
2019/09/19 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
Vue.js实现表格动态增加删除的方法(附源码下载)
2017/01/20 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
python实现点对点聊天程序
2018/07/28 Python
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
pandas.cut具体使用总结
2019/06/24 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
幼儿园老师辞职信
2014/01/20 职场文书
剪枝的学问教学反思
2014/02/07 职场文书
保安辞职信范文
2015/02/28 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
办公室管理规章制度
2015/08/04 职场文书
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python