隨著移動互聯網的普及,越來越多的網站需要兼容觸屏端,而旋轉木馬是一個經典的網站組件。在CSS3的幫助下,我們可以輕松地制作一個適用于觸屏端的旋轉木馬。
/* HTML 結構部分 */ <div class="carousel"> <ul class="carousel-inner"> <li class="active"><img src="1.jpg"></li> <li><img src="2.jpg"></li> <li><img src="3.jpg"></li> </ul> <ol class="carousel-indicators"> <li class="active"></li> <li></li> <li></li> </ol> </div> /* CSS3 樣式部分 */ .carousel { width: 100%; height: 200px; overflow: hidden; position: relative; } .carousel-inner { position: absolute; width: 300%; height: 200px; left: -100%; } .carousel-inner li { width: 33.333333%; float: left; } .carousel-inner li img { width: 100%; height: 200px; } .carousel-indicators { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); } .carousel-indicators li { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); margin-right: 10px; } .carousel-indicators .active { background-color: #ffffff; } /* JavaScript 部分 */ var carouselIndex = 0; var carouselLength = $(".carousel-inner li").length; function carouselAnimate() { $(".carousel-inner").animate({ left: carouselIndex * -33.333333 + "%" }, 500); $(".carousel-indicators li").eq(carouselIndex).addClass("active") .siblings().removeClass("active"); } function carouselPlay() { carouselIndex++; if (carouselIndex >carouselLength - 1) { carouselIndex = 0; } carouselAnimate(); } var carouselTimer = setInterval(carouselPlay, 3000); $(".carousel").on("swipeleft", function () { clearInterval(carouselTimer); carouselIndex++; if (carouselIndex >carouselLength - 1) { carouselIndex = 0; } carouselAnimate(); carouselTimer = setInterval(carouselPlay, 3000); }); $(".carousel").on("swiperight", function () { clearInterval(carouselTimer); carouselIndex--; if (carouselIndex< 0) { carouselIndex = carouselLength - 1; } carouselAnimate(); carouselTimer = setInterval(carouselPlay, 3000); });
以上是一個基本的觸屏端旋轉木馬的代碼,其中,我們使用了 CSS3 的 transform 和 transition 屬性來實現圖片的平滑切換,還使用了 JavaScript 的 setInterval 和 clearInterval 函數來控制圖片的自動播放和手動切換。
總的來說,制作一個適用于觸屏端的旋轉木馬并不難,我們只需掌握基本的 CSS3 和 JavaScript 技術,就可以在移動端實現各種炫酷的效果。
上一篇mysql查詢一周的語句
下一篇css3規定時間動畫