完成函数showImg(),要求能够动态根据下拉列表的选项变化,更新图片的显示<body> <script type="text/javascript" > function showImg (oSel) { //在此处添加代码 } </script> <img id="pic" src="img1.jpg" width="200" height="200" /> <br /> <select id="sel" onchange="showImg(this)"> <option value="img1">城市生活</option> <option value="img2">都市早报</option> <option value="img3">青山绿水</option> </select></body
时间: 2023-07-19 22:08:32 浏览: 49
可以使用以下代码实现:
```
function showImg(oSel) {
var img = document.getElementById("pic");
var value = oSel.value;
img.src = value + ".jpg";
}
```
在上述代码中,我们首先使用 `document.getElementById` 方法获取 id 为 "pic" 的图片元素。然后获取下拉列表的选中值,使用该值更新图片的 `src` 属性,从而显示不同的图片。最后将更新后的图片显示在页面上。
相关问题
修改成轮播图效果!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` 来循环切换图片。同时,也实现了当鼠标移到轮播图上时停止自动播放,鼠标移开后继续自动播放的功能。
<body onload="showImg()"> <div class="all" id='box'> <div class="screen"> <ul> <li><img src="images/1.png" alt="图片1" width="500" height="300"/></li> <li><img src="images/2.png" alt="图片2" width="500" height="300"/></li> <li><img src="images/3.png" alt="图片3" width="500" height="300"/></li> <li><img src="images/4.png" alt="图片4" width="500" height="300"/></li> <li><img src="images/5.png" alt="图片5" width="500" height="300"/></li> </ul> </div> <div id="arr"><span id="left"><</span><span id="right">></span></div> </div> </body>在此基础上使用jquery的siblings函数完成图片轮播
好的,以下是代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>使用jQuery实现图片轮播</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
/* 样式省略,与原代码一致 */
</style>
<script>
$(function() {
// 获取图片列表
var $list = $(".screen ul li");
// 获取图片数量
var len = $list.length;
// 获取每张图片的宽度
var width = $list.width();
// 设置ul的宽度
$(".screen ul").width(len * width);
// 定时器,控制图片轮播
var timer = null;
var index = 0; // 当前显示的图片下标
// 向左切换图片
$("#left").click(function() {
index--;
if (index < 0) {
index = len - 1;
}
slide();
});
// 向右切换图片
$("#right").click(function() {
index++;
if (index >= len) {
index = 0;
}
slide();
});
// 图片轮播函数
function slide() {
var left = -index * width;
$(".screen ul").stop().animate({left: left}, 500);
$list.eq(index).addClass("active").siblings().removeClass("active");
}
// 开始自动轮播
function start() {
timer = setInterval(function() {
index++;
if (index >= len) {
index = 0;
}
slide();
}, 2000);
}
// 停止自动轮播
function stop() {
clearInterval(timer);
}
// 鼠标移入停止自动轮播,移出开始自动轮播
$(".all").hover(function() {
stop();
}, function() {
start();
});
// 开始自动轮播
start();
});
</script>
</head>
<body onload="showImg()">
<div class="all" id='box'>
<div class="screen">
<ul>
<li><img src="images/1.png" alt="图片1" width="500" height="300"/></li>
<li><img src="images/2.png" alt="图片2" width="500" height="300"/></li>
<li><img src="images/3.png" alt="图片3" width="500" height="300"/></li>
<li><img src="images/4.png" alt="图片4" width="500" height="300"/></li>
<li><img src="images/5.png" alt="图片5" width="500" height="300"/></li>
</ul>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
</body>
</html>
```
在上面的代码中,我们使用了 jQuery 的 `siblings` 函数来切换图片的样式。每次切换图片时,我们都会给当前图片的 `li` 元素添加 `active` 类,并将其兄弟元素的 `active` 类移除,从而实现图片样式的切换。另外,我们还使用了 jQuery 的 `animate` 函数来实现图片的滑动效果。最后,我们通过鼠标移入停止自动轮播,移出开始自动轮播的方式来控制图片轮播的开始和停止。