jquery给四个相同属性盒子里的ul下的li里的内容实现循环向上切换到下一个li,保证四个盒子里的lu都有内容,四个盒子ul里的内容依次切换
时间: 2024-10-24 10:03:49 浏览: 14
jquery 搜索 键盘选择 li 键盘事件 鼠标事件
4星 · 用户满意度95%
在jQuery中,你可以通过结合`$.each()`循环、动画效果以及`.eq()`方法来实现在四个有相同属性的盒子中的ul列表元素之间循环切换内容。下面是一个简单的示例代码:
```javascript
$(document).ready(function() {
var boxes = $('.box ul'); // 获取所有盒子的ul元素
var currentIndex = 0;
function switchContent() {
boxes.eq(currentIndex).find('li').stop().fadeOut('slow', function() { // 隐藏当前li并淡出
currentIndex = (currentIndex + 1) % boxes.length; // 循环索引,超出长度则从头开始
boxes.eq(currentIndex).find('li:eq(0)').fadeIn('slow'); // 显示下一个li并淡入
});
}
// 初始加载显示第一个li
boxes.eq(0).find('li').fadeIn('slow');
// 每隔一定时间(比如每隔2秒)切换内容
setInterval(switchContent, 2000);
});
```
这个例子中,我们首先获取了所有具有`.box ul`类的元素,然后定义了一个函数`switchContent`。在这个函数中,它会先隐藏当前选中的`li`,然后跳转到下一个`li`并显示出来,同时使用`setInterval`每两秒钟执行一次切换。
阅读全文