jquery实现焦点轮播效果


Posted in Javascript onFebruary 23, 2017

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link rel="stylesheet" href="./css/lunbo.css" rel="external nofollow" >
</head>
<body>
 <div id="banner">
  <ul class="img-ul"></ul>
  <ol class="index-ol"></ol>
 <div class="slide">
  <span class="prev"><</span>
  <span class="next">></span>
 </div>
 </div>
<script src="./js/jquery-1.11.3.js"></script>
<script src="./js/lunbo.js"></script>
</body>
</html>

css代码

div {
 width: 670px;
 height: 240px;
 position: relative;
 overflow: hidden;
}
div > ul,
div ol {
 list-style: none;
 position: absolute;
 margin: 0;
 padding: 0;
}
div > ul.img-ul,
div ol.img-ul {
 width: 3350px;
 height: 240px;
 z-index: 100;
}
div > ul.img-ul > li,
div ol.img-ul > li {
 float: left;
 width: 670px;
 height: 240px;
}
div > ul.index-ol,
div ol.index-ol {
 width: 205px;
 bottom: 10px;
 left: 217px;
 z-index: 1000;
}
div > ul.index-ol > li,
div ol.index-ol > li {
 float: left;
 cursor: pointer;
 margin-left: 20px;
 background: #000;
 color: #fff;
 border-radius: 50%;
 height: 20px;
 width: 20px;
 text-align: center;
 line-height: 20px;
}
div > ul.index-ol > li.active,
div ol.index-ol > li.active {
 background: red;
}
div > div.slide {
 z-index: 500;
 position: absolute;
 width: 670px;
 height: 240px;
 left: 0;
 top: 0;
}
div > div.slide > span {
 cursor: pointer;
 position: absolute;
 top: 100px;
 width: 30px;
 height: 60px;
 line-height: 60px;
 text-align: center;
 font-size: 20px;
 color: #fff;
 background: rgba(0, 0, 0, 0.2);
}
div > div.slide > span:nth-child(1) {
 left: 0;
}
div > div.slide > span:nth-child(2) {
 right: 0;
}

JavaScript代码

var arr=[
 {"img":"./images/banner_01.jpg"},
 {"img":"./images/banner_02.jpg"},
 {"img":"./images/banner_03.jpg"},
 {"img":"./images/banner_04.jpg"},
 {"img":"./images/banner_05.jpg"},
 ];
var lunbo={
 can:0, //判断
 ul_li:"",//图片列表
 ol_li:"",//数字列表
 width:"",//一个li的宽度
 interval:"",//定时器
 init:function(){
 console.log(this);
 this.view();
 this.view_index();
 $("ol.index-ol").children("li:eq(0)").addClass("active");
 this.width=$("ul.img-ul>li").width(); //670
 this.slide(); //这是左右箭头
 this.animation_index();//这是下标
 this.play(); //这是自动轮播
 this.mouse(); //这是鼠标滑入/滑出
 },
 mouse:function(){
 var _this=this;
 $("#banner").on({
  mouseenter:function(){
  _this.stop()
  },
  mouseleave:function(){
  _this.play();
  }
 })
 },
 play:function(){
 this.interval=setInterval(function(){
  var active_index= parseInt($("ol.index-ol>li.active").attr("data-index"));//得到当前激活向下标
  $("ol.index-ol>li").removeClass("active");
  $(this).addClass("active");
  this.animation(1);
  (active_index==4)&&(active_index=-1);
  $("ol.index-ol>li:eq("+(active_index+1)+")").addClass("active")
 }.bind(this),3000);
 },
 stop:function(){
 clearInterval(this.interval)
 this.interval=null;
 },
 animation_index:function(){//更新下标
 var _this=this;
 $("ol.index-ol>li").mouseenter(function(){//点击下标
  var active_index= $("ol.index-ol>li.active").attr("data-index");//得到当前激活向下标
  var index=$(this).attr("data-index");//得到当前下标;
  if(active_index==index){return;};
  $("ol.index-ol>li").removeClass("active");
  $(this).addClass("active");
  var end=index-active_index;
  _this.animation(-end)
 })
 },
 slide:function(){//点击左右箭头
 var _this=this;
 $("div.slide>span").click(function(){
  if(_this.can){return;};
  var active_index= parseInt($("ol.index-ol>li.active").attr("data-index"));//得到当前激活向下标
  $("ol.index-ol>li").removeClass("active");
  if(this.className=="prev"){
  _this.animation(1);
  (active_index==1)&&(active_index=5);
  $("ol.index-ol>li:eq("+(active_index-1)+")").addClass("active")
  }else{
  _this.animation(-1);
  (active_index==4)&&(active_index=-1);
  $("ol.index-ol>li:eq("+(active_index+1)+")").addClass("active")
  }
 })
 },
 view:function(){//更新图片
 for(var i=0;i<arr.length;i++){
  this.ul_li+="<li data-index="+i+"><img src="+arr[i].img+"></li>"
 }
 $("ul.img-ul").html(this.ul_li);
 this.ul_li="";
 },
 view_index:function(){//更新数字
 for(var i=0;i<arr.length;i++){
  this.ol_li+="<li data-index="+i+">"+(i+1)+"</li>"
 }
 $("ol.index-ol").html(this.ol_li);
 },
 animation:function(n){//做动画
 this.can=1;
 if(n<0){
  arr=arr.splice(arr.length+n,-n).concat(arr);
  this.view();
  $("ul.img-ul").css({"left":n*this.width+"px"});
  $("ul.img-ul").animate({"left":"0px"},1000,function(){
  this.can=0;
  }.bind(this));
 }else{
  $("ul.img-ul").animate({"left":-n*this.width+"px"},1000,function(){
  arr=arr.concat(arr.splice(0,n));
  this.view();
  $("ul.img-ul").css({"left":0+"px"});
  this.can=0;
  }.bind(this));
 }
 }
};
lunbo.init();

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

Javascript 相关文章推荐
两个JavaScript jsFiddle JSBin在线调试器
Mar 14 Javascript
JQuery对表单元素的基本操作使用总结
Jul 18 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
node.js监听文件变化的实现方法
Apr 17 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
SVG描边动画
Feb 23 #Javascript
Angular JS 生成动态二维码的方法
Feb 23 #Javascript
js实现楼层导航功能
Feb 23 #Javascript
jQuery点击头像上传并预览图片
Feb 23 #Javascript
jQuery事件与动画基础详解
Feb 23 #Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 #Javascript
解析Vue2.0双向绑定实现原理
Feb 23 #Javascript
You might like
PHP 写文本日志实现代码
2010/05/18 PHP
PHP学习笔记之一
2011/01/17 PHP
PHP生成随机密码类分享
2014/06/25 PHP
PHP生成plist数据的方法
2015/06/16 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
jquery提升性能最佳实践小结
2010/12/06 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
2012/01/04 Javascript
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
python中plot实现即时数据动态显示方法
2018/06/22 Python
python爬虫之自动登录与验证码识别
2020/06/15 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
对python中return与yield的区别详解
2020/03/12 Python
python tqdm库的使用
2020/11/30 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
全球虚拟主机商:HostGator
2017/02/06 全球购物
四风存在的原因分析
2014/02/11 职场文书
销售个人求职信范文
2014/04/28 职场文书
应聘教师求职信
2014/07/19 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL
Oracle表空间与权限的深入讲解
2021/11/17 Oracle