编程 Javascript

javascript实现异形滚动轮播

Posted in Javascript onNovember 28, 2019

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

运动过程研究

让每个元素走到前一个标签的位置。
3走到2
2走到1
1走到0
0走到6

javascript实现异形滚动轮播

利用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);
 })

问题：样式和对应的类名不统一，不能进行第二次运动。

解决方法：进行对应位置的类名轮换。

javascript实现异形滚动轮播

可以将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实现异形滚动轮播

- Author -

Maybion

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery 全选效果实现代码

Mar 23 Javascript

JS判断两个时间大小的示例代码

Jan 28 Javascript

javascript 原型链维护和继承详解

Nov 26 Javascript

JavaScript中的toString()和toLocaleString()方法的区别

Feb 15 Javascript

Angular.JS内置服务$http对数据库的增删改使用教程

May 07 Javascript

jQuery ajax读取本地json文件的实例

Oct 31 jQuery

Vue-CLI 3.X 部署项目至生产服务器的方法

Mar 22 Javascript

深入剖析JavaScript instanceof 运算符

Jun 14 Javascript

快速对接payjq的个人微信支付接口过程解析

Aug 15 Javascript

js实现秒表计时器

Dec 16 Javascript

vue实现的封装全局filter并统一管理操作示例

Feb 02 Javascript

前端实现滑动按钮AJAX与后端交互的示例代码

Feb 24 Javascript

javascript实现切割轮播效果

Nov 28 #Javascript

javascript实现商品图片放大镜

Nov 28 #Javascript

javascript实现视频弹幕效果（两个版本）

Nov 28 #Javascript

javascript实现弹幕墙效果

Nov 28 #Javascript

jquery实现直播弹幕效果

Nov 28 #jQuery

jQuery实现简单弹幕效果

Nov 28 #jQuery

微信小程序事件流原理解析

Nov 27 #Javascript