Paste_Image.png

工作中写官网需要做一个图片的选项卡切换，所以发现了一个superSlide插件，还是比较简单好用的
以下是我做的简单demo

废话不说先上代码

1.首先先引用两个js
superSlide是在jquery的基础上，所以要先引用jq
<script src="js/jquery.min.js" charset="utf-8"></script>
<script src="js/jquery.SuperSlide.js" charset="utf-8"></script>
2.css代码
***默认样式**
*{margin:0;padding:0;list-style:none;}
body{background:#fff;font:normal 12px/22px 宋体;}
img{border:0;}
a{text-decoration:none;color:#333;}
a:hover{color:#1974A1;}
******
.hd{
    display: block;
    overflow: hidden;
}
.hd li{
    width: 100px;
    height: 100px;
    float: left;
    background-size: 100%;
}
.hd li img{
    width: 100px;
}
.tabBar .bd{
    border:1px solid #C8D1D5;
    clear:both;
    position:relative;
    height:200px;
    overflow:hidden;
    width: 100px;
    padding: 0 40px;
}
.tabBar .bd .conWrap{
    width:200px;
}
.bd .prev{
    position: absolute;
    left: 0;
    top: 50%;
}
.bd .next{
    position: absolute;
    right: 0;
    top: 50%;
}
.bd a img{
    width: 50px;
}
.bd .conWrap .con{
    float: left;
}
.bd .conWrap .con img{
    width: 100px;
}
3.html结构
      <div class="tabBar">
            <div class="hd">
                <ul>
                    <li class="on">
                        ![](images/1.png)
                    </li>
                    <li>
                        ![](images/22.png)
                    </li>
                    <li>
                        ![](images/33.png)
                    </li>
                    <li>
                        ![](images/44.png)
                    </li>
                </ul>
            </div>
            <div class="bd">
                <ul class="conWrap">
                    <li class="con">
                        ![](images/a.png)
                    </li>
                    <li class="con">
                        ![](images/b.png)
                    </li>
                    <li class="con">
                        ![](images/c.png)
                    </li>
                    <li class="con">
                        ![](images/d.png)
                    </li>
                </ul>
                <a class="prev">
                    ![](images/lj.png)
                </a>
                <a class="next">
                    ![](images/rj.png)
                </a>
            </div>
        </div>
4.js开启superSlide
       $(".tabBar").slide({
            mainCell:".bd ul",
            effect:"left",
            trigger:"click",
            triggerTime:150,
            pnLoop:true
        });

但是发现一个问题就是最上方图片切换时，如果是背景图标，在css里给class="on"的元素替换图片时，第一次图片切换的时候会先消失一下再出来，不知道是什么问题，所以写成了js动态替换img的src

最后完善成这样啦。看起来好一点

  $(document).ready(function(){
        var co = [11,22,33,44]
        $(".tabBar").slide({
            mainCell:".bd ul",
            effect:"left",
            trigger:"click",
            triggerTime:150,
            pnLoop:true
        });
        $('.hd').find('li').on('click',function(){
            var index = $('.on').index()+1;
            var ins;
            console.log(index);
            $('.hd').find('li img').each(function(i){
                ins = co[i];
                $('.hd').find('li img').eq(i).attr('src','images/'+ins+'.png')
            })
            $('.hd').find('li img').eq($('.on').index()).attr('src','images/'+index+'.png')
        })
    });

之前找demo的时候我从官方下的jq启动不了这个插件。于是用的demo里的jq，所以如果有感兴趣的小伙伴可以跟我要js文件

笔芯