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="/UploadFiles/2021-04-02/jquery-1.11.3.js">

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="/UploadFiles/2021-04-02/+arr[i].img+">

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

标签:
jquery实现轮播图效果,jquery实现图片轮播,jquery焦点图轮播

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
评论“jquery实现焦点轮播效果”
暂无“jquery实现焦点轮播效果”评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。