function showImg(){ $("li:eq("+i+")").show("slow"); //别的消失 $("li:eq("+i+")").siblings("li").hide("slow"); if(i == 4){ i = 0; }else{ i++; } }改对
时间: 2023-08-07 13:20:22 浏览: 39
这段代码没有给出完整的上下文,无法判断需要改正的部分。但是,根据代码片段的语法,有以下几点需要注意:
1. 变量 `i` 没有定义,需要在函数外部或者内部先声明并赋值。
2. `$("li:eq("+i+")")` 表示选择第 `i` 个 `<li>` 元素,但没有指明选择的是哪个 `<ul>` 元素下的 `<li>`。如果有多个列表,需要加上选择器的限制。
3. `show()` 和 `hide()` 方法需要传入参数 `slow` 或 `fast` 表示动画的速度,或者传入数字表示动画的时长。如果不传入参数,则默认没有动画效果。
根据上述问题,修改后的代码如下:
```javascript
let i = 0; // 先声明并赋值变量 i
function showImg() {
$("ul.slide:eq(0) li:eq(" + i + ")").show("slow"); // 限制选择器,选择第一个 <ul> 下的第 i 个 <li>
$("ul.slide:eq(0) li:eq(" + i + ")").siblings("li").hide("slow"); // 同上,同时隐藏兄弟元素
if (i == 4) {
i = 0;
} else {
i++;
}
}
```
需要根据具体的代码环境进行修改和适配。
相关问题
var i = 0; $(function(){ showImg(); window.setInterval("showImg()",1000); }); function showImg(){ $("li:eq("+i+")").fadeIn("slow"); //别的消失 $("li:eq("+i+")").siblings("li").fadeOut("slow"); if(i == 4){ i = 0; }else{ i++; } }改成show和hide
修改后的代码如下所示:
```javascript
var i = 0;
$(function() {
showImg();
window.setInterval("showImg()", 1000);
});
function showImg() {
$("li:eq(" + i + ")").show("slow"); // 使用 show() 方法显示当前图片
// 隐藏其他兄弟元素,使用 hide() 方法
$("li:eq(" + i + ")").siblings("li").hide("slow");
if (i == 4) {
i = 0;
} else {
i++;
}
}
```
在原代码中,使用了 `fadeIn()` 和 `fadeOut()` 方法来实现图片的显示和隐藏。这两个方法会产生渐变的效果,但是需要在页面中预先设置图片的透明度为 0。如果直接使用 `show()` 和 `hide()` 方法,可以避免这个问题,同时也能够实现图片的显示和隐藏。
修改成轮播图效果!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> div{ height: 500px; background-color: skyblue; display: none; } </style> </head> <body> <input type="button" value="显示"> <input type="button" value="隐藏"> <input type="button" value="切换"> <div> <ul> <li><img src="../images/1.jpg"></li> <li><img src="../images/2.jpg"></li> <li><img src="../images/3.jpg"></li> <li><img src="../images/4.jpg"></li> <li><img src="../images/5.jpg"></li> <li><img src="../images/6.jpg"></li> </ul> </div> <script src="../jquery-3.7.0.js"></script> <script type="text/javascript"> $(function(){ $("input").eq(0).click(function(){ // sildeDown(null/speed,easing,.callback) / sildeUP $("div").slideDown("slow",function(){ console.log("111111") }) }) $("input").eq(1).click(function(){ // sildeDown(null/speed,easing,.callback) / sildeUP $("div").slideUp("slow",function(){ console.log("111111") }) }) }) </script> </body> </html>
将这段代码修改成轮播图效果需要引入第三方库或者自己手写轮播图的 JS 代码。以下是手写轮播图的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<style type="text/css">
.slider {
width: 600px;
height: 300px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.slider ul {
width: 3000px;
height: 300px;
position: absolute;
left: 0;
top: 0;
}
.slider li {
float: left;
width: 600px;
height: 300px;
}
.slider img {
width: 100%;
height: 100%;
}
.slider .prev,
.slider .next {
width: 50px;
height: 50px;
background-color: black;
color: white;
text-align: center;
line-height: 50px;
font-size: 20px;
position: absolute;
top: 50%;
margin-top: -25px;
cursor: pointer;
}
.slider .prev {
left: 0;
}
.slider .next {
right: 0;
}
</style>
</head>
<body>
<div class="slider">
<ul>
<li><img src="../images/1.jpg" alt=""></li>
<li><img src="../images/2.jpg" alt=""></li>
<li><img src="../images/3.jpg" alt=""></li>
<li><img src="../images/4.jpg" alt=""></li>
<li><img src="../images/5.jpg" alt=""></li>
<li><img src="../images/6.jpg" alt=""></li>
</ul>
<span class="prev">❮</span>
<span class="next">❯</span>
</div>
<script src="../jquery-3.7.0.js"></script>
<script type="text/javascript">
$(function () {
var index = 0;
var timer = null;
var len = $(".slider li").length;
function showImg(index) {
$(".slider li").eq(index).fadeIn().siblings().fadeOut();
}
function autoPlay() {
timer = setInterval(function () {
index++;
if (index == len) {
index = 0;
}
showImg(index);
}, 2000);
}
$(".slider").hover(
function () {
clearInterval(timer);
},
function () {
autoPlay();
}
);
$(".prev").click(function () {
index--;
if (index == -1) {
index = len - 1;
}
showImg(index);
});
$(".next").click(function () {
index++;
if (index == len) {
index = 0;
}
showImg(index);
});
autoPlay();
});
</script>
</body>
</html>
```
这段代码实现了一个简单的轮播图,通过点击左右箭头或者自动播放来切换图片。其中,`.slider` 是轮播图的容器,`.slider ul` 是所有图片的容器,`.slider li` 是每张图片的容器,`.slider img` 是每张图片本身。点击左右箭头时,通过改变 `index` 的值来切换图片,`showImg()` 函数用于切换图片的动画效果。自动播放时,通过 `setInterval` 来循环切换图片。同时,也实现了当鼠标移到轮播图上时停止自动播放,鼠标移开后继续自动播放的功能。