javascript实现异形滚动轮播

效果:

attachments-2020-07-Ej4C9Ro15f05d02cea320.png

完整代码:
<!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>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.duanlonglong.com/qdjy/472.html