Html
<div id="div">
<img class="on" src="img/1.png" alt="">
<span class="prev"><</span>
<span class="next">></span>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
css
*{
padding: 0;
margin: 0;
}
#div{
position: relative;
width: 300px;
height: 300px;
padding: 10px 10px 30px 10px;
background: #ccc;
text-align: center;
margin:200px auto auto auto;
color: #fff;
font-weight: bold;
}
img{
display: none;
float: left;
width: 300px;
height: 300px;
}
.on{
display: block;
}
span{
width: 30px;
height: 30px;
cursor: pointer;
}
.prev{
position: absolute;
left: 10px;
top: 50%;
}
.next{
position: absolute;
right: 10px;
top: 50%;
}
ul{
position: absolute;
left: 37%;
bottom: 10px;
width: 100%;
}
ul li{
float: left;
list-style: none;
width: 10px;
height: 10px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
background: #fff;
margin-right: 12px;
cursor: pointer;
}
.active{
background: bisque;
}
JavaScript
window.οnlοad= function e() {
var Img = document.getElementsByTagName("img")[0];
var prev = document.getElementsByClassName("prev")[0];
var next = document.getElementsByClassName("next")[0];
var Li = document.getElementsByTagName("li");
var arrUrl = ["img/1.png","img/2.png","img/3.png","img/4.png"];
var iNow = 0;
function change() {
for(var i=0;i<Li.length;i++){
Li[i].className='';
}
Li[iNow].className='active';
Img.src=arrUrl[iNow];
}
for (var i = 0; i < Li.length; i++) {
Li[i].index = i;
Li[i].onclick = function () {
iNow=this.index;
change();
}
}
prev.onclick = function () {
iNow --;
if (iNow ==-1) {
iNow = Li.length - 1;
}
change();
};
next.onclick = function () {
iNow ++;
if (iNow == Li.length) {
iNow = 0;
}
change();
};
}