上面是别人的效果图，我按照那个步骤一步一步来然后就得到下图这么个东西
这是我的完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#BJ{
/* 图片剧中 */
text-align: center;
}
#img{
/* 图片宽度 高度 */
width: 80rem;
height: 43.125rem;
}
#ol{
position: absolute;
bottom: 5.3125rem;
width: 100%;
text-align: center;
right: 0.9375rem;
}
</style>
</head>
<script type="text/javascript">
var isindex=0
var imgs=["images/曹操.png",
"images/伽罗.png",
"images/镜.png",
"images/老虎.png",
"images/孙膑.jpg",
"images/婉儿.png"];
function qiehuan(){
document.getElementById("img").src=imgs[index];
index++;
if(index>5){
index=0// 只有6张图片,当为5时,重置为0
}
}
setInterval("qiehuan()",1000)// 每三秒重新运算函数qiehuan()
// 图片点击切换部分:
window.onload = function
// 获取6张图片id:
var c1 = document.getElementById("clk1");
var c2 = document.getElementById("clk2");
var c3 = document.getElementById("clk3");
var c4 = document.getElementById("clk4");
var c5 = document.getElementById("clk5");
var c6 = document.getElementById("clk6");
// 点击相应按钮,则显示相应图片:
c1.onclick=function(){
document.getElementById("img").src=imgs[0];
}
c2.onclick=function(){
document.getElementById("img").src=imgs[1];
}
c3.onclick=function(){
document.getElementById("img").src=imgs[2];
}
c4.onclick=function(){
document.getElementById("img").src=imgs[3];
}
c5.onclick=function(){
document.getElementById("img").src=imgs[4];
}
c6.onclick=function(){
document.getElementById("img").src=imgs[5];
}
</script>
<body>
<!-- <embed src="js/王者荣耀%20-%20王者冰刃.mp3" width=0 height=0 type=audio/mpeg loop="-1" autostart="true" volume="0">
</embed> --> <!-- 音乐 -->
<div id="">
<div id="BJ">
< img src="js/伽罗.png" id="img" >
</div>
