教你一步步用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 相关文章推荐
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
JS中的异常处理方法分享
Dec 22 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 Javascript
使用JS实现简易计算器
Jun 14 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
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
jquery 批量上传图片实现代码
2010/01/28 Javascript
基于jquery的表格排序
2010/09/11 Javascript
Javascript面向对象之四 继承
2011/02/08 Javascript
基于jQuery的图片剪切插件
2011/08/03 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
javascript数组定义的几种方法
2017/10/06 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
jupyter安装小结
2016/03/13 Python
Python计算两个日期相差天数的方法示例
2017/05/23 Python
python中map()函数的使用方法示例
2017/09/29 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
python如何求解两数的最大公约数
2018/09/27 Python
django解决跨域请求的问题
2018/11/11 Python
pycharm安装及如何导入numpy
2020/04/03 Python
《小山羊和小灰兔》教学反思
2014/02/19 职场文书
《鱼游到了纸上》教学反思
2014/02/20 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL