色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css3觸屏端旋轉木馬

錢浩然2年前12瀏覽0評論

隨著移動互聯網的普及,越來越多的網站需要兼容觸屏端,而旋轉木馬是一個經典的網站組件。在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 技術,就可以在移動端實現各種炫酷的效果。