2018.7.28

图片切换

<style type="text/css">
            *{
                margin:0;
                padding:0;
                box-sizing: border-box;
            }
            li{
                list-style: none;
            }
            a{
                text-decoration: none;
            }
            .container{
                width:600px;
                margin:0 auto;
                border:1px solid #000;
            }
            .container>ul{
                overflow: hidden;
            }
            .container>ul>li{
                float:left;
            }
            .main>img{
                width:400px;
                height:400px;
            }
</style>

<div class='container'>
<style type="text/css">
            *{
                margin:0;
                padding:0;
                box-sizing: border-box;
            }
            li{
                list-style: none;
            }
            a{
                text-decoration: none;
            }
            .container{
                width:600px;
                margin:0 auto;
                border:1px solid #000;
            }
            .container>ul{
                overflow: hidden;
            }
            .container>ul>li{
                float:left;
            }
            .main>img{
                width:400px;
                height:400px;
            }
</style>

<div class='container'>
    <ul>
        <li>
            <a href="#">
                <img src="img/home1.jpg">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="img/home2.jpg">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="img/home3.jpg">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="img/home0.jpg">
            </a>
        </li>
    </ul>

    <div class='main'>
        <img src="img/home1jpg">
    </div>
</div>

<script type="text/javascript">
            var img=document.querySelectorAll('.container>ul>li>a>img');
            console.log(img);
            var mainImg=document.querySelector('.main>img');
            console.log(mainImg);
            for(var i=0;i<img.length;i++){
                img[i].onclick=function(){
                    mainImg.src=this.src;
                }
            }
</script>

    <ul>
        <li>
            <a href="#">
                <img src="img/home1.jpg">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="img/home2.jpg">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="img/home3.jpg">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="img/home0.jpg">
            </a>
        </li>
    </ul>

    <div class='main'>
        <img src="img/home1.jpg">
    </div>
</div>

<script type="text/javascript">
            var img=document.querySelectorAll('.container>ul>li>a>img');
            console.log(img);
            var mainImg=document.querySelector('.main>img');
            console.log(mainImg);
            for(var i=0;i<img.length;i++){
                img[i].onclick=function(){
                    mainImg.src=this.src;
                }
            }
</script>