您的位置：首页 > Web前端 > JavaScript

使用js制作简易轮播图 （图片切换）

2019-06-13 18:17 1481 查看

使用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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航