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>