真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們

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');
  }
  //開啟圖片從左向右切換定時(shí)器
  var intervalHandle = setInterval(changeImage,2000);
  /**邏輯*/
  //下一張點(diǎn)擊時(shí)圖片向右移動(dòng)一張
  $next.click(function () {
    clearInterval(intervalHandle);
    changeImage();
  })
  //下一張移除焦點(diǎn)時(shí)開啟定時(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í)開啟定時(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);
  });
}

上述內(nèi)容就是使用jQuery怎么自定義一個(gè)輪播圖功能，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。