图标变换图片---轮播切换

1、css

 

.list_main_left{    width: 980px;height: 123px;position: absolute;top: 603px;left: 198px;}
/*改导航背景图-开始*/
/*.list_main_left .list_tit{ height:123px; background:url(../images/tab_img_04.png) no-repeat;}*/
.list_main_left .list_tit li{ width:140px; height:118px;background-image: url(../images/tab_img_04.png); cursor:pointer; float:left;}
.list_main_left .list_tit li.list_acitve{background-image:none;}
.list_main_left .list_tit li:nth-of-type(1){background-position:0 0 ;}
.list_main_left .list_tit li:nth-of-type(2){background-position:-140px 0 ;}
.list_main_left .list_tit li:nth-of-type(3){background-position:-280px 0 ;}
.list_main_left .list_tit li:nth-of-type(4){background-position:-420px 0 ;}
.list_main_left .list_tit li:nth-of-type(5){background-position:-560px 0 ;}
.list_main_left .list_tit li:nth-of-type(6){background-position:-700px 0 ;}
.list_main_left .list_tit li:nth-of-type(7){background-position:-840px 0 ;}
/*改导航背景图-结束*/
.list_main_left .list_tit li span{ display:inline-block; width:146px; height:130px;background:url(../images/tab_img_04.png) no-repeat 0 -940px;}
.list_main_left .list_tit li.list_acitve span.t011{ background-position:0 -128px;}
.list_main_left .list_tit li.list_acitve span.t012{ background-position:-141px -128px;}
.list_main_left .list_tit li.list_acitve span.t013{ background-position:-280px -128px;}
.list_main_left .list_tit li.list_acitve span.t014{background-position:-420px -128px;}
.list_main_left .list_tit li.list_acitve span.t015{ background-position:-562px -128px;}
.list_main_left .list_tit li.list_acitve span.t016{ background-position:-700px -128px;}
.list_main_left .list_tit li.list_acitve span.t017{ background-position:-837px -128px;}

 

 

 

2、html

 <div class="list_main_left">
                    <ul class="list_tit">
                        <li class="list_acitve"><span class="t011"></span></li>
                        <li ><span class="t012"></span></li>
                        <li  class=""><span class="t013"></span></li>
                        <li  class=""><span class="t014"></span></li>
                        <li  class=""><span class="t015"></span></li>
                        <li  class=""><span class="t016"></span></li>
                    </ul>
                </div>

 

3、js

 

 

//职业介绍页面切换
$(document).ready(function() {
    $(".list_main_left .list_tit li").click(function(){
        $(this).addClass("list_acitve").siblings().removeClass("list_acitve");
        var index = $(".list_main_left .list_tit li").index( $(this) );
        $(".list_content_right1").eq(index).show().siblings(".list_content_right1").hide();
        $(".zhi_lun_img1").eq(index).show().siblings(".zhi_lun_img1").hide();
        $(".zhi_lun_video1").eq(index).show().siblings(".zhi_lun_video1").hide();
    });     
});    

 

 

 

4、使用方法

 

直接在js中插入这段代码  css中定位的背景图片一张是从00 开始 

 

5、效果