用js自己写一个旋转轮播插件(兼容ie)--防抖节流

已于 2022-03-15 18:26:26 修改
阅读量342 收藏
点赞数
分类专栏： js效果 文章标签： javascript css css3
于 2020-08-03 14:51:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37787674/article/details/107762944
版权 
<style>
.section_2{
	.yuan{
		height: 100%;
		.list{
			width:31.25%;padding-bottom: 31.25%;left: 80px;    border-radius: 50%;border: 1px solid $colmain2;background-image: url(../images/logo1.png);background-position: center;background-repeat: no-repeat;
			position: relative;
			&::after{
				content: '';position: absolute;width: 110%;background: url(../images/yuan_bg.png) center center no-repeat;background-size: 100%;left: -10%;top: -5%;height: 110%;z-index: -1;
			}
			.ul{margin: 0;}
			li{
				width: 17.5%;padding-bottom: 17.5%;position: absolute;right: 0;top: 0;transition: all 0.3s;-o-transition: all 0.3s;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;
				border-radius: 50%;background-color: $colmain2;
				.backcon{
					position: absolute;width: 80%;height: 80%;left: 10%;top: 10%;
				}
				.pic2{display: none;}
			}
			li.cur{
				transform: scale(1.4);-webkit-transform: scale(1.4);-o-transform: scale(1.4);-ms-transform: scale(1.4);-moz-transform: scale(1.4);box-shadow: 0 4px 22px #aaa;
				.pic{
					display: none;
				}
				.pic2{
					display: block;
				}
			}
			li:nth-child(1){
				right: 50%;top: -8%;
			}
			li:nth-child(2){
				right: 8%;top: 4%;
			}
			li:nth-child(3){
				right: -9%;top: 41%;
			}
			li:nth-child(4){
				right: 8%;top: 78%;
			}
			li:nth-child(5){
				right: 51%;top: 89%;
			}
			li:nth-child(6){
				right: 85%;top: 64%;
			}
			li:nth-child(7){
				right: 86%;top: 19%;
			}
		}
		.widr{
			width: 49.3%;line-height: 36px;color: #737373;
			.tit{
				img{
					vertical-align: text-bottom;
				}
			}
			.details{margin-top: 9%;}
			.btnto{display: inline-block;border: 2px solid $colmain2;color: $colmain2;padding: 1.8% 6.5%;border-radius: 30px;margin-top: 9.2%;}
			.item{display: none;}
			.item.cur{display: block;}
		}
	}
}
</style>
<section class="section_2 section">
        <div class="section_bg">
          <div class="yuan contents">
            <div class="tb">
              <div class="tbc">
                <div class="list fl">
                  <ul class="ul">
                    <li class="nav_link cur">
                      <div class="pic backcon" style="background-image: url(../uploadfiles/index/yuan1.png);"></div>
                      <div class="pic2 backcon" style="background-image: url(../uploadfiles/index/yuan1s.png);"></div>
                    </li>
                    <li class="nav_link">
                      <div class="pic backcon" style="background-image: url(../uploadfiles/index/yuan2.png);"></div>
                      <div class="pic2 backcon" style="background-image: url(../uploadfiles/index/yuan2s.png);"></div>
                    </li>
                    <li class="nav_link">
                      <div class="pic backcon" style="background-image: url(../uploadfiles/index/yuan3.png);"></div>
                      <div class="pic2 backcon" style="background-image: url(../uploadfiles/index/yuan3s.png);"></div>
                    </li>
                    <li class="nav_link">
                      <div class="pic backcon" style="background-image: url(../uploadfiles/index/yuan4.png);"></div>
                      <div class="pic2 backcon" style="background-image: url(../uploadfiles/index/yuan4s.png);"></div>
                    </li>
                    <li class="nav_link">
                      <div class="pic backcon" style="background-image: url(../uploadfiles/index/yuan5.png);"></div>
                      <div class="pic2 backcon" style="background-image: url(../uploadfiles/index/yuan5s.png);"></div>
                    </li>
                    <li class="nav_link">
                      <div class="pic backcon" style="background-image: url(../uploadfiles/index/yuan6.png);"></div>
                      <div class="pic2 backcon" style="background-image: url(../uploadfiles/index/yuan6s.png);"></div>
                    </li>
                    <li class="nav_link">
                      <div class="pic backcon" style="background-image: url(../uploadfiles/index/yuan7.png);"></div>
                      <div class="pic2 backcon" style="background-image: url(../uploadfiles/index/yuan7s.png);"></div>
                    </li>
                  </ul>
                </div>
                <div class="widr fr">
                  <div class="item cur">
                    <div class="tit font48 zkfont"><img src="../uploadfiles/index/yuan3tit.png" alt=""> 怡可诺</div>
                    <div class="details font22 zkfont">
                      “为消费者提供美味可口食品的承诺”,这是怡可诺自诞生之日起便被赋予的品牌使命，也是上海龙瀚实业有限公司多年来一直秉承的品牌理念。
                      <br>
                      　　 怡可诺以高标准、高品质的筛选原则，在全世界范围内甄选美味优质食品，旨在让品尝到怡可诺的每个人，都能享受到健康快乐的美妙生活。
                    </div>
                    <a href="./02_brand.html" class="btn btnto font16 fontwei colmain2 nav_link">查看更多 &gt;</i></a>
                  </div>
                  <div class="item">
                    <div class="tit font48 zkfont"><img src="../uploadfiles/index/yuan3tit.png" alt=""> 怡可诺2</div>
                    <div class="details font22 zkfont">
                      “为消费者提供美味可口食品的承诺”,这是怡可诺自诞生之日起便被赋予的品牌使命，也是上海龙瀚实业有限公司多年来一直秉承的品牌理念。
                      <br>
                      　　 怡可诺以高标准、高品质的筛选原则，在全世界范围内甄选美味优质食品，旨在让品尝到怡可诺的每个人，都能享受到健康快乐的美妙生活。
                    </div>
                    <a href="./02_brand.html" class="btn btnto font16 fontwei colmain2 nav_link">查看更多 &gt;</i></a>
                  </div>
                  <div class="item">
                    <div class="tit font48 zkfont"><img src="../uploadfiles/index/yuan3tit.png" alt=""> 怡可诺3</div>
                    <div class="details font22 zkfont">
                      “为消费者提供美味可口食品的承诺”,这是怡可诺自诞生之日起便被赋予的品牌使命，也是上海龙瀚实业有限公司多年来一直秉承的品牌理念。
                      <br>
                      　　 怡可诺以高标准、高品质的筛选原则，在全世界范围内甄选美味优质食品，旨在让品尝到怡可诺的每个人，都能享受到健康快乐的美妙生活。
                    </div>
                    <a href="./02_brand.html" class="btn btnto font16 fontwei colmain2 nav_link">查看更多 &gt;</i></a>
                  </div>
                  <div class="item">
                    <div class="tit font48 zkfont"><img src="../uploadfiles/index/yuan3tit.png" alt=""> 怡可诺4</div>
                    <div class="details font22 zkfont">
                      “为消费者提供美味可口食品的承诺”,这是怡可诺自诞生之日起便被赋予的品牌使命，也是上海龙瀚实业有限公司多年来一直秉承的品牌理念。
                      <br>
                      　　 怡可诺以高标准、高品质的筛选原则，在全世界范围内甄选美味优质食品，旨在让品尝到怡可诺的每个人，都能享受到健康快乐的美妙生活。
                    </div>
                    <a href="./02_brand.html" class="btn btnto font16 fontwei colmain2 nav_link">查看更多 &gt;</i></a>
                  </div>
                  <div class="item">
                    <div class="tit font48 zkfont"><img src="../uploadfiles/index/yuan3tit.png" alt=""> 怡可诺5</div>
                    <div class="details font22 zkfont">
                      “为消费者提供美味可口食品的承诺”,这是怡可诺自诞生之日起便被赋予的品牌使命，也是上海龙瀚实业有限公司多年来一直秉承的品牌理念。
                      <br>
                      　　 怡可诺以高标准、高品质的筛选原则，在全世界范围内甄选美味优质食品，旨在让品尝到怡可诺的每个人，都能享受到健康快乐的美妙生活。
                    </div>
                    <a href="./02_brand.html" class="btn btnto font16 fontwei colmain2 nav_link">查看更多 &gt;</i></a>
                  </div>
                  <div class="item">
                    <div class="tit font48 zkfont"><img src="../uploadfiles/index/yuan3tit.png" alt=""> 怡可诺6</div>
                    <div class="details font22 zkfont">
                      “为消费者提供美味可口食品的承诺”,这是怡可诺自诞生之日起便被赋予的品牌使命，也是上海龙瀚实业有限公司多年来一直秉承的品牌理念。
                      <br>
                      　　 怡可诺以高标准、高品质的筛选原则，在全世界范围内甄选美味优质食品，旨在让品尝到怡可诺的每个人，都能享受到健康快乐的美妙生活。
                    </div>
                    <a href="./02_brand.html" class="btn btnto font16 fontwei colmain2 nav_link">查看更多 &gt;</i></a>
                  </div>
                  <div class="item">
                    <div class="tit font48 zkfont"><img src="../uploadfiles/index/yuan3tit.png" alt=""> 怡可诺7</div>
                    <div class="details font22 zkfont">
                      “为消费者提供美味可口食品的承诺”,这是怡可诺自诞生之日起便被赋予的品牌使命，也是上海龙瀚实业有限公司多年来一直秉承的品牌理念。
                      <br>
                      　　 怡可诺以高标准、高品质的筛选原则，在全世界范围内甄选美味优质食品，旨在让品尝到怡可诺的每个人，都能享受到健康快乐的美妙生活。
                    </div>
                    <a href="./02_brand.html" class="btn btnto font16 fontwei colmain2 nav_link">查看更多 &gt;</i></a>
                  </div>
                </div>
                <div class="clear clearfix"></div>
              </div>
            </div>
          </div>
        </div>
        <!--slide end-->
  </section>
  
  <script>
    var s1 = 0;
    var time_section_2 = setInterval(function () {
      if (s1 < 7) {
        $('.section_2 .list .ul li').removeClass('cur').eq(s1).addClass('cur');
        $('.section_2 .widr .item').removeClass('cur').eq(s1).addClass('cur');
        s1++;
      } else {
        s1 = 0;
        $('.section_2 .list .ul li').removeClass('cur').eq(s1).addClass('cur');
        $('.section_2 .widr .item').removeClass('cur').eq(s1).addClass('cur');
      }
    }, 3000);
    $('.section_2 .list .ul li').on('click', function () {
      s1 = $(this).index();
      clearInterval(time_section_2);
      time_section_2 = setInterval(function () {
        if (s1 < 7) {
          $('.section_2 .list .ul li').removeClass('cur').eq(s1).addClass('cur');
          $('.section_2 .widr .item').removeClass('cur').eq(s1).addClass('cur');
          s1++;
        } else {
          s1 = 0;
          $('.section_2 .list .ul li').removeClass('cur').eq(s1).addClass('cur');
          $('.section_2 .widr .item').removeClass('cur').eq(s1).addClass('cur');
        }
      }, 3000);
      $('.section_2 .list .ul li').removeClass('cur').eq($(this).index()).addClass('cur');
      $('.section_2 .widr .item').removeClass('cur').eq($(this).index()).addClass('cur');
    })
  </script>

