js练习--轮播图

最新推荐文章于 2022-03-28 12:26:56 发布

丁小柒

最新推荐文章于 2022-03-28 12:26:56 发布

阅读量301

点赞数

分类专栏： javascript 文章标签： javascript html

本文链接：https://blog.csdn.net/qq_33548381/article/details/53470648

版权

javascript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

一个小小的轮播图，学了那么久了，开始自己试着造轮子~
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>