javascript实现异形滚动轮播
效果：
完整代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&...
效果：
完整代码：
<!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="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.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="http://www.duanlonglong.com/uploads/190217/1-1Z21G145363c.jpg"></a></li>
<li class="no1"><a href="#" ><img src="http://www.duanlonglong.com/uploads/190217/1-1Z21G145363c.jpg"></a></li>
<li class="no2"><a href="#" ><img src="http://www.duanlonglong.com/uploads/190217/1-1Z21G145363c.jpg"></a></li>
<li class="no3"><a href="#" ><img src="http://www.duanlonglong.com/uploads/190217/1-1Z21G145363c.jpg"></a></li>
<li class="no4"><a href="#" ><img src="http://www.duanlonglong.com/uploads/190217/1-1Z21G145363c.jpg"></a></li>
<li class="no5"><a href="#" ><img src="http://www.duanlonglong.com/uploads/190217/1-1Z21G145363c.jpg"></a></li>
<li class="no6"><a href="#" ><img src="http://www.duanlonglong.com/uploads/190217/1-1Z21G145363c.jpg"></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>
- 发表于 2020-07-08 21:55
- 阅读 ( 477 )
- 分类：web前端开发
