标签：轮播 auto button 50% js 自动 background rem swiper

js轮播图自动切换和css页面自动渐变

效果如下：

可以去jq官网学习：http://www.jq22.com/
部分代码如下：

	<div class="swiper-container" id="case1">
				  <div class="swiper-wrapper">
					<div class="swiper-slide"><img src="img/t1.png" ></div>
					<div class="swiper-slide"><img src="img/t2.png" ></div>
					<div class="swiper-slide"><img src="img/t4.png" ></div>
				  </div>
				  <!-- 导航按钮 上一页下一页 -->
				  <div class="swiper-button-prev"></div>
				  <div class="swiper-button-next"></div>
				  <!-- 分页器 -->
				  <div class="swiper-pagination"></div>
				  <!-- 滚动条 -->
				   <div class="swiper-scrollbar"></div>
				</div>

<style type="text/css">
			*{margin: 0; padding: 0;}
			 p{text-align: center;}
			 img{ width: 43.75rem;
				 height: 18.125rem;
			}
			 .swiper-container{
				 width: 43.75rem;
				 height: 18.125rem;
				 margin:0 auto;
			 }
			 .swiper-button-next {
			   right: 20px;
			   left: auto;
			 }
			 .swiper-button-prev {
			   left: 20px;
			   right: auto;
			 }
			 /* css定义分页，导航按钮颜色 */
			 #case5{
			     --swiper-theme-color: #ff6600;
			     --swiper-pagination-color: #00ff33;/* 两种都可以 */
			   }
			 #case6 img,#case7 img{transform: scale(0.7);}
			 #case7{
				 width:auto;
			 }
		</style>

var mySwiper = new Swiper('#case1', {
			autoplay: true,//可选选项，自动滑动
			initialSlide :1,//默认显示第二张图片索引从0开始
			speed:2000,//设置过度时间
			/* grabCursor: true,//鼠标样式根据浏览器不同而定 */
			 autoplay : {
				delay:3000
			  },                 /*  设置每隔3000毫秒切换 */
			<!-- 分页器 -->
			 pagination: {
				  el: '.swiper-pagination',
				  clickable :true,
				},
			<!-- 导航按钮 上一页下一页 -->
			 navigation: {
				  nextEl: '.swiper-button-next',
				  prevEl: '.swiper-button-prev',
				},
			<!-- 滚动条 -->
			 scrollbar: {
				  el: '.swiper-scrollbar',
				  hide:true,
				},
			/*  设置当鼠标移入图片时是否停止轮播*/
			autoplay: {
				disableOnInteraction: false,
			  },
		});
	</script>

css 页面自动渐变 效果如下：

     <div class="btn">
	    <p>自动渐变颜色</p>
 </div>

<style>
		body
		{
		  margin: 0;
		  padding: 0;
		  background: linear-gradient(70deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);  
		  background-size: 400%;
		  animation: bganimation 5s infinite;
		}
		.btn
		{
		  color: white;
		  text-align: center;
		  text-transform: uppercase;
		  margin: 400px 0;
		  font-size: 22px;
		}	 
		@keyframes bganimation 
		{
		  0%{
		    background-position: 50% 50%;
		  }
		  50%{
		    background-position: 100% 100%;
		  }
		  100%{
		    background-position: 50% 50%;
		  }
		}		
	</style>	

标签：轮播,auto,button,50%,js,自动,background,rem,swiper
来源： https://blog.csdn.net/juxueliang1314/article/details/106772814

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。