使用js制作简易轮播图 （图片切换）
此处是我写的完整js轮播图点击进入
此方法在实际应用中用处不大 了解即可
主要思想为把每一个图片的路径存到一个数组中
获取按钮的id， 为该按钮绑定单机响应函数即可
以下为js代码
<script type="text/javascript">
window.onload= function(){
var prev = document.getElementById("prev"); //获取第一个按钮的id
var next = document.getElementById("next"); //获取第二个按钮的id
var img = document.getElementsByTagName("img")[0]; //获取img标签的第一个元素
var imgarr = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg"]; //图片把路径存入数组中
var index = 0;
var p = document.getElementById("duanluo");
prev.onclick = function(){
img.src = imgarr[index];
if(index == 0){
index = imgarr.length-1;
} //单机响应函数
else index--; //控制第一个按钮的切换
p.innerHTML = "这是第"+(index+1)+"张图片"; //显示第几张图片
}
next.onclick = function(){
img.src = imgarr[index];
if(index == imgarr.length-1){
index = 0;
}
else index ++; //控制第二个按钮图片切换
p.innerHTML = "这是第"+(index+1)+"张图片";//向p中添加文字
}
}
</script>
以下为HTML 和 CSS 部分代码
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#outer{
width: 600px;
margin:70px auto;
text-align: center;
/* background-color: aqua; */
}
.btn1{
font-size: 60px;
opacity: 0.4; /* 控制按钮的透明度 */
position: relative;
top:-290px;
left: -260px;
}
.btn2{
font-size: 60px;
opacity: 0.4;
position: relative;
top:-290px;
left: 260px;
}
</style>
<body>
<div id="outer">
<img src="images/2.jpg" > <!-- 第一张图片路径写入其中 -->
<p id="duanluo">这是第1张图片</p> <!-- 显示图片 -->
<button type="button" id="prev" class="btn1"><</button>
<button type="button" id="next" class="btn2">></button>
</div>
</body>
版权声明：本文为qq_44983621原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。