下面给出一个自定义顺序的js方法

function shunxu(){
		var arr =[];
		$("#listw li").each(function(i){
			arr.push(i);
		})
		var time_section_2 = setInterval(function () {
			if(s1==arr.length){
				s1=0
				for(var i=0;i<=arr.length;i++){
					if((i+s1)<arr.length){
						$("#listw li").eq(i).attr('class','weiz'+arr[i+s1]+'')
					}else{
						$("#listw li").eq(i).attr('class','weiz'+arr[(i+s1)-arr.length]+'')
					}
				}
				s1++
			}else{
				for(var i=0;i<=arr.length;i++){
					if((i+s1)<arr.length){
						$("#listw li").eq(i).attr('class','weiz'+arr[i+s1]+'')
					}else{
						$("#listw li").eq(i).attr('class','weiz'+arr[(i+s1)-arr.length]+'')
					}
				}
				s1++;
			}
		}, 3000);
}

节流 && 防抖

//节流
throttle(delay) { 
	if (!this.timer) { 
	    this.timer = setTimeout(() => { 
	        console.log('执行节流')
	        this.onClickSearch()
	        this.timer = null; 
	    }, delay); 
	}
}
// 防抖
throttle(delay) { 
    this.timer&&clearTimeout(this.timer)
	this.timer = setTimeout(() => { 
	   console.log('执行防抖')
	    this.onClickSearch()
	    this.timer = null; 
	}, delay); 
}
作泥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
轮播实现
weshouldhelp的博客
09-11 325
jquery-3.1.1.min.js版本，图片大小为1080px*432px &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;jQuery焦点图蓝色箭头按钮切换代码 - 站长素材&lt;/title&gt;     
兼容IE8的jQuery旋转木马幻灯片插件
IT_wogua的博客
04-02 569
Carousel.js是一款简单实用的jQuery旋转木马幻灯片插件。该旋转木马插件兼容IE8浏览器，可用于制作电影海报的3D旋转切换特效等。 使用方法 在页面中引入jquery和Carousel.js文件。 &lt;script src="js/jquery-1.9.1.min.js"&gt;&lt;/script&gt; &lt;script src="js/Carousel.js...
js-throttle-debounce:一个 javascript 原型插件提供了节流和去抖动方法
06-24
js-油门去抖动 一个 javascript 原型插件提供了节流和去抖动方法。 这是指 下载 安装 您还可以使用 Bower 安装 js-throttle-debounce。 bower install js-throttle-debounce 对于 node.js，你可以使用这个命令来安装： npm install js-throttle-debounce 演示 用法 你可以这样使用：JavaScript function yourMethod ( ) { // ... } var throttle = yourMethod . throttle ( ) ; var throttleIgnoreLast = yourMethod . throttle ( 500 , true ) ; var debounce = yourMethod . debounce ( 10
Javascript兼容IE8
Tas的博客
09-03 6547
Javascript兼容IE8今天帮助女票解决了一个js兼容ie8的问题，记录一下。 有时候我们发现在Chrome或者高版本的IE下运行得好好的代码，到ie8下却出错了，这很尴尬，特别是js。js一旦出错，那么下面的代码就统统不会运行了。 就如我们这次遇到的情况，我们使用了DateTimePicker日期控件，其中用到了Indexof()这个函数，然而ie并不支持，所以导致了后面用js生成的表格
原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)
weixin_30832351的博客
09-28 177
项目要求页面兼容IE6,7,8等浏览器，我们可能会遇到这个轮播效果，轮播板块要求：无限循环、自动轮播和手动切换功能，每一次滚动一小格，网上有很多这类插件，例如:swiper等！ 但是很多都是不兼容IE6,7,8这些低级浏览器的，没有办法，只能自己写一个类似的轮播插件 废话不多说，直接上代码 1 <!DOCTYPE html> 2 <html> 3 ...
兼容IE8的jQuery宽屏幻灯片轮播插件.zip
07-11
兼容IE8的jQuery宽屏幻灯片轮播插件是一款兼容性很好的，使用非常简单的网站焦点图代码。
JS编写兼容IE6,7,8浏览器无缝自动轮播
12-02
但是很多都是不兼容IE6,7,8这些低级浏览器的，没有办法，只能自己写一个类似的轮播插件 废话不多说，直接上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>&lt...
vue轮播图插件vue-awesome-swiper
11-28
轮播图插件，可以同时支持Vue.js（1.X ~ 2.X），兼顾PC和移动端，SPA和SSR。 例子 例子 安装设置 安装Install vue-awesome-swiper npm install vue-awesome-swiper --save vue挂载 // import import Vue from '...
vue轮播图插件vue-awesome-swiper的使用代码实例
08-30
本篇文章主要介绍了vue轮播图插件vue-awesome-swiper的使用代码实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue轮播图插件vue-concise-slider的使用
11-28
vue-concise-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页,同时兼容移动端和PC端 版本 v2.4.7 支持vue2.0+ 特点 简单配置 轻量 (~24kB gzipped) 多种滑动样式 目前已实现 全屏自适应 移动端...
带跑马灯效果的大转盘抽奖 前端js 代码
04-12
带跑马灯效果的大转盘抽奖 前端js 代码；带跑马灯效果的大转盘抽奖 前端js 代码；
js旋转插件jquery.rotate
11-13
js旋转插件jquery.rotate
jquery旋转插件
05-31
需要先引用基础jquery类库 然后在引用这个 最后 //演示1 //旋转45angle $(document.body).click(function () { //方式1 $('.divOne').rotate(45); //方式2 $('.divOne').rotate({ angle: 45 }); }); ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 //演示2 //鼠标移动效果 //方式1 $('.divOne').rotate({ bind: { mouseover: function () { $(this).rotate({ animateTo: 180 }); }, mouseout: function () { $(this).rotate({ animateTo: 0 }); } } }); //方式2 $('.divOne').mouseover(function () { $(this).rotate({ animateTo: 180 }); }).mouseout(function () { $(this).rotate({animateTo:0}); }); ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 //演示3 不停旋转 //方式1 var angle = 0; setInterval(function () { angle += 3; $('.divOne').rotate(angle); }, 50); //方式2 var rotation = function () { $('.divOne').rotate({ angle: 0, animateTo: 360, callback:rotation }) } rotation(); //方式3 var rotation = function () { $('.divOne').rotate({ angle: 0, animateTo: 360, callback: rotation, easing: function (x, t, b, c, d) { return c * (t / d) + b; } }) } rotation(); ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 //演示4 点击旋转 //方式1 $('.divOne').click(function () { $(this).rotate({ angle: 0, animateTo: 180, easing: $.easing.easeInOutExpo }); }); var val = 0; $('.divOne').click(function () { val += 90; $(this).rotate({ animateTo: val }); });
函数的节流(throttle)
song17631538490的博客
12-27 1457
浏览器中某些计算和处理要比其他的昂贵的多。例如，DOM操作比起非DOM交互需要更多的内存和CPU时间。连续尝试进行过多的DOM相关操作可能会导致浏览器挂起，有时候甚至会崩溃。为了绕开这个问题，你可以使用定时器对该函数进行节流操作。我们应该可以很容易的发现，其实时间戳版和定时器版的节流函数的区别就是，时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。通过以上操作就可以实现函数的节流(throttle)。
JS案例--旋转木马轮播
Dcripple的博客
10-10 528
效果： 每张图片排列的位置是以中间为对称的。图片大小，透明度不相同，但对称的图片的样式是相同的，呈现出一种立体的轮播效果。 轮播动态效果图： 先看看代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>旋转木马轮播图</title> <link rel="stylesheet" href="css..
vue3 js+css实现旋转木马式轮播
dnvtkhbn的博客
11-01 881
旋转木马轮播图
js图片旋转功能插件
bj123467的博客
03-13 343
主要使用了viewer功能。
用JavaScript实现旋转轮播图
sinat_25017107的博客
08-18 788
旋转轮播图最近一直在学习JavaScript，然后看到旋转轮播图的案例，就尝试着用js做了一个简单的轮播图，因为无法显示动态效果，所以就放个截图： 这个效果是这样的：一共有7张图片，它们会自动地向左滑动，然后左右箭头也可以控制轮播图的左滑和右滑，同时，如果鼠标停在图片上，那么轮播图会停止自动滑动，当鼠标移开时，将会继续向左轮播。 首先，我这里封装了两个函数（因为暂且还没有学
三种js轮播实现方式详解（看一遍就会）
adminsir0的博客
08-29 9598
js，轮播，轮播图，滚动，定位，滚动条，src，替换，定时器，
用JS代码写一个网页轮播图
最新发布
05-18
好的，以下是一个基于 JavaScript 的网页轮播图的代码实现： HTML 代码： ```html ``` CSS 代码： ```css .slider { position: relative; width: 100%; height: 500px; overflow: hidden; } ....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值