javascript實(shí)現(xiàn)異形滾動輪播

更新時間：2019年11月28日 16:21:30 作者：Maybion

這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)異形滾動輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js異形滾動輪播的具體代碼，供大家參考，具體內(nèi)容如下

運(yùn)動過程研究

讓每個元素走到前一個標(biāo)簽的位置。
3走到2
2走到1
1走到0
0走到6

利用js動態(tài)獲取每個類名對應(yīng)的css樣式對象，組成一個新數(shù)組。

// 定義一個新數(shù)組，接收每個位置的css樣式對象
var styleArr = [];
// 遍歷數(shù)組添加樣式對象
for (var i =0; i <$('li').length; i++) {
 styleArr.push({
 "width": $('li').eq(i).css('width'),
 "height": $('li').eq(i).css('height'),
 "left": $('li').eq(i).css('left'),
 "top": $('li').eq(i).css('top')
 });
}

可以使用animate方法發(fā)生移動：

animate(params,[speed],[easing],[fn])

params:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合
speed:三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數(shù)值(如：1000)
easing:要使用的擦除效果的名稱(需要插件支持).默認(rèn)jQuery提供"linear" 和 “swing”.
fn:在動畫完成時執(zhí)行的函數(shù)，每個元素執(zhí)行一次。

// 右按鈕事件
 $('.btn_you').click(function () {
 // 后面的元素走到前面上一個位置
 for (var i =1; i <$('li').length; i++) {
 $('.no'+ i).animate(styleArr[i -1], 300)
 }
 // 0位置的li直接更改css樣式，切換到6的位置
 $('.no0').animate(styleArr[6], 300);
 })

問題：樣式和對應(yīng)的類名不統(tǒng)一，不能進(jìn)行第二次運(yùn)動。

解決方法：進(jìn)行對應(yīng)位置的類名輪換。

可以將7個類名放在數(shù)組中，每次實(shí)現(xiàn)將最后一項(xiàng)刪除，添加到第一項(xiàng)。
pop 方法
從數(shù)組中移除最后一個元素并將該元素返回
push 方法
將新元素追加到一個數(shù)組中，并返回數(shù)組的新長度。
shift 方法
從數(shù)組中移除第一個元素并將返回該元素。
unshift 方法
在數(shù)組的開頭插入新元素。

//運(yùn)動結(jié)束后，要讓li的類名和位置統(tǒng)一，切換類名
classNameArr.unshift(classNameArr.pop());

將得到新數(shù)組中的類名賦值給對應(yīng)li標(biāo)簽。

// 循環(huán)給li添加新的類名
for (var i =0; i <$('li').length; i++) {
$('li').eq(i).attr('class', classNameArr[i]);
}

左按鈕

classNameArr.push(classNameArr.shift());

防騷擾操作：判斷l(xiāng)i標(biāo)簽是否處于運(yùn)動狀態(tài)，如果是，那么事件函數(shù)不往下執(zhí)行，使用return返回。

// 防騷擾
if ($('li').is(':animated')) {
return;
}

源碼

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<script src="./js/jquery-1.8.3.js"></script>
<style>
 * {
  margin: 0;
  padding: 0;
 }

 ul {
  list-style: none;
 }

 .box {
  position: relative;
  width: 670px;
  height: 325px;
  background: url(./img/pic_bg.gif)no-repeat;
  margin: 100px auto;
  /*overflow: hidden;*/
 }

 .box .btn a {
  position: absolute;
  width: 41px;
  height: 41px;
   background: #f00;
  top: 151px;
 }

 .box .btn .btn_left {
  left: 25px;
 }

 .box .btn .btn_you {
  right: 25px;
 }

 .box .imgs li {
  position: absolute;
 }

 .box .imgs .no0 {
  width: 80px;
  height: 50px;
  left: -90px;
  top: 72px;
 }

 .box .imgs .no1 {
  width: 90px;
  height: 60px;
  left: 14px;
  top: 62px;
 }

 .box .imgs .no2 {
  width: 110px;
  height: 80px;
  left: 118px;
  top: 43px;
 }

 .box .imgs .no3 {
  width: 150px;
  height: 100px;
  left: 253px;
  top: 22px;
 }

 .box .imgs .no4 {
  width: 110px;
  height: 80px;
  left: 433px;
  top: 43px;
 }

 .box .imgs .no5 {
  width: 90px;
  height: 60px;
  left: 564px;
  top: 62px;
 }

 .box .imgs .no6 {
  width: 80px;
  height: 50px;
  left: 680px;
  top: 72px;
 }

 .box .imgs li img {
  width: 100%;
  height: 100%;
 }
