javascript实现异形滚动轮播

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

这篇文章主要为大家详细介绍了javascript实现异形滚动轮播，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js异形滚动轮播的具体代码，供大家参考，具体内容如下

运动过程研究

让每个元素走到前一个标签的位置。
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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js
轮播

List the Codec Files on a Computer
List the Codec Files on a Computer...
2007-06-06
JS设计模式之访问者模式的用法详解
JS访问者模式是一种行为型设计模式,用于将算法与对象结构分离, 该模式允许你定义新的操作（访问者）而无需修改现有对象结构（被访问者）, 通过这种方式,你可以在不改变对象结构的情况下添加新的操作,本文就给大家详细的讲讲JS访问者模式的用法
2023-08-08
js报$ is not a function 的问题的解决方法
在html中的程序，跑的好好的，换成jsp在项目中跑，就一直报$ is not a function错，针对此问题，下面有个不错的解决方法，大家可以尝试操作下
2014-01-01
Javascript中的async函数详解
这篇文章主要为大家详细介绍了Javascript中的async函数，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
提高团队代码质量利器ESLint及Prettier详解
这篇文章主要为大家介绍了提高团队代码质量利器ESLint及Prettier使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
JS 验证码功能的三种实现方式
这篇文章主要介绍了验证码功能的三种实现方式,分为数字短信验证码，图形验证码，滑动验证码，本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-11-11
Javascript 获取鼠标当前的位置实现方法
这篇文章主要介绍了Javascript 获取鼠标当前的位置实现方法的相关资料,需要的朋友可以参考下
2016-10-10
JavaScript ES6解构运算符的理解和运用
在ES6属性中新增了两个属性,分别是解构和…运算符,下面这篇文章主要给大家介绍了关于JavaScript ES6解构运算符的理解和运用,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2021-10-10
Mvc提交表单的四种方法全程详解
本文给大家介绍mvc提交表单的四种方法，分别是MVC HtmlHelper方法，传统Form表单Aciton属性提交，Jquery+Ajax 提交表单，MVC Controller控制器和表单参数传递，介绍的非常详细，需要的朋友参考下
2016-08-08
深入理解JavaScript事件机制
事件机制是几乎所有开发语言都有的机制，并不是deviceone的独创，在某些语言称之为消息(Event),有些地方称之为(Message).接下来通过本文给大家介绍JS事件机制的理解，需要的朋友一起学习吧
2023-04-04