jQuery带描述右侧选项卡焦点图(jquery宽屏唯美滑动式幻灯片)
- 网络资讯
- 2024-10-11 19:48: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;
} .description { position: absolute; top: 0; right: 0; width: 300px; height: 100%; background-color: rgba(0, 0, 0, 0.5); color: #fff; padding: 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; opacity: 0; transition: opacity 0.5s ease;
} .description.active { opacity: 1;
} .tabs { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px;
} .tab { width: 10px; height: 10px; border-radius: 50%; background-color: #fff; cursor: pointer; transition: background-color 0.5s ease;
} .tab.active { background-color: #ff0000;
} </style></head><body>
<div class="slideshow">
<div class="slide active">
<img src="slide1.jpg" alt="Slide 1">
<div class="description">Description 1</div>
</div>
<div class="slide">
<img src="slide2.jpg" alt="Slide 2">
<div class="description">Description 2</div>
</div>
<div class="slide">
<img src="slide3.jpg" alt="Slide 3">
<div class="description">Description 3</div>
</div>
<div class="tabs">
<div class="tab active"></div>
<div class="tab"></div>
<div class="tab"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() { var slides = $(".slide"); var descriptions = $(".description"); var tabs = $(".tab"); var currentIndex = 0; function showSlide(index) {
slides.removeClass("active");
descriptions.removeClass("active");
tabs.removeClass("active");
slides.eq(index).addClass("active");
descriptions.eq(index).addClass("active");
tabs.eq(index).addClass("active");
} function nextSlide() {
currentIndex = (currentIndex + 1) % slides.length; showSlide(currentIndex);
} function prevSlide() {
currentIndex = (currentIndex - 1 + slides.length) % slides.length; showSlide(currentIndex);
}
tabs.on("click", function() { var index = $(this).index(); showSlide(index);
}); setInterval(nextSlide, 5000);
}); </script></body></html>在上面的示例代码中，我们创建了一个焦点图容器（.slideshow），其中包含了多个幻灯片（.slide），每个幻灯片都包含了一张图片（<img>）和一个描述（.description）。通过使用CSS的opacity和transition属性，实现了幻灯片和描述的渐变效果。
我们还添加了一个右侧选项卡（.tabs），通过点击选项卡切换幻灯片，并使用active类来标记当前焦点。
通过jQuery的setInterval()函数，每隔5秒钟切换一次幻灯片。您也可以点击选项卡手动切换幻灯片。
示例代码中的图片URL（src）和描述内容（.description）应替换为您自己的内容。
现在，请您
jquery宽屏唯美滑动式幻灯片，jquery类似智能手机可滑动的图片导航，jQuery横向跳动导航菜单，jQuery相册滚动响应特效，
jQuery带描述右侧选项卡焦点图(jquery宽屏唯美滑动式幻灯片)由讯客互联网络资讯栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“jQuery带描述右侧选项卡焦点图(jquery宽屏唯美滑动式幻灯片)”
