<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<script src="日常封装函数.js" type="text/javascript" charset="utf-8"></script>
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul,ol,li{
list-style: none;
}
img{
display: block;
}
#wrap{
width: 1024px;
height: 320px;
border: 2px solid #0000FF;
position: relative;
margin: 80px auto;
overflow: hidden;
}
#wrap #list li{
position: absolute;
width: 1024px;
height: 320px;
opacity: 0;
}
#wrap #list li:first-child{
opacity: 1;
}
#wrap #list li img{
width: 1024px;
height: 320px;
}
#wrap input{
width: 70px;
height: 80px;
background: #000;
color: #fff;
font-weight: 500;
border: 0;
opacity: .5;
position: absolute;
top: 50%;
cursor: pointer;
}
#wrap #prev{
left: 0;
margin-top: -40px;
}
#wrap #next{
right: 0;
margin-top: -40px;
}
#wrap #bar{
position: absolute;
bottom: 20px;
left: 40%;
}
#wrap #bar li{
margin: 0 10px;
width: 20px;
height: 20px;
background: #fff;
color: #000;
border-radius: 10px;
float: left;
text-align: center;
line-height: 20px;
cursor: pointer;
}
#wrap #bar .hover,#wrap #bar li:hover{
background: red;
color: yellow;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="list">
<li><img src="img01.jpg" alt="" /></li>
<li><img src="img02.jpg" alt="" /></li>
<li><img src="img03.jpg" alt="" /></li>
<li><img src="img04.jpg" alt="" /></li>
<li><img src="img05.jpg" alt="" /></li>
</ul>
<input type="button" id="prev" value="上一张"/>
<input type="button" id="next" value="下一张"/>
<ol id="bar">
<li class="hover">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
<script type="text/javascript">
var oList = document.getElementById("list");
var oLi = oList.children;
var oLiwidth = oLi[0].offsetWidth;
var oBar = document.getElementById("bar");
var aLi = oBar.children;
var i = 0;
//自动切换
var timer = setInterval(function(){
move();
},3000);
//控制移动函数
function move(){
i++;
if(i==oLi.length){
i = 0;
}
if(i==-1){
i = oLi.length-1;
}
//角标颜色随图片变化
for(var j=0;j<aLi.length;j++){
aLi[j].className = "";
}
aLi[i].className = "hover";
//先将所有透明度都变为0,再将指定的那个变为1
for(var m=0;m<oLi.length;m++){
oLi[m].style.opacity = animate(oLi[m],{"opacity":0});
}
oLi[i].style.opacity = animate(oLi[i],{"opacity":100});
}
//上一张,下一张切换
var oPrev = document.getElementById("prev");
var oNext = document.getElementById("next");
oPrev.onclick = function(){
i-=2;
move();
}
oNext.onclick = function(){
move();
}
//角标划过切换图片
for(let k=0;k<aLi.length;k++){
aLi[k].onmouseover = function(){
i=k-1;
move();
}
}
//鼠标在轮播图上划过则停止自动轮播,移出后重启自动轮播
var oWrap = document.getElementById("wrap");
oWrap.onmouseover = function(){
clearInterval(timer);
}
oWrap.onmouseout = function(){
timer = setInterval(function(){
move();
},3000)
}
</script>
</body>
</html>