溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下javascript如何實現異形滾動輪播，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
具體內容如下
運動過程研究
讓每個元素走到前一個標簽的位置。
3走到2
2走到1
1走到0
0走到6
利用js動態獲取每個類名對應的css樣式對象，組成一個新數組。
// 定義一個新數組，接收每個位置的css樣式對象
var styleArr = [];
// 遍歷數組添加樣式對象
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方法發生移動：
animate(params,[speed],[easing],[fn])
params:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合
speed:三種預定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)
easing:要使用的擦除效果的名稱(需要插件支持).默認jQuery提供"linear" 和 “swing”.
fn:在動畫完成時執行的函數，每個元素執行一次。
// 右按鈕事件
$('.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);
})問題：樣式和對應的類名不統一，不能進行第二次運動。
解決方法：進行對應位置的類名輪換。
可以將7個類名放在數組中，每次實現將最后一項刪除，添加到第一項。
pop 方法
從數組中移除最后一個元素并將該元素返回
push 方法
將新元素追加到一個數組中，并返回數組的新長度。
shift 方法
從數組中移除第一個元素并將返回該元素。
unshift 方法
在數組的開頭插入新元素。
//運動結束后，要讓li的類名和位置統一，切換類名 classNameArr.unshift(classNameArr.pop());
將得到新數組中的類名賦值給對應li標簽。
// 循環給li添加新的類名
for (var i =0; i <$('li').length; i++) {
$('li').eq(i).attr('class', classNameArr[i]);
}左按鈕
classNameArr.push(classNameArr.shift());
防騷擾操作：判斷li標簽是否處于運動狀態，如果是，那么事件函數不往下執行，使用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>
// 定義一個數組，接收每個位置的css樣式對象
var styleArr = [];
// 遍歷數組添加樣式對象
for (var i = 0; i < $('li').length; i++) {
// push 方法 將新元素追加到一個數組中
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);
//
// 建立類名數組
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);
//運動結束后，要讓li的類名和位置統一，切換類名
classNameArr.unshift(classNameArr.pop());
// console.log(classNameArr);
// 循環給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);
//運動結束后，要讓li的類名和位置統一，切換類名
classNameArr.push(classNameArr.shift());
// console.log(classNameArr);
// 循環給li添加新的類名
for (var i = 0; i < $('li').length; i++) {
$('li').eq(i).attr('class', classNameArr[i]);
}
})
</script>
</html>以上是“javascript如何實現異形滾動輪播”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
