首先第一步应该是把思路捋一捋：
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这个属性来实现图片的轮播效果
最简陋版的轮播图就是这样了，接下来就是写可以有按钮的轮播图了
-----------------------------------------------------------------------------------------
先实现只有上下两个按钮的轮播图
1.对于按钮而言是上下按钮
2.但是对于整体而言还要考虑它的效果的实现
3.效果有：当鼠标放在图片上的时候图片不要动，但是当鼠标从图片上移走的时候图片又要实现自动轮播了，所以这里可以考虑从主main盒子的onmouseover以及onmouseout来实现
html骨架如下
<body> <!--首先写一个简单的轮播图，既只有图片在动，没有其它的操作--> <!--这个div放图片，负责整个框架--> <div class="mainBox" id="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> <!--图片上的两个按钮的显示--> <a href="javascript:void(0)"><div class="button prev" id="prev"></div></a>//上一张 <a href="javascript:void(0)"><div class="button next" id="next"></div></a>//下一张 </div> </body>
其实与上面的对比就是多了两个a标签
接着就是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"); /*display: none;*/ } .picBox5 { background-image:url("Hua_5.jpg"); /*display: none;*/ } .button { 30px; height: 70px; background: lightskyblue; position: absolute; top: 50%; left: 100px; margin-top: -10px; } .next { left: 1130px; background: pink; } </style>
其实与上面相比就是多了最下面黑色部分的代码，这里也就是普通的css代码
然后最后就是js的实现了
<script>
var pics = document.getElementsByClassName('pic');//获取图片的
var index = 0;//图片的索引标志
var mainBox = document.getElementById('mainBox');//获取主盒子的dom操作
var timeId;//计时器的id
//改变图片
var changeImage = function() {
for(var i = 0;i < pics.length;i += 1)
pics[i].style.display = 'none';
pics[index].style.display = 'block';
};
//鼠标从main盒子上离开
mainBox.onmouseout = function() {
timeId = setInterval(function() {
index += 1;
if(index >= pics.length) {
index = 0;
}
changeImage();
},3000);//自动切换图片
};
mainBox.onmouseover = function() {
clearInterval(timeId);
};//清除自动效果
mainBox.onmouseout();//实现没有动鼠标，图片就轮播
//按钮的效果实现
var prev = document.getElementById('prev');//上一张图片的按钮
//实现点击上一张图片
prev.onclick = function() {
index -= 1;
if(index < 0) {
index = pics.length - 1;
}
changeImage();
};
var next = document.getElementById('next');//下一张图片的按钮
//实现点击下一张图片
next.onclick = function() {
index += 1;
if(index >= pics.length) {
index = 0;
}
changeImage();
};
</script>
注释都在图片上应该可以看懂，
不过还有要注意的
mainBox.onmouseover = function() { clearInterval(timeId); };
这里不能写成mainBox.onmouserover = clearInterval(timeId);
如果写了，那么图片的轮播效果就会变得很快，具体为什么我也不知道，如果有大神知道的话还望指点一二
-----------------------------------
接下来就是实现在图片上添加小圆点了，其实最最难的还是添加小圆点
整体代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>今天是2019/7/21打算自己动手，自己思考写一个轮播图</title> <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"); /*display: none;*/ } .picBox5 { background-image:url("Hua_5.jpg"); /*display: none;*/ } .button { width: 30px; height: 70px; background: lightskyblue; position: absolute; top: 50%; left: 100px; margin-top: -10px; } .button:hover { background-color: lavender; opacity: 0.6; } .next { left: 1130px; background: pink; } #dots { position: absolute; bottom: 10px; right: 40px; text-align: right; } #dots div { display: inline-block;/*这里要理解一下*/ width: 10px; height: 10px; border-radius: 50%; bottom: 20px; right: 50px; margin-left: 10px; background: lavenderblush; cursor: pointer;/*这里是表示鼠标放在上面的时候有特效*/ } #dots div.dot { /*background: lightskyblue;*/ box-shadow: 3px 2px 3px red;/*阴影效果*/ } </style> </head> <body> <!--首先写一个简单的轮播图，既只有图片在动，没有其它的操作--> <!--这个div放图片，负责整个框架--> <div class="mainBox" id="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> <!--图片上的两个按钮的显示--> <a href="javascript:void(0)"><div class="button prev" id="prev"></div></a><!--上一张--> <a href="javascript:void(0)"><div class="button next" id="next"></div></a><!--下一张--> <!--图片上的小圆点--> <div id="dots"> <div class="dot"></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <script> var pics = document.getElementsByClassName('pic');//获取图片的 var index = 0;//图片的索引标志 var mainBox = document.getElementById('mainBox');//获取主盒子的dom操作 var timeId;//计时器的id //改变图片 var changeImage = function() { for(var i = 0;i < pics.length;i += 1) pics[i].style.display = 'none'; pics[index].style.display = 'block'; }; //鼠标从main盒子上离开 mainBox.onmouseout = function() { timeId = setInterval(function() { index += 1; if(index >= pics.length) { index = 0; } changeImage(); },3000);//自动切换图片 }; mainBox.onmouseover = function() { clearInterval(timeId); };//清除自动效果 mainBox.onmouseout();//实现没有动鼠标，图片就轮播 //按钮的效果实现 var prev = document.getElementById('prev');//上一张图片的按钮 //实现点击上一张图片 prev.onclick = function() { index -= 1; if(index < 0) { index = pics.length - 1; } changeImage(); }; var next = document.getElementById('next');//下一张图片的按钮 //实现点击下一张图片 next.onclick = function() { index += 1; if(index >= pics.length) { index = 0; } changeImage(); }; //小圆点特效 var dot = document.getElementById('dots').getElementsByTagName('div');//获取dots标签下的div for (var i = 0;i < dot.length;i += 1) { dot[i].id = 'dot' + String(i); dot[i].onclick = function() { for(var j = 0;j < dot.length;j += 1) dot[j].className = '';//这个其实可以添加在changeImage函数里 index = parseInt(String(this.id).replace(/[^0-9]/ig,""));//注意这里this.id里的this是指向dot对象，因为在js里万物皆为对象，this指向调用点击时的对象小圆点 dot[index].className = 'dot'; changeImage(); } } </script> </body> </html>
基本就算写完了，，，多看看吧