用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重要知识更新
Jul 08 Javascript
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
javascript中Number对象的toString()方法分析
Dec 20 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
常用的js方法合集
Mar 10 Javascript
Javascript实现购物车功能的详细代码
May 08 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
vue实现拖拽进度条
Mar 01 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
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
详解关于php的xdebug配置(编辑器vscode)
2019/01/29 PHP
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
编写strcpy函数
2014/06/24 面试题
校长岗位职责
2013/11/26 职场文书
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
供应链金融服务方案
2014/05/25 职场文书
通信工程专业求职信
2014/06/04 职场文书
走进敬老院活动总结
2014/07/10 职场文书
聘用意向书
2014/07/29 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
红高粱观后感
2015/06/10 职场文书
爱国主义电影观后感
2015/06/18 职场文书
教你怎么用python selenium实现自动化测试
2021/05/27 Python
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript