用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 相关文章推荐
防止浏览器记住用户名及密码的简单实用方法
Apr 22 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
轮播的简单实现方法
Jul 28 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 Javascript
简单聊聊TypeScript只读修饰符
Apr 06 Javascript
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中定义网站根目录的常用方法
2010/08/08 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
JS Date函数整理方便使用
2013/10/23 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
python用来获得图片exif信息的库实例分析
2015/03/16 Python
利用Python获取操作系统信息实例
2016/09/02 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
计算s=f(f(-1.4))的值
2014/05/06 面试题
小学生自我评价范例
2013/09/24 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
采购员岗位职责
2015/02/03 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL
nginx之内存池的实现
2022/06/28 Servers
python计算列表元素与乘积详情
2022/08/05 Python