javascript的列表切换

演示地址：http://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);
};

posted @ 2016-05-02 08:59 逗伴不是瓣阅读(1123) 评论(0) 编辑收藏举报

刷新页面返回顶部

九转功成

--->别让惰性阻碍了你飞翔的梦想O(∩_∩)O~

javascript的列表切换

公告