有几种实现方式，首先jQuary是最简单的
$(document).ready(function(){$(选择器).onclick(function(){
$(目标div).html("写入内容")
//可以用请求加载内容
$(目标div).load("请求url",function(){
//写入回调函数
})
})
}
但是如果只是切换图片的话，其实不用这么麻烦，全部hide,然后一个一个show就好了……静态的话。
时间不够了…要其他方法就再追问吧……
希望有帮到你喵……
既然用了toggle，就试一下都用toggle吧，如下：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
body {
margin:0
padding:0
}
.menu {
position: fixed
bottom: 0
left: 0
height: auto
text-align:center
width: 100%
cursor: pointer
}
.title {
width: 100%
height:40px
background: orange
text-align: center
}
.dropdown {
width: 100%
height: auto
background:red
max-height: 150px
overflow: hidden
transition: all .5s
}
.down {
max-height: 0
}
ul {
padding:0
margin:0
list-style:none
}
.triangle-top {
display: inline-block
margin: 10px
border-top: 2px solid border-right: 2px solid
width: 10px height: 10px
transform: rotate(-45deg)
}
.triangle-bottom {
display: inline-block
margin: 10px
border-bottom: 2px solid border-right: 2px solid
width: 10px height: 10px
transform: rotate(45deg)
}
</style>
</head>
<body>
<div class="menu">
<div class="dropdown down">
<ul><li>aaa</li><li>bbb</li><li>ccc</li><ul>
</div>
<div class="title" onclick="f()">
<span class="triangle triangle-top"></span>
</div>
</div>
<script>
function f() {
document.getElementsByClassName('triangle')[0].classList.toggle('triangle-top')
document.getElementsByClassName('triangle')[0].classList.toggle('triangle-bottom')
document.getElementsByClassName('dropdown')[0].classList.toggle('down')
}
</script>
</body>
</html>
望采纳，谢谢
工具/材料Sublime Text
01首先在Sublime Text下面准备一个html和5张图片，图片宽高为600px和400px，如下图所示
02然后在HTML页面中布局轮播图的结构，如下图所示，主要包括图片区域，圆形按钮，左右箭头
03接下来需要给轮播图页面布局声明一些样式，请按照下图所示的样式代码进行声明
04最后就是实现轮播图的JS脚本功能，如下图所示，主要包括前进，后退，自动播放的功能
05最后运行页面，你就会看到下图所示的轮播图效果，点击圆圈或者左右箭头可以切换轮播图
