banner页自动播放和图片动态改变

	

	

	



css中：
/*2018-1-5 14:42 zxk tab页轮播的css start*/
*{
   margin:0;
  padding:0;
}
.banner {
    width: 100%;
    min-width: 6rem;
    height: 9rem;
    overflow: hidden;
}
.banner_index {
    position: relative;
}
.banner_slide_1 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    transition: opacity 0.5s;
    opacity: 1;
    z-index: 5;
  /*background: url(../img/banner.jpg) no-repeat;*/
    background-position: center 0;
    background-size: cover;width: 100%;
}
.banner_slide_2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    transition: opacity 0.5s;
    opacity: 0;
    z-index: 1;
  /*background: url(../img/time1.jpg) no-repeat;*/
    background-position: center 0;
    background-size: cover;width: 100%;
}
.banner_slide_3 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    transition: opacity 0.5s;
    opacity: 0;
    z-index: 1;
  /*background: url(../img/time2.jpg) no-repeat;*/
    background-position: center 0;
    background-size: cover;width: 100%;
}
/*2018-1-5 14:42 zxk tab页轮播的css end*/

js中：
//2018-1-8 10:10 zxk tab轮播图片加载 start
  $(function(){
     loadImg();
  })
//2018-1-8 10:10 zxk tab轮播图片加载 end

//2018-1-5 19:31 zxk tab轮播图片加载 start
function loadImg(){
    $.post(
        publicurl+'/notice!mobileTabImgList.do',
        {"sid":sid},
        function(data){
            if(data.length > 0){
                var item = data[0];
                $(".banner_slide_1").css({
                    'background-image':'url('+publicurl+'/'+item.img1+')',
                    'background-repeat':'no-repeat'
                });
                $(".banner_slide_2").css({
                    'background-image':'url('+publicurl+'/'+item.img2+')',
                    'background-repeat':'no-repeat'
                });
                $(".banner_slide_3").css({
                    'background-image':'url('+publicurl+'/'+item.img3+')',
                    'background-repeat':'no-repeat'
                });
            }
        },
        'json'
    )
}
//2018-1-5 19:31 zxk tab轮播图片加载 end

//2018-1-5 14:44 zxk tab页轮播的js start
window.οnlοad=function bannerSlide() {
    if (!document.getElementById) return false;
    if (!document.getElementsByTagName) return false;
    if (!document.getElementById("bannerBox")) return false;
    var i = 0;
    var box = document.getElementById("bannerBox");
    var banner = box.getElementsByTagName("div");
    sli = setInterval(slide, 4000); //轮播间隔时间
    function slide() {
        if (i == banner.length - 1) {
            banner[0].style.display = "block";
            banner[0].style.opacity = "1";
            banner[i].style.opacity = "0";
            setTimeout(function() {
                    banner[i].style.display = "none";
                    banner[i].style.zIndex = "1";
                    banner[0].style.zIndex = "5";
                    i = 0;
                }, 400) //动画过渡时间，搭配CSS使用
        } else {
            banner[i + 1].style.display = "block";
            banner[i + 1].style.opacity = "1";
            banner[i].style.opacity = "0";
            setTimeout(function() {
                banner[i + 1].style.zIndex = "5";
                banner[i].style.display = "none";
                banner[i].style.zIndex = "1";
                i++;
            }, 500)
        }
    }
}
//2018-1-5 14:44 zxk tab页轮播的js end