jQuery带进度条带标题左右箭头渐变幻灯片(jquery宽屏唯美滑动式幻灯片)
- 资讯实事
- 2024-10-11 19:47:01
jQuery带进度条带标题左右箭头渐变幻灯片(jquery宽屏唯美滑动式幻灯片)
jquery 渐变幻灯片 进度条 图片切换 左右箭头 jquery特效 jquery下载
以下是一个使用jQuery制作带进度条、标题和左右箭头的渐变幻灯片的示例代码：
<!DOCTYPE html><html><head>
<title>jQuery渐变幻灯片</title>
<style>
.slideshow { width: 600px; height: 400px; position: relative; overflow: hidden;
} .slide { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.5s ease;
} .slide.active { opacity: 1;
} .slide img { max-width: 100%; height: auto;
} .progress-bar { width: 100%; height: 5px; background-color: #ccc;
} .progress-bar span { display: block; height: 100%; background-color: #ff0000; transition: width 0.5s ease;
} .slide-caption { position: absolute; bottom: 10px; left: 10px; color: #fff; font-size: 20px;
} .prev-arrow, .next-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; background-color: rgba(0, 0, 0, 0.5); color: #fff; font-size: 20px; text-align: center; line-height: 30px; cursor: pointer;
} .prev-arrow { left: 10px;
} .next-arrow { right: 10px;
} </style></head><body>
<div class="slideshow">
<div class="slide active">
<img src="slide1.jpg" alt="Slide 1">
<div class="slide-caption">Slide 1</div>
</div>
<div class="slide">
<img src="slide2.jpg" alt="Slide 2">
<div class="slide-caption">Slide 2</div>
</div>
<div class="slide">
<img src="slide3.jpg" alt="Slide 3">
<div class="slide-caption">Slide 3</div>
</div>
<div class="progress-bar">
<span></span>
</div>
<div class="prev-arrow"><</div>
<div class="next-arrow">></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() { var slides = $(".slide"); var progressBar = $(".progress-bar span"); var prevArrow = $(".prev-arrow"); var nextArrow = $(".next-arrow"); var currentIndex = 0; function showSlide(index) {
slides.removeClass("active");
slides.eq(index).addClass("active");
progressBar.css("width", "0");
progressBar.animate({ width: "100%"
}, 5000);
} function nextSlide() {
currentIndex = (currentIndex + 1) % slides.length; showSlide(currentIndex);
} function prevSlide() {
currentIndex = (currentIndex - 1 + slides.length) % slides.length; showSlide(currentIndex);
}
nextArrow.on("click", function() { nextSlide();
});
prevArrow.on("click", function() { prevSlide();
}); setInterval(nextSlide, 5000);
}); </script></body></html>在上面的示例代码中，我们创建了一个幻灯片容器（.slideshow），其中包含了多个幻灯片（.slide），每个幻灯片都包含了一张图片（<img>）和一个标题（.slide-caption）。通过使用CSS3的opacity和transition属性，以及jQuery的addClass()、removeClass()和animate()方法，实现了渐变的幻灯片效果。
我们还添加了一个进度条（.progress-bar）来显示幻灯片的切换进度，并使用左右箭头（.prev-arrow和.next-arrow）提供手动切换幻灯片的功能。
通过jQuery的setInterval()函数，每隔5秒钟切换一次幻灯片。您也可以点击左右箭头手动切换幻灯片。
示例代码中的图片URL（src）应替换为您自己的图片URL。
jquery宽屏唯美滑动式幻灯片，jquery类似智能手机可滑动的图片导航，jQuery横向跳动导航菜单，jQuery相册滚动响应特效，
jQuery带进度条带标题左右箭头渐变幻灯片(jquery宽屏唯美滑动式幻灯片)由讯客互联资讯实事栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“jQuery带进度条带标题左右箭头渐变幻灯片(jquery宽屏唯美滑动式幻灯片)”
