<div id="bannerBox" class="banner banner_index">
<div class="banner_slide_1" id="banner1"></div>
<div class="banner_slide_2" id="banner2"></div>
<div class="banner_slide_3" id="banner3"></div>
</div>
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
banner页自动播放和图片动态改变
最新推荐文章于 2023-03-02 12:49:05 发布