<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none
}
li {
list-style-type: none;
}
#coural {
360px;
height: 200px;
position: relative;
}
#coural .left,
.right {
position: absolute;
top: 40%;
transform: scale(2, 1.5);
background: blue;
color: #fff;
border-radius: 2px;
}
#coural .left {
left: 10px;
}
#coural .right {
right: 10px;
}
#coural .number {
position: absolute;
left: 30%;
top: 80%;
}
#coural .number span {
display: inline-block;
padding: 5px 10px;
margin-left: 10px;
background: #aaa;
border-radius: 50%;
}
#coural .active {
background: #09f!important;
color: #fff;
}
</style>
</head>
<body>
<div id="coural">
<div class="img">
<a href="javascript:;">
<img src="./pic/1.jpg">
</a>
</div>
<div class="left">
<</div>
<div class="right">></div>
<div class="number">
<span class="active">1</span>
<span>2</span>
<span>3</span>
</div>
</div>
<script>
var span = document.querySelectorAll("#coural span"),
arrImg = ["1.jpg", "2.jpg", "3.jpg"],
// img=document.querySelector("#coural .number img")无效
left = document.querySelector("#coural .left"),
right = document.querySelector("#coural .right"),
img = document.querySelector("#coural img"),
coural = document.querySelector("#coural"),
index = 0;
//改变数字样式及图片
function couralImg(index) {
img.src = "./pic/" + arrImg[index];
for (var i = 0, len = span.length; i < len; i++) {
span[i].className = "";
}
span[index].className = "active";
}
//图片轮播方法
function interval() {
stop = setInterval(function () {
index++;
if (index == arrImg.length) index = 0;
couralImg(index);
}, 1000)
}
//执行图片轮播
interval();
//鼠标移动到图片上时停止图片轮播
coural.onmouseover = function () {
clearInterval(stop);
}
//鼠标移除图片时开始I图片轮播
coural.onmouseout = function () {
interval();
}
//数字轮播
for (var i = 0, len = span.length; i < len; i++) {
span[i].onmouseover = function () {
index = this.innerHTML - 1;
couralImg(index);
}
}
//顺时针图片轮播
right.onclick = function () {
index++;
if (index == arrImg.length) index = 0;
couralImg(index);
}
//逆时针图片轮播
left.onclick = function () {
index--;
if (index == -1) index = arrImg.length-1;
couralImg(index);
}
</script>
</body>
</html>
