轮播图

作者: 编程师小刘 | 来源:发表于2016-12-01 21:57 被阅读0次

<style>

* {

padding: 0;

margin: 0;
}
li {

list-style: none;

}

img {

border: none;

}

.box {

width: 670px;

height: 240px;

margin: 50px auto;

position: relative;

}

.imgBox img {

width: 670px;

height: 240px;

display: block;

}

.num {

position: absolute;

bottom: 5px;

right: 5px;

}

.num li {

float: left;

margin-right: 5px;

width: 22px;

height: 22px;

background: #999;

color: #FFF;

line-height: 22px;

text-align: center;

border-radius: 50% 50%;

font-family: "微软雅黑";

font-size: 12px;

cursor: pointer;

}

.num .active {

background: #E4393C;

}

</style>

<script>

window.onload=function(){

var aLi=document.getElementsByTagName('li');

var oImgs=document.getElementById('imgs');

for(var i=0; i<aLi.length; i++){

aLi[i].index=i;

aLi[i].onmouseover=function(){

for(var i=0; i<aLi.length; i++){

aLi[i].className='';

}

this.className='active';

oImgs.innerHTML='<a href="javascript:;"><img src="img/pic'+(this.index+1)+'.jpg" alt=""></a>'

}

}

}

</script>

</head>

<body>

<div class="box">

<div class="imgBox" id="imgs">

<a href="javascript:;"><img src="img/pic1.jpg" alt=""></a>

</div>

<ul class="num" id="num">

<li class="active">1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

</ul>

</div>

</body>