帮我写一段关于焦点图的js代码
时间: 2024-05-15 18:15:26 浏览: 15
以下是一个简单的焦点图的JS代码,使用了jQuery库:
```
$(document).ready(function() {
// 设置初始变量
var currentSlide = 0;
var slideCount = $('.slides li').length;
// 隐藏所有幻灯片,除了第一个
$('.slides li').hide();
$('.slides li:first').show();
// 自动播放幻灯片
var autoSlide = setInterval(function() {
showSlide(currentSlide + 1);
}, 5000);
// 点击幻灯片下方小圆点跳到对应的幻灯片
$('.dots li').click(function() {
var index = $(this).index();
showSlide(index);
});
// 显示对应的幻灯片
function showSlide(slideIndex) {
// 如果幻灯片已经到最后一个,返回第一个
if (slideIndex >= slideCount) {
slideIndex = 0;
}
// 隐藏当前幻灯片
$('.slides li:eq(' + currentSlide + ')').hide();
// 显示新幻灯片
$('.slides li:eq(' + slideIndex + ')').show();
// 更新变量
currentSlide = slideIndex;
// 更新小圆点的状态
$('.dots li').removeClass('active');
$('.dots li:eq(' + currentSlide + ')').addClass('active');
}
});
```
以上代码假设HTML页面中有一个类名为`slides`的幻灯片容器,其中包含若干个`li`元素作为幻灯片,以及一个类名为`dots`的小圆点容器,其中包含和幻灯片个数相同的`li`元素作为小圆点。每个小圆点的点击事件都会跳转到对应的幻灯片。同时,幻灯片会自动播放,每5秒钟切换到下一张幻灯片。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)