202 汽車大全

js的列表切換

演示地址：https://wjf444128852.github.io/demo/Carousel/index.html

IE兼容性沒處理，確切的說不太會，還望指點一二

思路：

1、js獲取要給定點擊事件的按鈕組對象，如btns=document.xxx(),遍曆過程綁定事件之前先取得當前對象的下標eg:btns[i].index=i;

2、匹配index為將要顯示的DOM對象

3、點擊過程中要切換class，先判斷是否含有指定class，有就刪除，沒有就添加指定class。注:if(!null)為真.

4、onmouseover同理

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/index-banner.js"></script>
</head>
<body>
    <h3>javascript切換效果</h3>
    <section>
        <div class="baner_parent">
            <div class="will_left btn_left">
                <ul>
                    <li data-i="0" class="selected js_btn"><img src="img/Ferrari.png"><span>法拉利</span></li>
                    <li data-i="1" class="js_btn"><img src="img/Mercedes1.png"><span>奔馳</span></li>
                    <li data-i="2" class="js_btn"><img src="img/BMW.png"><span>寶馬</span></li>
                    <li data-i="3" class="js_btn"><img src="img/Audi.png"><span>奧迪</span></li>
                </ul>
            </div>
            <div class="will_left banner_right">
                <!--法拉利-->
                <div class="banner_lists">
                    <img src="img/ferrari01.jpg" alt="">
                    <ul>
                        <li class="will_left btn selected">法拉利1</li>
                        <li class="will_left btn">法拉利2</li>
                        <li class="will_left btn">法拉利3</li>
                        <li class="will_left btn">法拉利4</li>
                    </ul>
                </div>
                <!--奔馳-->
                <div class="banner_lists">
                    <img src="img/benchi01.jpg" alt="">
                    <ul>
                        <li class="will_left btn selected">奔馳1</li>
                        <li class="will_left btn">奔馳2</li>
                        <li class="will_left btn">奔馳3</li>
                        <li class="will_left btn">奔馳4</li>
                    </ul>
                </div>
                <!--寶馬-->
                <div class="banner_lists">
                    <img src="img/baoma01.jpg" alt="">
                    <ul>
                        <li class="will_left btn selected">寶馬1</li>
                        <li class="will_left btn">寶馬2</li>
                        <li class="will_left btn">寶馬3</li>
                        <li class="will_left btn">寶馬4</li>
                    </ul>
                </div>
                <!--奧迪-->
                <div class="banner_lists">
                    <img src="img/aodi01.jpg" alt="">
                    <ul>
                        <li class="will_left btn selected">奧迪1</li>
                        <li class="will_left btn">奧迪2</li>
                        <li class="will_left btn">奧迪3</li>
                        <li class="will_left btn">奧迪4</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

CSS

*{
    list-style: none;
    border:none;
    text-decoration: none;
    margin:0;
    padding:0;
    box-sizing: border-box;
}
h3{
    text-align: center;
    color: dimgrey;
}
.baner_parent{
    width: 1000px;
    margin:0 auto;
}
.will_left{
    float: left;
}
.will_right{
    float: right;
}
.btn_left ul li{
    text-align: center;
    width: 160px;
    height:98px;
    background-color: darkgrey;
    padding: 13px 0;
    cursor: pointer;
    -webkit-transition:all .5s ease-out;
    -moz-transition:all .5s ease-out;
    -o-transition:all .5s ease-out;
    -ms-transition:all .5s ease-out;
    transition:all .5s ease-out;
}
.btn_left ul li.selected{
    background-color: cornflowerblue;
}
.btn_left ul li:not(:nth-child(4)){
    border-bottom: 1px solid dimgrey;
}
.btn_left ul li img{
    width: 50px;
    height: 50px;
}
.btn_left ul li span{
    display:block;
}
.banner_right,.banner_lists img{
    width: 800px;
    height: 391px;
    position: relative;
}
.banner_lists{
    position: absolute;
    height: 391px;
}
.banner_lists:not(:nth-child(1)){
    display: none;
}
.banner_lists ul{
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
}
.btn{
    height: 33px;
    width: 200px;
    border-right: 1px solid #000;
    margin-top: -3px;
    text-align: center;
    line-height: 33px;
    background-color: darkgrey;
    opacity: .8;
    cursor: pointer;
    -webkit-transition:all .5s ease-out;
    -moz-transition:all .5s ease-out;
    -o-transition:all .5s ease-out;
    -ms-transition:all .5s ease-out;
    transition:all .5s ease-out;
}
.btn:hover,.btn.selected{
    background-color: cornflowerblue;
}

/**
 * Created by Administrator on 2016/4/30 0030.
 *  blog:wjf444128852.github.io
 *   不支持IE
 */
window.onload=function(){
    var arrFR = ['img/ferrari01.jpg','img/ferrari02.jpg','img/ferrari03.jpg','img/ferrari04.jpg'];
    var arrBC = ['img/benchi01.jpg','img/benchi02.jpg','img/benchi03.jpg','img/benchi04.jpg'];
    var arrBM = ['img/baoma01.jpg','img/baoma02.jpg','img/baoma03.jpg','img/baoma04.jpg'];
    var arrAD = ['img/aodi01.jpg','img/aodi02.jpg','img/aodi03.jpg','img/aodi04.jpg'];
    var array = [arrFR,arrBC,arrBM,arrAD];
    var btns=document.getElementsByClassName('js_btn');
    var divList=document.getElementsByClassName('banner_lists');
    // 品牌切換
    for(var i=0;i<btns.length;i++){
        btns[i].index=i;
        btns[i].onclick=showItems;
    }
    //ClassName切換,是否含有指定class
    function hasClass(elem,cls){
        return elem.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
    }
    // 沒有就追加指定class
    function addClass(elem,cls){
        if(!hasClass(elem,cls)){
            elem.className+=" "+cls;
        }
    }
    // 有就移除指定class
    function removeClass(elem,cls){
        if(hasClass(elem,cls)){
            var reg=new RegExp('(\\s|^)'+cls+'(\\s|$)');
            elem.className=elem.className.replace(reg,"");
        }
    }
    //ClassName切換,移除所有
    function removeAll(obj){
        for (var i = 0; i < obj.length; i++) {
            removeClass(obj[i],"selected");
        }
    }
    // DIV顯示切換
     function showItems(){
         removeAll(btns);
         addClass(this,"selected");
         for (var s = 0; s< divList.length; s++) {
            divList[s].style.display="none";
            divList[this.index].style.display="block";        
        }
        willHover(this.index);
    }
    // 右邊切換按鈕效果
    function willHover(sum){
        var hoverbtns=divList[sum].getElementsByClassName('btn');
        var img=divList[sum].getElementsByTagName('img')[0];
        for (var i = 0; i < hoverbtns.length; i++) {
            hoverbtns[i].index=i;
            hoverbtns[i].onmouseover=function(){
                removeAll(hoverbtns);
                 addClass(this,"selected");
                var imgSrc=array[sum][this.index];
                img.src=array[sum][this.index];
            }
        }
    }
    // 默認第一次可以切換
    willHover(0);
};

最後更新：2017-11-05 12:04:46

js的列表切換

上一篇： vueJS簡單的點擊顯示與隱藏的效果

下一篇： css3之3d導航

相關內容

熱門內容

最新內容