(27)day6-图片切换

作者: 2333_11f6 | 来源:发表于2018-12-10 20:33 被阅读0次

(27)day6-图片切换
javaScript进阶面向对象ES6-2020-01-06
图片切换
图片切换
如何用JS实现轮播图
单选开关（点击选择与否切换）
js
3、Mpvue配置底部Tab栏切换、页面引入图片、请求数据
简易的电子相册
jq全选反选

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                position: relative;
            }
            #smallImg img{
                width: 200px;
                height: 160px;
                padding-right: 10px;
                
            }
            #bigImg img{
                display: block;
                width: 800px;
                height: 600px;
                padding-left: 240px;
            }
            #bigImg font{
                padding-left: 620px;
            }
        </style>
    </head>
    <body>
        <div id="smallImg">
        </div>
        <script type="text/javascript">
            function showBigImag(){
//              console.log('121')
                var biNode = document.createElement('img')
                biNode.src = this.src
                biNode.id = this.id
                
                var bigImgIdNode = document.createElement('font')
                bigImgIdNode.innerText = biNode.id
                
                var bigImg = document.getElementById('bigImg')
                bigImg.innerHTML = null
                bigImg.appendChild(biNode)
                bigImg.appendChild(bigImgIdNode)
                
            }
//          imgArry = ['img/slide-1.jpg','img/slide-2.jpg','img/slide-3.jpg',
//                     'img/slide-4.jpg','img/picture-1.jpg','img/picture-2.jpg']
            imgArry = ['slide-1','slide-2','slide-3',
                       'slide-4','picture-1','picture-2']
            var siNode = document.getElementById('smallImg')
            for(x in imgArry){
                var imgNode = document.createElement('img')
                imgNode.src = 'img/'+imgArry[x]+'.jpg'
                imgNode.id = imgArry[x]
                siNode.insertBefore(imgNode,siNode.firstChild)
                imgNode.onclick = showBigImag
            }
            
        </script>
        <div id="bigImg">
        </div>
    </body>
</html>