写一个简陋版的js轮播图
作者：互联网
首先第一步应该是把思路捋一捋：
1.先想象一下轮播图长什么样，然后轮播图由什么组成。
2.自己想象的轮播图就是中间一张图片然后一直自动切换图片。
3.最主体就是中间一张大图片。
4.图片可以使用img直接挂上去，但是还要考虑之后的自动轮播，所以图片的主体可以使用div包起来，之后依靠display方便效果的实现
5.使用div的background-image实现图片的显示，但是这样子图片会一直按顺序排列下去
6.所以可以使用position里的绝对定位实现图片全部都放在一个区域
7.好图片放好之后，就可以考虑轮播效果的实现了
-----------------------------------------------------------------------
8.之前说了使用div显示图片是因为可以使用display属性使得图片隐藏于显示，从而实现轮播效果
-----------------------------------------------------------------------
思路想好了，接下来就是实现思路了
下面的代码是先实现图片的基本骨架：
<body>
<!--首先写一个简单的轮播图，既只有图片在动，没有其它的操作-->
<!--这个div放图片，负责整个框架-->
<div class="mainBox">
<div class="pic picBox1"></div>
<div class="pic picBox2"></div>
<div class="pic picBox3"></div>
<div class="pic picBox4"></div>
<div class="pic picBox5"></div>
</div>
class='mainBox'是一个主题骨架，其主要作用是在定位position的时候作为下面图片div的参考
注意：position里的absolute参考的是不为static属性的第一次父标签，所以mainbox的position应该手动设置为relative
html里的骨架实现了，接下来就是css代码的实现了
<style>
.mainBox {
width: 1250px;
height: 500px;
margin: 30px auto;
border: 3px solid pink;
overflow: hidden;
border-radius: 50px 50px;
position: relative;
}
.pic {
width: 1200px;
height: 460px;
border: 5px solid lightskyblue;
margin: 30px 20px;
background-repeat: no-repeat;
position: absolute;
}
.picBox1 {
background-image:url("Hua_1.jpg");
}
.picBox2 {
background-image:url("Hua_2.jpg");
}
.picBox3 {
background-image:url("Hua_3.jpg");
}
.picBox4 {
background-image:url("Hua_4.jpg");
}
.picBox5 {
background-image:url("Hua_5.jpg");
}
</style>
再接下来就是js的代码实现了
<script>
var pics = document.getElementsByClassName('pic');
var index = 0;
setInterval(function() {
index += 1;
if(index >= pics.length) {
index = 0;
}
changeImage();
},3000);
var changeImage = function() {
for(var i = 0;i < pics.length;i += 1)
pics[i].style.display = 'none';
pics[index].style.display = 'block';
};
//setInterval(function() { console.log(1)},1000);
</script>
index是作为图片显示的索引数字。
其中最主要是应用display这个属性来实现图片的轮播效果
最简陋版的轮播图就是这样了，接下来就是写可以有按钮的轮播图了
标签：index,轮播,简陋,image,js,background,position,图片 来源： https://www.cnblogs.com/WildSky/p/11220484.html