JS原生轮播-基础篇（HTML+CSS）部分

素颜马尾好姑娘i 2022-08-03 00:18 49阅读 0赞

根据慕课网的轮播教程，今早也写了一个，主要是把思路捋清楚，下面的代码我尽全力把每一行解释清楚，  
我也是根据我今早写的思路一步一步来，希望能帮到读者！  
那么就从最基础的HTML和CSS开始写

<div id="contain">
            <ul id="contain_imgs" style="left:-1024px;">
                <li><img src="haizei4.jpg"/></li>
                <li><img src="haizei1.jpg"/></li>
                <li><img src="haizei2.jpg"/></li>
                <li><img src="haizei3.jpg"/></li>
                <li><img src="haizei4.jpg"/></li>
                <li><img src="haizei1.jpg"/></li>
            </ul>
            <a href="javascript:;" id="prev" class="arrow"><</a>//左箭头
            <a href="javascript:;" id="next" class="arrow">></a>//右箭头
        <div id="link">//这几个是下面的按钮，点击那个就会切换到哪个图片
            <span class="on"></span>
            <span></span>
            <span></span>
            <span></span>
        </div>  
    </div>

**CSS**

#contain_imgs{
        margin: 0 auto;
        padding: 0px;
    }
    #contain{
        margin: 0 auto;
        width: 1024px;
        height: 575px;
        position: relative;//核心代码，因为我们需要绝对定位，先把父元素设为相对定位
        overflow: hidden;//其他的隐藏起来
    }
    #contain_imgs{
        position: absolute;//绝对定位，这样我们就可以定位left值，做到改变left的值可以切换图片
        top: 0px;
        width: 6144px;
        height: 576px;
        list-style: none;
        z-index: 1;
    }
    #contain_imgs li{
        width: 1024px;
        height: 575px;
        float: left;
    }
    #prev { 
        left: 20px;
    }
    #next {
        right: 20px;
    }
    .arrow { 
        cursor: pointer;
        display: none;
        line-height: 100px; 
        text-align: center; 
        font-size: 100px; 
        font-weight: bold; 
        width: 100px; 
        height: 100px;  
        position: absolute; 
        z-index: 2; //避免遮盖
        top: 220px; 
        background-color: RGBA(0,0,0,.3); 
        color: #fff;
        text-decoration: none;
    }
    .arrow:hover { 
        background-color: RGBA(0,0,0,.7);//最后的数是用来调整透明度
    }
    #contain:hover .arrow { 
        display: block;
    }
    #link{
       position: absolute;
        left:390px;
        bottom: 10px;
        z-index: 2;
    
    }
    
    #link span{
        margin: 0 10px;
        cursor: pointer; 
        float: left;
        border: 1px white solid; 
        width: 20px;
        height: 20px;
        border-radius: 50%;//做成圆形按钮
        background-color: black;
    }
    #link .on{
        background-color: red;//当我们切换按钮时用到的
    }

在这里为了更清楚，请原谅我盗几张图  
![这里写图片描述][20150728103142618]  
这就是我们写完CSS的样式，在蓝色背景之后的都被隐藏了，也就是之后的picture2，3，4  
这就是hidden的作用，我们通过调整left的值，我的代码图片是1024px宽，我也就是我如果定位到  
left=-1024px 那就回变为第二张图，但我的源码之所以从-1024px开始，因为要实现循环滚动效果  
这里比较简单，下一篇我在写JS的部分

[20150728103142618]: /images/20220731/3c3a8926c7074301949a824492c921d5.png