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 相关文章推荐
javascript使用location.search的示例
Nov 05 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
Node.js pipe实现源码解析
Aug 12 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
react基本安装与测试示例
Apr 27 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 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
提升PHP执行速度全攻略
2006/10/09 PHP
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
详解vue中使用微信jssdk
2019/04/19 Javascript
python中数据爬虫requests库使用方法详解
2018/02/11 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
浅谈python标准库--functools.partial
2019/03/13 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
《夸父追日》教学反思
2014/02/26 职场文书
分层教学实施方案
2014/03/19 职场文书
经典团队口号
2014/06/06 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
团拜会主持词
2015/07/04 职场文书
运动会广播稿50字
2015/08/19 职场文书
初中美术教学反思
2016/02/17 职场文书
话题作文之呼唤
2019/12/18 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
python使用torch随机初始化参数
2022/03/22 Python
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers
Redis批量生成数据的实现
2022/06/05 Redis
深入理解pytorch库的dockerfile
2022/06/10 Python