整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          純CSS實現輪播圖效果,你不知道的CSS3黑科技


          輪播圖已經是一個很常見的東西,尤其是在各大App的首頁頂部欄,經常會輪番顯示不同的圖片。

          一提到輪播圖如何實現時,很多人的第一反應就是使用Javascript的定時器,當然這種方法是可以實現的。不過就是有些繁瑣,今天這篇文章我們來看看如何不用Javascript,而使用純CSS代碼去實現輪播圖吧。

          這篇文章的所有代碼我都放在了github上,感興趣的同學可以去看看。

          https://github.com/zhouxiongking/article-pages/blob/master/articles/carousel/carousel.html

          CSS

          實現效果

          首先我們來看看只使用CSS實現的輪播圖效果。

          實現效果圖

          具體分析

          看到上述的實現效果后,我們來具體分析下頁面的構成。

          • 頁面在布局上首先要有5張圖片,圖片固定寬度。

          • 每張圖片對應一個標題,標題通過ul>li實現,事先算好寬度,跟隨圖片一起滾動。

          • 下邊有個1,2,3,4,5表示圖片順序的索引,鼠標放上去后會顯示對應的圖片。

          HTML頁面

          接下來我們通過代碼層面去看看整個效果是如何實現的。

          首先來看看HTML頁面的實現,代碼中都有每個區域的描述。

          HTML頁面

          CSS部分

          實現這個效果主要是通過CSS代碼的,其代碼量比較大,我們分開來看。

          • 外層容器

          對于最外層容器我們設置絕對定位,方便圖片標題子元素的定位。

          外層容器

          • 圖片標題

          對于圖片的標題我們也采用絕對定位,并且讓標題橫向一行展示,方便在動畫的時候直接橫向滾動。

          得到的代碼如下所示。

          圖片標題

          • 圖片與圖片容器

          接下來是設置圖片容器屬性以及圖片的基本大小。

          圖片容器也采用絕對定位,寬度可以動態設置,根據圖片數量計算。每張圖片設置寬度與高度,得到的代碼如下。

          圖片與圖片容器

          • 圖片動畫效果

          然后設置圖片的動畫效果,對于任意的圖片都有進入和靜止兩個狀態,中間的效果可以任意定制。

          在這里,中間效果設置成5%的間隔,其他時間在進行位置的切換,因為圖片是處于水平分布,通過設置margin-left的值為負數進行偏移即可。

          圖片動畫效果

          • 數字索引的基本屬性

          對于下面的數字圖標也是通過基本的CSS屬性進行設置的,包括寬高,行高,透明度等等。

          在鼠標移動到對應的數字上后,數字會顯示不同的顏色。而且在鼠標停留在數字上后,動畫效果會暫停。

          數字索引基本屬性

          • 數字索引的偏移量

          因為數字是水平方向展示的,因此要設定每個數字的水平偏移量。

          數字水平偏移量

          • 鼠標停在數字上的動畫效果

          然后就是處理鼠標停留在數字上的動畫效果,因為每張圖片對應特定的數字,需要計算出每次的動畫開始位置和結束位置。

          鼠標停在數字上的動畫效果

          • 動畫效果賦予指定的數字

          最后一步就是將定義的動畫效果賦予指定的數字上,每個數字都有特定的id。得到的代碼如下。

          動畫效果賦予指定的數字

          至此所有步驟完成了,就可以得到文章開始的動畫效果了。

          結束語

          這篇文章完全通過CSS實現了一個輪播圖的效果,相比于使用JS來說減少頁面阻塞程度,效果更好。

          說一下需要的知識 setinterval函數,明白document. getelementsById是什么意思。

          輪播呈現方式多種多樣,鄙人在這里給出一個比較low的方法,若有大神指教,不甚感激!

          思路:

          1、在body里面設置一個img標簽,src路徑暫且不設置,并給img標簽設置id。

          2、寫一個function函數,里面設置src隨著某種變量而改變的條件。

          下面擼代碼!!!


          1. <!DOCTYPE html>
          2. <html>
          3. <head>
          4. <meta charset="utf-8" />
          5. <title></title>
          6. </head>
          7. <body>
          8. <img id = "image"/>
          9. <script >
          10. function $(id){
          11. return document.getElementById(id);
          12. }
          13. var index=1;
          14. function setSrc(){
          15. $("image").src="./img/"+index+".png";
          16. ++index;
          17. if(index==3){
          18. index=1;
          19. }
          20. }
          21. setSrc();
          22. setInterval("setSrc()",500);
          23. </script>
          24. </body>
          25. </html>

          在這里我采用了投機取巧的方式,我的圖片名都是:

          讀者可以按照需要改變一下函數的結構

          體代碼如下:

          <!DOCTYPE html>
          <html>
          	<head>
          		<meta charset="UTF-8">
          		<title></title>
          		<style>
          			*{margin: 0;
          			padding: 0;}
          #box {
          	width: 100%;
          	height: 502px;
          	overflow: hidden;/*溢出的部分:隱藏*/
          }
          
          #box .menu {
          	width: 607%;
          	position: relative;
          	margin-left: -40px;/*左外邊距*/
          	bottom: 0px;/*低邊距離*/
          
          }
          
          #box .menu ul li {
          	float: left;/*浮動:左,就是要把圖片往左浮動*/
          	list-style: none;
          }
          
          
          
          
          		</style>
          	</head>
          	<body>
          		<div id="box"><!--最外的大盒子-->
          			<div class="menu"><!--這里是寫入我們要播放的圖片-->
          				<ul><!--無序列表-->
          					<li><img src="image/01.jpg" width="1546px;" height="500px"></li>
          					<li><img src="image/02.jpg" width="1546px;" height="500px"></li>
                              <li><img src="image/03.jpg" width="1546px;" height="500px"></li>
                              <li><img src="image/04.jpg" width="1546px;" height="500px"></li>
                              <li><img src="image/05.jpg" width="1546px;" height="500px"></li>
                              <li><img src="image/06.jpg" width="1546px;" height="500px"></li>
          				</ul>
          			</div>
          			
          		</div>
          		<!--在這里導入javascript文件也就是js代碼,如果沒有這個就沒有動畫-->
          		<script src="jquery-3.4.1.min.js" type="text/javascript"></script>
          		<!--寫代碼-->
                  <script>
          //      	function就是函數執行
                  	$(function(){
                  		//一般獲取元素用var,從第一張圖片開始
                  		var _index=0,  
          //        		 窗口寬度,就是把所有圖片放在水平線上的總寬度
                  		window_width=1546, 
                  		//時間循環
                  		timer=null,  
                  		//圖片內容一共六張
                  		images_count=6;
                  		//獲取下一個
                  		function nextPlay(){
                  			if(_index>images_count-1){//_index指的是每一張圖片
                  				_index=0;//從第一張開始
                  				              //stop() 停留,animate自定義動畫往左運動,
                  				$("#box .menu").stop().animate({left:-window_width*_index},500);
                  			}else{
                  				$("#box .menu").stop().animate({left:-window_width*_index},500);
                  			} 
                  			//每一個圖片加一就是自動按順序出來
                  			_index++;
                  		}
                  		timer=setInterval(nextPlay,2000);
                  	})
                  </script>
          	</body>
          </html>

          javascript文件也就是js文件:鏈接:https://pan.baidu.com/s/1_RUihF6SdA4-NJcqHGqm1g

          提取碼:mnfg


          主站蜘蛛池模板: 亚洲日本一区二区| 无码av免费一区二区三区| 武侠古典一区二区三区中文| 日韩中文字幕精品免费一区| 中文字幕AV无码一区二区三区| 久久精品无码一区二区三区不卡| 日本一区免费电影| 国产观看精品一区二区三区| 高清国产精品人妻一区二区| 天堂资源中文最新版在线一区| 精品国产一区二区三区不卡 | 亚洲国产精品一区二区九九| 在线精品亚洲一区二区三区| 精品人妻码一区二区三区| 性色AV一区二区三区天美传媒| 国产成人av一区二区三区在线观看 | 久久久久99人妻一区二区三区| 日韩一区二区三区射精| 日韩A无码AV一区二区三区| 国产一区二区精品| 激情无码亚洲一区二区三区| 精品人妻一区二区三区毛片| 亚洲AV无码一区二区三区牛牛| 一区二区三区免费看| 国产爆乳无码一区二区麻豆| 国产精品亚洲专区一区 | 久久99热狠狠色精品一区| 成人无码一区二区三区| 一区二区视频在线免费观看| 国产日韩综合一区二区性色AV| 亚洲国产综合无码一区| 久久久久久人妻一区二区三区| 亚洲一区无码精品色| 亚洲乱码av中文一区二区| 99精品高清视频一区二区| 成人欧美一区二区三区在线视频| 免费视频一区二区| 日韩一区二区三区精品| 精品国产一区二区三区久久久狼 | 中文字幕精品一区二区精品| 精品人妻无码一区二区色欲产成人|