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

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>