jquery实现焦点轮播效果

时间：2021-05-26

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">&lt;</span> <span class="next">&gt;</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();

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章