用jQuery实现优酷首页轮播图


Posted in Javascript onJanuary 09, 2017

大致介绍

看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了

思路

思路其实非常简单,就是当点击图片下面的圆点或者图片两边的箭头时,让想要看到的图片走到它的位置,然后当前的图片和想要看到的图片按照一个方向运动就可以了

例如:我们点击第五个小圆点,让第五个图片跑到当前图片的后面,然后一起向左运动

用jQuery实现优酷首页轮播图

当然了,如果你想要看前面的图片,让图片先跑到当前图片的左边,然后和当前图片一起向右运动

基本结构与样式

<div class="lunbo">
 <div class="picture">
  <ul>
  <li><img src="img/1.jpg"></li>
  <li><img src="img/2.jpg"></li>
  <li><img src="img/3.jpg"></li>
  <li><img src="img/4.jpg"></li>
  <li><img src="img/5.jpg"></li>
  </ul>
 </div>
 <ul class="btn">
  <li id="active"><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
 </ul>
 <div id="left"><img src="img/left.png"></div>
 <div id="right"><img src="img/right.png"></div>
 </div>
*{
 margin: 0;
 padding: 0;
}
.lunbo{
 width: 100%;
 height: 410px;
 position: relative;
 text-align: center;

}
.picture{
 width: 1190px;
 height: 480px;
 position: absolute;
 top: 0;
 left: 88px;
 overflow: hidden;
}
.picture li{
 width: 1190px;
 height: 410px;
 margin: 0 auto;
 list-style-type: none;
 margin-top: 70px;
 position: absolute;
 overflow: hidden;
 top: ;
 left: ;
}
.picture img{
 cursor: pointer;
}
.btn{
 display: block;
 width: 150px;
 height: 30px;
 position: absolute;
 top: 460px;
 left: 130px;
}
.btn li{
 display: block;
 width: 10px;
 height: 10px;
 background-color:white;
 list-style-type: none;
 position: absolute;
 top: 0px;
 left: 0px;
 border-radius: 10px;
 cursor: pointer;
}
#active{
 background-color: #03A9F4;
}
.btn li:hover{
 background-color:#9e9e9e;
}
#left{
 position: absolute;
 top: 240px;
 left: 90px;
 cursor: pointer;
}
#right{
 position: absolute;
 top: 240px;
 left: 1220px;
 cursor: pointer;
}

然后我们用jQuery来设置初始图片的位置和小圆点的位置

function setCirPos(){
 // 设置圆点的位置
 $cir.each(function(){
  $(this).css({
  left:$(this).index()*25 + 500
  })
 });
 // 设置刚开始不显示的图片的位置
 $pic.slice(1).each(function(){
  $(this).css({
  left:$picW
  })
 })
 }

自动轮播

先来看看定义的全局变量

var $cir = $('.btn li');
 var $pic = $('.picture li');
 var $picW = $pic.width();
 var $oLeft = $('#left');
 var $oRight = $('#right');
 // 当前图片
 var nowPic = 0;
 // 防止用户连续的点击
 var canClick = true;
 // 定时器
 var timer = null;

设置nowPic是为了记录当前显示的图片,因为这个轮播图一共有三种触发图片切换的方法,所以这个变量是三个方法要共享的

设置canClick变量是为了防止用户在图片切换动画效果还未完成的时候在进行点击

// 设置定时器自动切换
 timer = setInterval(function(){
 auto();
 },2000);
 //自动切换 
 function auto(){
 var index = nowPic + 1;
 if(index < 0){
  index = 4;
 }else if(index > 4){
  index = 0;
 }
 $pic.eq(index).css('left',$picW);
 $pic.eq(nowPic).animate({left:-$picW}, 400);
 $pic.eq(index).animate({left:0}, 400);
 nowPic = index;
 // 设置当前图片的圆点的样式
 $cir.eq(nowPic).attr('id','active').siblings().attr('id','');
 }

点击小圆点

图片切换的方法都是一样的但是要注意,当点击小圆点时要清楚图片自动切换的定时器,在图片切换完成后,在设置自动切换的定时器

function lunbo(){
 $cir.click(function(){
  clearInterval(timer);
  var index = $(this).index();
  if(index > nowPic){
  // 点击的值大于当前的值
  $pic.eq(index).css('left',$picW);
  $pic.eq(nowPic).animate({left:-$picW},400);
  }else if(index < nowPic){
  // 点击的值小于当前的值
  $pic.eq(index).css('left',-$picW);
  $pic.eq(nowPic).animate({left:$picW},400);
  }
  $pic.eq(index).animate({left:0},400,function(){
  timer = setInterval(function(){
   auto();
  },3000);
  });
  nowPic = index;
  // 设置当前图片的圆点的样式
  $cir.eq(nowPic).attr('id','active').siblings().attr('id','');
 });
 }

点击箭头

当点击箭头时,我们为了防止用户多次连续的点击,所以设置了canClick这个全局变量,当点击了箭头时,要首先判断是否有为完成的动画即canClick是否为true,如果为true,就将canCilck设置为false,防止再次点击箭头,然后进行图片切换的动画,同样不要忘了清楚定时器,最后当切换图片的动画完成时,animate()方法的回调函数执行,将canClick设置为true

// 点击左箭头
 $oLeft.click(function(){
 if(canClick){
  clearInterval(timer);
  canClick = false;
  var index = nowPic - 1;
  if(index < 0){
  index = 4;
  }else if(index > 4){
  index = 0;
  }
  $pic.eq(index).css('left',-$picW);
  $pic.eq(nowPic).animate({left:$picW}, 400);
  $pic.eq(index).animate({left:0}, 400,function(){
  canClick = true;
  timer = setInterval(function(){
   auto();
  },3000);
  });
  nowPic = index;
  // 设置当前图片的圆点的样式
  $cir.eq(nowPic).attr('id','active').siblings().attr('id','');
 }
 })
// 点击右箭头
 $oRight.click(function(){
 if(canClick){
  clearInterval(timer);
  canClick = false;
  var index = nowPic + 1;
  if(index < 0){
  index = 4;
  }else if(index > 4){
  index = 0;
  }
  $pic.eq(index).css('left',$picW);
  $pic.eq(nowPic).animate({left:-$picW}, 400);
  $pic.eq(index).animate({left:0}, 400,function(){
  canClick = true;
  timer = setInterval(function(){
   auto();
  },3000);
  });
  nowPic = index;
  // 设置当前图片的圆点的样式
  $cir.eq(nowPic).attr('id','active').siblings().attr('id','');
 }
 })

总结

这个效果实现起来很简单,就是刚开始没有想到实现的思路。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Javascript与flash交互通信基础教程
Aug 07 Javascript
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
基于jQuery的实现简单的分页控件
Oct 10 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
JavaScript Date对象详解
Mar 01 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
关于Vue Router的10条高级技巧总结
May 06 Vue.js
AngularJS实现表单验证功能
Jan 09 #Javascript
AngularJS表单基本操作
Jan 09 #Javascript
AngularJS Controller作用域
Jan 09 #Javascript
详解JavaScript树结构
Jan 09 #Javascript
angular分页指令操作
Jan 09 #Javascript
jquery.zclip轻量级复制失效问题
Jan 08 #Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
Jan 08 #Javascript
You might like
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
对python多线程与global变量详解
2018/11/09 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
物业保安主管岗位职责
2013/12/25 职场文书
什么样的创业计划书可行性高?
2014/02/01 职场文书
成龙洗发水广告词
2014/03/14 职场文书
党员民主生活会材料
2014/12/15 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
用人单位聘用意向书
2015/05/11 职场文书
初中数学教学反思范文
2016/02/17 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle