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 相关文章推荐
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
Feb 05 Javascript
一个不错的应用,用于提交获取文章内容,不推荐用
Mar 03 Javascript
js 窗口抖动示例
Sep 04 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
Apr 30 Javascript
纯js实现手风琴效果
Apr 17 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
webpack的tree shaking的实现方法
Sep 18 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 Javascript
js实现表格数据搜索
Aug 09 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
You might like
深入array multisort排序原理的详解
2013/06/18 PHP
PHP7.1新功能之Nullable Type用法分析
2016/09/26 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
js实现一个简易计算器
2020/03/30 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
python设置值及NaN值处理方法
2018/07/03 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
python matplotlib拟合直线的实现
2019/11/19 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
Servlet面试题库
2015/07/18 面试题
护理学专业推荐信
2013/12/03 职场文书
班队活动设计方案
2014/01/30 职场文书
报关专员求职信范文
2014/02/22 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
捐款仪式主持词
2015/07/04 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android