WebStorm代码调整与HTML图片轮播-优快云博客

本文链接：https://blog.youkuaiyun.com/stopcpp/article/details/52882945

webStrom快捷键 ctrl+shift+↑↓ 可以调整代码位置

下面的4张图片用的是300*200的

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 600px;
            height: 200px;
            margin: 100px auto;
            border: 1px solid red;
            overflow: hidden;
        }
        .box ul{
            width: 900px;
            list-style: none;
        }
        .box ul li{
            width: 150px;
            height: 200px;
            border: 1px solid red;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>
<script>
    var box = document.getElementsByTagName("div")[0];
    var ul = box.children[0];
    var lis = ul.children;
    for(var i=0;i<lis.length;i++){
        lis[i].style.backgroundImage = "url(images/"+(i+1)+".jpg)";
        lis[i].index= i;
        lis[i].onmouseover = function () {
            for(var i=0;i<lis.length;i++){
                lis[i].style.width = "100px";
            }
            this.style.width = "300px";
        }
        lis[i].onmouseout = function () {
            for(var j=0;j<lis.length;j++){
                lis[j].style.width = "150px";
            }
        }
    }
</script>

tx4-手风琴效果