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 相关文章推荐
在网页里看flash的trace数据的js类
Jan 10 Javascript
Extjs学习笔记之三 extjs form更多的表单项
Jan 07 Javascript
跟着JQuery API学Jquery 之二 属性
Apr 09 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
vue中的mvvm模式讲解
Jan 31 Javascript
vue监听用户输入和点击功能
Sep 27 Javascript
Vue如何实现变量表达式选择器
Feb 18 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/16 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
塔吉特百货公司官网:Target
2017/04/27 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
党支部活动策划方案
2014/08/18 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
社区植树节活动总结
2015/02/06 职场文书
团员个人总结
2015/02/26 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript