css實(shí)現(xiàn)的圖片列表切換輪播特效html頁面前端源碼

家好，今天給大家介紹一款， css實(shí)現(xiàn)的圖片列表切換輪播特效html頁面前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

圖1

特效非常炫酷，可以用于制造音樂播放切換或視頻播放切換前端（圖2）

圖2

代碼完整，需要的朋友可以下載學(xué)習(xí)（圖3）

圖3

本源碼編碼：10172，需要的朋友，點(diǎn)擊下面的鏈接后，搜索10172，即可獲取。

就愛UI - 分享UI設(shè)計(jì)的點(diǎn)點(diǎn)滴滴

SS3動(dòng)畫原理實(shí)現(xiàn)輪播圖，主要用到CSS3的動(dòng)畫過渡實(shí)現(xiàn)切換，感興趣的小伙伴可以看看！

效果圖：

實(shí)現(xiàn)代碼

html:

css:

碼如下：

<!DOCTYPE html>
<html>
<head>
	<title>輪播圖制作</title>
	<style type="text/css">
		.imgContainer {
			width: 1000px;
			height: 400px;
			border: 1px solid #ccc;
			margin: 0 auto;
		}
		.imgContainer .imgs img {
			width: 1000px;
			height: 400px;
		}
		.imgContainer .imgsBtn {
			width: 112px;
			height: 32px;
			margin: 0 auto;
			position: relative;
			top: -38px;
			text-align: center;
			z-index: 5;
		}
		.imgContainer .imgsBtn span {
			display: block;
			float: left;
			width:20px;
			height: 20px;
			line-height: 20px;
			font-size: 13px;
			margin: 3px;
			border-radius: 50%;
		}
		.imgsBtnOne {
			background-color: #ccc;
			color: #222;
			opacity: 0.8;	
		}
		.imgsBtnTwo {
			background-color: red;
			color: #fff;
			opacity: 0.8;
		}
		.imgContainer .imgsBtn span:hover {
			cursor: pointer;
		}
	</style>
	<script type="text/javascript">
		var count = 1;	//圖片起始序號(hào)
		var speed = 3000;//圖片輪播速度
		var ti = window.setInterval(changeImg,speed);//調(diào)用函數(shù)，使圖片實(shí)現(xiàn)輪播
		var spans; 		//包含數(shù)字的span
		var imgs;	//包含圖片的div
		var img; 	//圖片標(biāo)簽

		window.onload = function() {
			init();	//獲取包含數(shù)字的span，進(jìn)行初始化
			clickJumpImg();
		}

		//初始化
		function init() {
			imgs = document.getElementById("carouselImg");	//獲取圖片所在的div
			img = imgs.firstElementChild;					//獲取圖片標(biāo)簽
      
      //獲取包含數(shù)字的span的集合
			spans = document.getElementById("spans").getElementsByTagName("span");
		}

		//切換圖片和數(shù)字樣式
		function changeImg() {
			img.src = "img/" + count + "a.jpg";	//設(shè)置圖片路徑

			//使數(shù)字改變樣式
			for (var i = 0; i < spans.length; i++) {	//第i個(gè)span對(duì)應(yīng)第i+1張圖片
        //因?yàn)閳D片數(shù)字是從1開始，二span集合的下標(biāo)從0開始
				if (spans[i].innerHTML == count) {	
					spans[i].className = "imgsBtnTwo";
				}else {
					spans[i].className = "imgsBtnOne";
				}
			}	
			count++;
			if (count>4) {	//到最后一張圖片后，設(shè)置下一張圖片為第一張
				count = 1;
			}
		}

		//鼠標(biāo)移入數(shù)字時(shí)，切換到對(duì)應(yīng)圖片
		function clickJumpImg() {			
			for (var i = 0; i < spans.length; i++) {
				spans[i].onclick = function() {
					count = this.innerHTML;
          
          //設(shè)置顯示圖片后，立即執(zhí)行一次changeImg()函數(shù)，否則圖片會(huì)延遲speed秒才出現(xiàn)
					changeImg();	
				}
			}
		}

	</script>
</head>
<body>
	<div class="imgContainer">
		<div id="carouselImg" class="imgs">
			<img src="img/1a.jpg">
		</div>
		<div id="spans" class="imgsBtn">
			<span class="imgsBtnTwo">1</span>
			<span class="imgsBtnOne">2</span>
			<span class="imgsBtnOne">3</span>
			<span class="imgsBtnOne">4</span>
		</div>
	</div>
</body>
</html>

效果如下：

在線咨詢

上一篇：零基礎(chǔ)教你學(xué)前端-61、CSS文本顏色和大小寫轉(zhuǎn)化
下一篇：使用 SVG 制作加載動(dòng)畫

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。