用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 比较时间大小的代码
Apr 24 Javascript
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
BootStrap中的表单大全
Sep 07 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
AngularJS 中ui-view传参的实例详解
Aug 25 Javascript
vue中img src 动态加载本地json的图片路径写法
Apr 25 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 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制作静态网站的模板框架(二)
2006/10/09 PHP
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
解决vue+elementui项目打包后样式变化问题
2020/08/03 Javascript
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
python中as用法实例分析
2015/04/30 Python
python插入数据到列表的方法
2015/04/30 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
python实现决策树分类
2018/08/30 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
python动态文本进度条的实例代码
2020/01/22 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
密封类可以有虚函数吗
2014/08/11 面试题
打架检讨书100字
2014/01/08 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
演讲稿格式
2014/04/30 职场文书
销售员试用期自我评价
2014/09/15 职场文书
2016三八妇女节校园广播稿
2015/12/17 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python
Pandas 数据编码的十种方法
2022/04/20 Python