jquery右侧八屏带缩略图幻灯片(jquery动画滑动幻灯片展示)
- 网络资讯
- 2024-10-11 19:49:01
jquery右侧八屏带缩略图幻灯片(jquery动画滑动幻灯片展示)
jquery右侧八屏带缩略图幻灯片，一款带有左右箭头和焦点按钮控制幻灯图切换，支持八屏切换。
以下是一个使用jQuery制作带有缩略图、左右箭头和焦点按钮控制的八屏幻灯片的示例代码：
<!DOCTYPE html><html><head>
<title>jQuery八屏幻灯片</title>
<style>
.slideshow { width: 800px; height: 400px; position: relative; overflow: hidden;
} .slides { width: 6400px; height: 400px; position: absolute; top: 0; left: 0;
} .slide { width: 800px; height: 400px; float: left;
} .slide img { max-width: 100%; height: auto;
} .thumbnails { width: 800px; height: 80px; position: absolute; bottom: 0; left: 0; overflow: hidden;
} .thumbnail { width: 100px; height: 80px; float: left; margin-right: 10px; cursor: pointer;
} .thumbnail img { width: 100%; height: auto;
} .arrow { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.5); color: #fff; padding: 10px; cursor: pointer;
} .arrow.left { left: 10px;
} .arrow.right { right: 10px;
} .dots { text-align: center; margin-top: 10px;
} .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: #fff; cursor: pointer; margin-right: 5px;
} .dot.active { background-color: #ff0000;
} </style></head><body>
<div class="slideshow">
<div class="slides">
<div class="slide">
<img src="slide1.jpg" alt="Slide 1">
</div>
<div class="slide">
<img src="slide2.jpg" alt="Slide 2">
</div>
<div class="slide">
<img src="slide3.jpg" alt="Slide 3">
</div>
<!-- 添加更多幻灯片 -->
</div>
<div class="thumbnails">
<div class="thumbnail">
<img src="slide1.jpg" alt="Slide 1">
</div>
<div class="thumbnail">
<img src="slide2.jpg" alt="Slide 2">
</div>
<div class="thumbnail">
<img src="slide3.jpg" alt="Slide 3">
</div>
<!-- 添加更多缩略图 -->
</div>
<div class="arrow left"><</div>
<div class="arrow right">></div>
<div class="dots">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
<!-- 添加更多焦点按钮 -->
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() { var slides = $(".slides"); var slideWidth = $(".slide").width(); var thumbnails = $(".thumbnails"); var thumbnailWidth = $(".thumbnail").width(); var currentIndex = 0; function showSlide(index) {
slides.stop().animate({ left: -slideWidth index }, 500);
thumbnails.stop().animate({ left: -thumbnailWidth index }, 500);
$(".dot").removeClass("active");
$(".dot").eq(index).addClass("active");
} function nextSlide() {
currentIndex = (currentIndex + 1) % slides.children().length; showSlide(currentIndex);
} function prevSlide() {
currentIndex = (currentIndex - 1 + slides.children().length) % slides.children().length; showSlide(currentIndex);
}
$(".arrow.left").on("click", prevSlide);
$(".arrow.right").on("click", nextSlide);
$(".dot").on("click", function() { var index = $(this).index(); showSlide(index);
}); setInterval(nextSlide, 5000);
}); </script></body></html>在上面的示例代码中，我们创建了一个八屏幻灯片容器（.slideshow），其中包含了多个幻灯片（.slide）和缩略图（.thumbnail）。通过使用CSS设置幻灯片和缩略图的样式，以及添加左右箭头（.arrow）和焦点按钮（.dot）来控制切换。
通过使用jQuery的animate()函数，实现了幻灯片和缩略图的滑动效果。通过点击箭头和焦点按钮，调用相应的函数来切换幻灯片。
示例代码中的图片URL（src）应替换为您自己的内容。
jquery动画滑动幻灯片展示，jQuery带进度条带标题左右箭头渐变幻灯片，jquery宽屏唯美滑动式幻灯片，jquery左右回弹滑动幻灯片，
jquery右侧八屏带缩略图幻灯片(jquery动画滑动幻灯片展示)由讯客互联网络资讯栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“jquery右侧八屏带缩略图幻灯片(jquery动画滑动幻灯片展示)”