</style>

<body>
 <div class="box">
  <div class="btn">
   <a href="javascript:;" class="btn_left"></a>
   <a href="javasvript:;" class="btn_you"></a>
  </div>
  <ul class="imgs">
   <li class="no0"><a href="#" ><img src="img/0.png"></a></li>
   <li class="no1"><a href="#" ><img src="img/1.png"></a></li>
   <li class="no2"><a href="#" ><img src="img/2.png"></a></li>
   <li class="no3"><a href="#" ><img src="img/3.png"></a></li>
   <li class="no4"><a href="#" ><img src="img/4.png"></a></li>
   <li class="no5"><a href="#" ><img src="img/5.png"></a></li>
   <li class="no6"><a href="#" ><img src="img/6.png"></a></li>
  </ul>
 </div>
</body>
<script>
 // 定義一個數(shù)組，接收每個位置的css樣式對象
 var styleArr = [];
 // 遍歷數(shù)組添加樣式對象
 for (var i = 0; i < $('li').length; i++) {
  // push 方法 將新元素追加到一個數(shù)組中
  styleArr.push({
   "width": $('li').eq(i).css('width'),
   "height": $('li').eq(i).css('height'),
   "left": $('li').eq(i).css('left'),
   "top": $('li').eq(i).css('top')
  });
 }
  console.log(styleArr);
//
 // 建立類名數(shù)組
 var classNameArr = [];
 // 遍歷添加類名
 for (var i = 0; i < $('li').length; i++) {
  classNameArr.push($('li').eq(i).attr('class'));
 }
 console.log(classNameArr);
//
// // 右按鈕事件
 $('.btn_you').click(function () {
  // 防騷擾
  if ($('li').is(':animated')) {
   return;
  }
  // 后面的元素走到前面上一個位置
  for (var i = 1; i < $('li').length; i++) {
   $('.no' + i).animate(styleArr[i - 1], 300)
  }
  // 0位置的li直接更改css樣式，切換到6的位置
  $('.no0').css(styleArr[6], 300);

  //運(yùn)動結(jié)束后，要讓li的類名和位置統(tǒng)一，切換類名
  classNameArr.unshift(classNameArr.pop());
  // console.log(classNameArr);

  // 循環(huán)給li添加新的類名
  for (var i = 0; i < $('li').length; i++) {
   $('li').eq(i).attr('class', classNameArr[i]);
  }
 })
//
 // 左按鈕事件
 $('.btn_left').click(function () {
  // 防騷擾
  if ($('li').is(':animated')) {
   return;
  }
  // 后面的元素走到前面上一個位置
  for (var i = 0; i < $('li').length - 1; i++) {
   $('.no' + i).animate(styleArr[i + 1], 300)
  }
  // 6位置的li直接更改css樣式，切換到0的位置
  $('.no6').css(styleArr[0], 300);

  //運(yùn)動結(jié)束后，要讓li的類名和位置統(tǒng)一，切換類名
  classNameArr.push(classNameArr.shift());
  // console.log(classNameArr);

  // 循環(huán)給li添加新的類名
  for (var i = 0; i < $('li').length; i++) {
   $('li').eq(i).attr('class', classNameArr[i]);
  }
 })
</script>

</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: