欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實(shí)現(xiàn)的自定義輪播圖功能詳解

 更新時(shí)間：2018年12月28日 08:44:37   作者：kerryqpw  
這篇文章主要介紹了jQuery實(shí)現(xiàn)的自定義輪播圖功能,結(jié)合實(shí)例形式詳細(xì)分析了輪播圖的原理、實(shí)現(xiàn)步驟及相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)的自定義輪播圖功能。分享給大家供大家參考，具體如下：

jquery實(shí)現(xiàn)輪播圖

web網(wǎng)頁(yè)上的首頁(yè)，經(jīng)常會(huì)出現(xiàn)輪播圖。

第三方的輪播圖存在效果單一，擴(kuò)展性低等問(wèn)題。

自定義錄播圖特點(diǎn)：

1.功能全面
2.可維護(hù)性高
3.擴(kuò)展性高
4.易于兼容其他前端框架

效果圖:

實(shí)現(xiàn)思路:

1.布局

通過(guò)疊羅漢方式將圖片展示區(qū)、上一張下一張點(diǎn)擊區(qū)，指示燈展示區(qū)層疊顯示
主畫(huà)布wrap層在最低層，其次是圖片展示區(qū)，上一張下一張點(diǎn)擊區(qū)覆蓋圖片展示區(qū)，
指示燈展示區(qū)覆蓋圖片展示區(qū)。

2.CSS樣式

將wrap層相對(duì)布局，圖片展示區(qū)、上一張下一張點(diǎn)擊區(qū)、指示燈展示區(qū)層設(shè)置為絕對(duì)布局。
wrap層作為包涵體，對(duì)圖片展示區(qū)、上一張下一張點(diǎn)擊區(qū)、指示燈展示區(qū)層進(jìn)行層疊布局。
通過(guò)display:flex設(shè)置盒子彈性布局對(duì)指示燈展示區(qū)層進(jìn)行居中排列
通過(guò)display:block和dispaly:inline-block講行級(jí)元素轉(zhuǎn)換成塊級(jí)元素

3.js

(1)web界面渲染后，開(kāi)啟圖片從左向右切換的定時(shí)器
(2)鼠標(biāo)移入輪播器后關(guān)閉定時(shí)器，鼠標(biāo)移除輪播器后，開(kāi)啟定時(shí)器。
(3).點(diǎn)擊上一張，關(guān)閉定時(shí)器，圖片從右向左移動(dòng)一張，鼠標(biāo)移開(kāi)上一張，開(kāi)啟定時(shí)器。
(4).點(diǎn)擊下一張，關(guān)閉定時(shí)器，圖片從坐向右移動(dòng)一張，鼠標(biāo)移開(kāi)下一張，開(kāi)啟定時(shí)器。
(5).鼠標(biāo)移入到指示燈，關(guān)閉定時(shí)器，圖片切換到指示燈所指示的位置，鼠標(biāo)移開(kāi)指示燈，開(kāi)啟定時(shí)器。

布局圖：

實(shí)現(xiàn)代碼:

shufflingfigure.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>輪播圖</title>
  <meta name="keywords" content="輪播圖,banner" >
  <meta name="description" content="自定義輪播圖">
  <link type="text/css" rel="stylesheet" href="css/shufflingfigure.css" rel="external nofollow" >
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript" src="js/shufflingfigure.js"></script>
</head>
<body>
  <div id="wrap" >
    <!--圖片區(qū)域-->
    <div class="pic">
      <img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/Guardians-of-the-Galaxy-Poster-High-Res.jpg">
      <img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/Blade-Runner-poster-art-Harrison-Ford.jpg">
      <img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/2017_alien_covenant_4k-5120x2880-1920x1080.jpg">
      <img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/robocop-1987-wallpaper-2.jpg">
      <img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/sJALsDXak4EehSg2F2y92rt5hPe.jpg">
    </div>
    <!--左右按鈕-->
    <div class="btn">
      <span class="prev"><</span>
      <span class="next">></span>
    </div>
    <!--小圓點(diǎn)-->
    <div class="lib">
      <span class="on" ></span>
      <span ></span>
      <span ></span>
      <span ></span>
      <span ></span>
    </div>
  </div>
</body>
</html>

shufflingfigure.css:

