用原生js写轮播图（无滑动效果）
非常简单的东西，本人是菜鸡，只是提供一种思路，这应该是最简单的方法。
- 先拿出三个图片
- 先写出默认显示图片的那张图片的路径。
- 写js函数，先定义循环变量 i = 1，再判断 i 的值，根据不同的 i 值来用js改变图片路径。
- 再写计时器，来让图片循环滚动。
- 再有就是定位小圆点，用无序列表，li内用a标签，同样用js来判断，
效果如下：
中间的小白点就是定位按钮的定位效果，点击哪一个就可以跳到相应的图片上
完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
*{
padding: 0;
}
body{
background-color: aquamarine;
}
/*li{
display: inline-block;
}*/
ul{
/* width: 80px;*/
height: 13px;
position: absolute;
border-radius: 10px;
background-color: rgba(255,255,255,.3);
/*///bottom: 15px*/;
top: 450px;
list-style: none;
text-align: center;
left: 200px;
}
li{
display: inline-block;
padding: 0px;
margin: 3px;
}
.c6{
border-radius: 50%;
background-color: crimson;
width: 8px;
padding-top: 8px;
height: 0;
cursor: pointer;
display: block;
position: relative;
/* left: 600px;
*/
}
</style>
<body>
<img id="imgg" src="1.jpg" >
<button onclick="lunbotu()">切换</button>
<ul>
<li><a class="c6" id="q1" onclick="dianji(this)"></a></li>
<li><a class="c6" id="q2" onclick="dianji(this)"></a></li>
<li><a class="c6" id="q3" onclick="dianji(this)"></a></li>
</ul>
</body>
</html>
<script>
var i=1;
function lunbotu() {
switch (i) {
case 1: {
document.getElementById('imgg').src = "2.jpg";
document.getElementById('q1').style.backgroundColor="#ffff";
document.getElementById('q2').style.backgroundColor="crimson";
document.getElementById('q3').style.backgroundColor="crimson";
i++;
break;
}
case 2:
{
document.getElementById('imgg').src = "3.jpg";
document.getElementById('q2').style.backgroundColor="#ffff";
document.getElementById('q1').style.backgroundColor="crimson";
document.getElementById('q3').style.backgroundColor="crimson";
i++;
break;
}
case 3:{
document.getElementById('imgg').src="1.jpg";
document.getElementById('q3').style.backgroundColor="#ffff";
document.getElementById('q2').style.backgroundColor="crimson";
document.getElementById('q1').style.backgroundColor="crimson";
i=1;
break;
}
}
}
//setInterval(lunbotu, 3000);
function dianji (e) {
var name = e.id;
console.log(name);
switch (name) {
case "q1":{
document.getElementById('imgg').src = "2.jpg";
document.getElementById('q1').style.backgroundColor="#ffff";
document.getElementById('q2').style.backgroundColor="crimson";
document.getElementById('q3').style.backgroundColor="crimson";
break;
}
case "q2": {
document.getElementById('imgg').src = "3.jpg";
document.getElementById('q2').style.backgroundColor="#ffff";
document.getElementById('q1').style.backgroundColor="crimson";
document.getElementById('q3').style.backgroundColor="crimson";
break;
}
case "q3":{
document.getElementById('imgg').src="1.jpg";
document.getElementById('q3').style.backgroundColor="#ffff";
document.getElementById('q2').style.backgroundColor="crimson";
document.getElementById('q1').style.backgroundColor="crimson";
break;
}
}
}
</script>
``
