一个小小的轮播图,学了那么久了,开始自己试着造轮子~
HTML部分
<div id="lb">
<img src="" width="800px" height="500px">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
css部分
<style type="text/css">
#lb{
width: 802px;
height: 650px; }
img{
border: 1px solid cornflowerblue;
}
ul{
display: flex;
flex-direction: row;
justify-content: center;
}
li{
display: block;
width: 60px;
height: 60px;
list-style: none;
margin-left: 10px;
font-size: 30px;
text-align: center;
line-height: 60px;
border: 1px solid gray;
background: darkgray;
border-radius: 50%;
cursor: pointer;
}
</style>
JS部分
<script type="text/javascript">
(Window.onload=function(){
var im=document.getElementsByTagName('img')[0];
var l=document.getElementsByTagName('li');
for(var i=0;i<=l.length;i++){
l[i].addEventListener('click',function(){
im.src='img/'+this.innerHTML+'.jpg';
})
};
})()
</script>