WEB代码:jiuxian特效-白酒馆特效-点击切换图片动画

---

HTML

 <div class="spiritWrap">
                <div class="bannerSlier">
                    <div class="imgBox">
                        <ul>
                            <li><a href=""><img src="public/img/f63e17c4af3f43f3ba4450f163715797.jpg" alt=""></a></li>
                            <li><a href=""><img src="public/img/e0855dafd75e40eda42c0cd46fa9b456.jpg" alt=""></a></li>
                            <li><a href=""><img src="public/img/7da11c7506d9480283bab377affc014c.jpg" alt=""></a></li>
                            <li><a href=""><img src="public/img/3b50e158f5bd4e18bc9a6327ea22f843.jpg" alt=""></a></li>
                            <li><a href=""><img src="public/img/f63e17c4af3f43f3ba4450f163715797.jpg" alt=""></a></li>
                            <li><a href=""><img src="public/img/loading.gif" alt=""></a></li>
                            <li><a href=""><img src="public/img/loading.gif" alt=""></a></li>
                            <li><a href=""><img src="public/img/loading.gif" alt=""></a></li>


                           
                           
                        </ul>
                    </div>
                    <div class="btnBox">
                        <span class="btnBg">
                            <em class="on">1</em>
                            <em>2</em>
                            <em>3</em>
                            <em>4</em>

                        </span>
                    </div>
                </div>

---

CSS

.spiritWrap{
    width: 1198px;
    border-left: 1px solid #ececec;
    border-right: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    border-top: 2px solid #c94b56;
    height: 485px;
    overflow: hidden;

}
.topTenWrap{
    height: 161px;
    border-left: 1px solid #ececec;
    border-right: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
}
.comTitle{
    /* width: 89px; */
    height: 40px;
    float: left;
}
.rightMenu{
    /* width: 366px; */
    height: 41px;
    float: right;
    display: inline;
    color: #999;
    margin-left: 50px;
    font-size: 11px;
}
.newIndexIcon{
    background:url("../img/newIndexIcon-24.png") no-repeat;
}
.comTitle .comIcon1{
    background-position: 0 -95px;
}
.comTitle i{
    width: 28px;
    height: 29px;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    font-family: Arial;
    color: #fff;
    font-size: 18px;
    text-align: center;
    line-height: 29px;
    font-style: normal;
}
.comTitle span{
    display: inline-block;
    vertical-align: middle;
    color: #333;
    font-size: 17px;
    margin-left: 10px;
    font-family: 微软雅黑;
    width: 51px;
    height: 40px;
}
.rightMenu a{
    padding: 0 7px;
    color: #999;
    font-size: 12px;
}
.rightMenu .goBlank{
    padding: 4px 7px;
    color: #fff;
    background: #d43d4e;
    height: 21px;
    border-radius: 2px;
}
.rightMenu .goBlank span{
    font-family: 宋体;
    padding-left: 5px;
}
.bannerSlier{
    height: 485PX;
    width: 210PX;
    position: relative;
    overflow: hidden;
    float: left;
}
.spiritList{
    width: 988PX;
    float: right;
    height: 485PX;
    overflow: hidden;
    position: relative;
}
.hotWordBox{
    float: left;
    width: 186px;
    border-right: 1px solid #ececec;
    background: #f9f9f9;
    height: 131px;
    padding: 20px 10px 10px 14px;
}
.topTenBox{
    width: 985px;
    float: right;
    height: 162px;
}

.bannerSlier .imgBox{
    height: 485px;
    overflow: hidden;
}
.bannerSlier .imgBox ul{
    width: 5000px;
}
.bannerSlier .imgBox li{
    float: left;
    width: 210px;
    height: 485px;
    list-style: none;
}
.bannerSlier .imgBox img{
    border: 0;
}
.bannerSlier .btnBox{
    bottom: 10px;
    height: 13px;
    left: 0;
    overflow: hidden;
    position: absolute;
    line-height: 13px;
    text-align: center;
    width: 100%;
    z-index: 2000;
}
.bannerSlier .btnBg{
    display: inline-block;
    height: 13px;
    font-size: 0;
    
}
.bannerSlier .btnBg em{
    background: #fff;
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 50%;    
    margin: 0 4px;
    overflow: hidden;
    cursor: pointer;
}
.bannerSlier .btnBg .on{
    background: #fc5422;
}

---

JS

// 白酒馆特效
// 点击切换图片动画
baijiuMarginLength=0;
baijiuMarginLeft=210;
$(".bannerSlier .btnBg em").click(function() {              
    $('.bannerSlier .btnBg em').removeClass('on');
    $(this).addClass('on');
    //获取索引 图片索引与按钮的索引是一一对应的
    var index = $(this).index("");
    console.log(index);
    baijiuMarginLength=-index*baijiuMarginLeft
    $(".bannerSlier .imgBox").animate({
        'margin-left':+baijiuMarginLength+'px'
    },500);
});
// 自动播放切换酒
var jiuIndex2=0;
var jiuIndex;
jiuIndex=setInterval(jiu,2000)
function jiu(){
   jiuIndex2++;
//    console.warn(jiuIndex2);
    if(jiuIndex2>3){
        jiuIndex2=0
    }
//    console.warn(jiuIndex2);
    $('.bannerSlier .btnBg em').removeClass('on');
    $('.bannerSlier .btnBg em').eq(jiuIndex2).addClass('on');
//    console.warn(jiuIndex2);
    baijiuMarginLength=-jiuIndex2*baijiuMarginLeft
    $(".bannerSlier .imgBox").animate({
        'margin-left':+baijiuMarginLength+'px'
    },500);
}

---

**

---

**

---

**

---

**