国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

javascript - js控制元素樣式的疑惑
伊謝爾倫
伊謝爾倫 2017-07-05 10:39:55
0
4
918
/*css*/
ul,li{
        margin: 0;
        padding: 0;
    }
    .slider{
        width: 100%;
        height: 300px;
        overflow: hidden;
    }
    .slider_box{
        width: 500%;
        height:100%;
        transition: all 0.3s;
    }
    .slider_box>ul{
        width: 100%;
        height:100%;
        white-space: nowrap;
    }
    .slider_box>ul>li{
        display: inline-block;
        width: 20%;
        height: 100%;
    }
    .slider_box>ul>li:nth-of-type(0){
        background: #000088;
    }
    .slider_box>ul>li:nth-of-type(1){
        background: #004444;
    }
    .slider_box>ul>li:nth-of-type(2){
        background: #221199;
    }
    .slider_box>ul>li:nth-of-type(3){
        background: #AA1111;
    }
    .slider_box>ul>li:nth-of-type(4){
        background: #E38D13;
    }

/*html*/
<p class="slider">
    <p class="slider_box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </p>
</p>

/*js*/
var list = document.getElementsByClassName("slider_box")[0];
    var arr = list.children;
    var test = 0;
    function slide(){
        if(test<5){
        list.style.transform = "translateX(-"+test*20+"%)";
        test++;
        setTimeout("slide()",1000);
        }    
        }
    slide();

如上代碼,每間隔一秒,slider_box向左滑動20%(1屏),可是問題來了,當(dāng)滑到100%后,不能再向左滑動了(再滑動就沒有圖片了),而我在其他一些插件上看的效果卻是每間隔一秒,slider_box的滑動變化為-20%至0再到-20%.這樣處理就不會存在當(dāng)slider_box滑動到100%時再滑動就跑出區(qū)域的問題了,那么問題是這些插件它是如何處理使slider_box由-20%變?yōu)?再變?yōu)?20%的呢?如上代碼我嘗試了先清除上一次的滑動樣式,再設(shè)置本次滑動樣式:

function slide(){
        list.style.transform = "translateX(-20%)";
        if(test<5){
//            list.style.transform = "translateX(-"+test*20+"%)";
            list.style.transform = "translateX(0)";
            test++;
            setTimeout("slide()",1000);
        }    
        }
    slide();

卻實現(xiàn)不了其中的變化,而且也不滑動了,那么要達(dá)到如插件上的效果,我這里應(yīng)該如何處理.
是不是壓根人家就不是按照這種思路來的?
插件中的js方法封裝得太深奧,恕我實在不知所云.
另:插件鏈接:http://sc.chinaz.com/jiaoben/...

伊謝爾倫
伊謝爾倫

小伙看你根骨奇佳,潛力無限,來學(xué)PHP伐。

全部回復(fù)(4)
三叔

動一下就把第一個li apend到最后

女神的閨蜜愛上我

你原來的方式?jīng)]問題的,只是你判斷了 test<5 但卻一直把 test 加。所以把 test++ 改成 test = (test + 1) % 5 應(yīng)該就行。

typecho

你是想實現(xiàn)無縫輪播吧。一般來說 2種思路 1.控制父容器的屬性 2.控制子元素的屬性 比如left,transformX margin 。先要實現(xiàn)無縫 也有2種思路 1.前后各多一張圖片,初始化顯示第2張圖片
2.不多圖片,初始化顯示第二張圖片,不過呢 用戶看到的永遠(yuǎn)都是第二個位置。
可以看我去年寫的一個簡單的無縫輪播 簡易無縫輪播

過去多啦不再A夢

那個就是無縫輪播。

    <p  style="left: -600px;">
        <img src="image/5.jpg" alt="1"/>
        <img src="image/1.jpg" alt="1"/>
        <img src="image/2.jpg" alt="2"/>
        <img src="image/3.jpg" alt="3"/>
        <img src="image/4.jpg" alt="4"/>
        <img src="image/5.jpg" alt="5"/>
        <img src="image/1.jpg" alt="5"/>
    </p>

就像這樣,在頭尾各添加一個副本,再加上輪播到真正的頭尾(即是我代碼的第二個img和第六個img),你加上if判斷,判斷你的list.style就OK了

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板