*{
  margin: 0;
  padding: 0;
}
#wrap{
  position: relative;
  width:600px ;
  height: 260px;
  margin: 50px auto;
}
#wrap .pic{
  width: 600px;
  height: 260px;
  position: relative;
  cursor: pointer;
}
#wrap .pic img{
  position:absolute;
  width:600px ;
  height: 260px;
}
#wrap .btn span{
  position: absolute;
  top: 50%;
  display: block;
  width: 50px;
  height: 90px;
  margin-top: -45px;
  background: rgba(0,0,0,.5);
  font-size: 20px;
  text-align: center;
  line-height: 90px; /*設(shè)置垂直居中*/
  cursor: pointer;
}
#wrap .btn span.next{
  position: absolute;
  right: 0;
}
#wrap .lib{
  position: absolute;
  bottom: 10px;
  left: 50%;
  margin-left: -65px;
  display: flex;  /*彈性盒子模型*/
  flex-direction: row; /*主軸為行*/
  justify-content:space-between;/*主軸方向排列方式*/
  align-items: center; /*輔軸方向排列方式*/
  width:130px ;
  height: 30px;
  background: rgba(0,0,0,.5);
}
#wrap .lib span {
  display: block;
  width: 10px;
  height: 10px;
  background: #fff;
  margin: 5px;
  border-radius: 50%;  /*設(shè)置圓角設(shè)置圓形*/
  cursor: pointer;
}
#wrap .lib span.on{
  background: red;
}

shufflingfigure.js:

/**
 * Created by Administrator on 2017/4/6.
 */
window.onload=function () {
  /**定義*/
  /*點(diǎn)擊 下一張按鈕 被點(diǎn)擊的時(shí)候 圖片進(jìn)行切換 小圓點(diǎn)切換*/
  var $pic=$(".pic"); /*獲取圖片點(diǎn)擊區(qū)域*/
  var $next=$(".next");/*獲取下一張的按鈕*/
  var $prev=$(".prev");/*獲取上一張的按鈕*/
  var $img=$(".pic img");  /*獲取pic下所有的img*/
  var $lib=$(".lib span"); /*獲取所有的小圓點(diǎn)*/
  var index=0;  //定義當(dāng)前圖片下標(biāo)
  var length=$img.length;  //圖片個(gè)數(shù)
  //圖片從左向右切換
  function changeImage() {
    index++;
    index=index%length;
    $img.eq(index).fadeIn(300).siblings().fadeOut(300);
    $lib.eq(index).addClass('on').siblings().removeClass('on');
  }
  //圖片從右向左切換
  function changeImageRighttoLeft() {
    index--;
    index=index<0?length:index;
    $img.eq(index).fadeIn(300).siblings().fadeOut(300);
    $lib.eq(index).addClass('on').siblings().removeClass('on');
  }
  //開(kāi)啟圖片從左向右切換定時(shí)器
  var intervalHandle = setInterval(changeImage,2000);
  /**邏輯*/
  //下一張點(diǎn)擊時(shí)圖片向右移動(dòng)一張
  $next.click(function () {
    clearInterval(intervalHandle);
    changeImage();
  })
  //下一張移除焦點(diǎn)時(shí)開(kāi)啟定時(shí)器
  $next.hover(function () {
  },function () {
    clearInterval(intervalHandle);
    intervalHandle = setInterval(changeImage,2000);
  });
  //上一張點(diǎn)擊時(shí)圖片向左移動(dòng)一張
  $prev.click(function () {
    clearInterval(intervalHandle);
    changeImageRighttoLeft();
  })
  //上一張移除焦點(diǎn)時(shí)開(kāi)啟定時(shí)器
  $prev.hover(function () {
  },function () {
    clearInterval(intervalHandle);
    intervalHandle = setInterval(changeImage,2000);
  });
  $lib.hover(function () {/*移入小圓點(diǎn)上*/
    //關(guān)閉圖片切換定時(shí)器
    clearInterval(intervalHandle);
    index=$(this).index();
    $img.eq(index).fadeIn(300).siblings().fadeOut(300);
    $lib.eq(index).addClass('on').siblings().removeClass('on');
  },function () {
    intervalHandle = setInterval(changeImage,2000);
  });
  $pic.hover(function () {
    clearInterval(intervalHandle);
  },function () {
    intervalHandle = setInterval(changeImage,2000);
  });
  //圖片點(diǎn)擊事件
  $pic.click(function () {
      alert("index:"+index);
  });
}

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery圖片操作技巧大全》、《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論