溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jquery如何實(shí)現(xiàn)焦點(diǎn)輪播效果

發(fā)布時(shí)間：2021-06-24 14:50:19 來(lái)源：億速云 閱讀：142 作者：小新 欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)jquery如何實(shí)現(xiàn)焦點(diǎn)輪播效果的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來(lái)看看吧。

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:"",//數(shù)字列表
 width:"",//一個(gè)li的寬度
 interval:"",//定時(shí)器
 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();//這是下標(biāo)
 this.play(); //這是自動(dòng)輪播
 this.mouse(); //這是鼠標(biāo)滑入/滑出
 },
 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"));//得到當(dāng)前激活向下標(biāo)
  $("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(){//更新下標(biāo)
 var _this=this;
 $("ol.index-ol>li").mouseenter(function(){//點(diǎn)擊下標(biāo)
  var active_index= $("ol.index-ol>li.active").attr("data-index");//得到當(dāng)前激活向下標(biāo)
  var index=$(this).attr("data-index");//得到當(dāng)前下標(biāo);
  if(active_index==index){return;};
  $("ol.index-ol>li").removeClass("active");
  $(this).addClass("active");
  var end=index-active_index;
  _this.animation(-end)
 })
 },
 slide:function(){//點(diǎn)擊左右箭頭
 var _this=this;
 $("div.slide>span").click(function(){
  if(_this.can){return;};
  var active_index= parseInt($("ol.index-ol>li.active").attr("data-index"));//得到當(dāng)前激活向下標(biāo)
  $("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(){//更新數(shù)字
 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){//做動(dòng)畫
 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();

感謝各位的閱讀！關(guān)于“jquery如何實(shí)現(xiàn)焦點(diǎn)輪播效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手