Jquery图片左右轮换为什么我的图片中间出现空白啊,第一张图片然后空白再...
发布网友
发布时间：2022-04-24 15:22
共2个回答
热心网友
时间：2022-04-25 20:02
我不知道你是怎么做的，我这又个demo你可以看看，不过要下载插件了。
<style>#slider_box{
width:100%;
height:500px;
border:1px solid #ddd;
}
.banner{
height:500px;
overflow:hidden;
}
.banner .d1{
width:100%;
height:500px;
display:block;
}
.banner .d2{
width:100%;
height:50px;
line-height:50px;
clear:both;
position:absolute;
z-index:100;
left:0;
top:590px;
background:#000;
opacity: 0.4;
}
.banner .d2 ul{
float:left;
position:absolute;
left:80%;
top:0;
margin:0 0 0 -96px;
display:inline;
z-index: 2;
}
.banner .d2 li{
width:17px;
height:50px;
line-height:50px;
overflow:hidden;
cursor:pointer;
background:url(images/img1.png) no-repeat center;
float:left;
margin:0 3px;
display:inline;
}
.banner .d2 li.nuw{
background:url(images/img1_1.png) no-repeat center;
}
</style>
<script>
function banner(){
var bn_id = 0;
var bn_id2= 1;
var speed33=3000;
var qhjg = 1;
var MyMar33;
$("#banner .d1").hide();
$("#banner .d1").eq(0).fadeIn("slow");
if($("#banner .d1").length>1){
$("#banner_id li").eq(0).addClass("nuw");
function Marquee33(){
bn_id2 = bn_id+1;
if(bn_id2>$("#banner .d1").length-1){
bn_id2 = 0;
}
$("#banner .d1").eq(bn_id).css("z-index","2");
$("#banner .d1").eq(bn_id2).css("z-index","1");
$("#banner .d1").eq(bn_id2).show();
$("#banner .d1").eq(bn_id).fadeOut("slow");
$("#banner_id li").removeClass("nuw");
$("#banner_id li").eq(bn_id2).addClass("nuw");
bn_id=bn_id2;
};
MyMar33=setInterval(Marquee33,speed33);
$("#banner_id li").click(function(){
var bn_id3 = $("#banner_id li").index(this);
if(bn_id3!=bn_id&&qhjg==1){
qhjg = 0;
$("#banner .d1").eq(bn_id).css("z-index","2");
$("#banner .d1").eq(bn_id3).css("z-index","1");
$("#banner .d1").eq(bn_id3).show();
$("#banner .d1").eq(bn_id).fadeOut("slow",function(){qhjg = 1;});
$("#banner_id li").removeClass("nuw");
$("#banner_id li").eq(bn_id3).addClass("nuw");
bn_id=bn_id3;
}
})
$("#banner_id").hover(function(){
clearInterval(MyMar33);
},
function(){
MyMar33=setInterval(Marquee33,speed33);
})
}
else{
$("#banner_id").hide();
}
}
</script>
</head>
<body>
<div class="right_box">
<div class="banner" id="banner" >
<a href="" class="d1" style="background:url(images/0211.png) left center no-repeat;"></a>
<a href="" class="d1" style="background:url(images/0211.png) left center no-repeat;"></a>
<a href="" class="d1" style="background:url(images/0211.png) left center no-repeat;"></a>
<a href="" class="d1" style="background:url(images/0211.png) left center no-repeat;"></a>
<a href="" class="d1" style="background:url(images/0211.png) left center no-repeat;"></a>
<div class="d2" id="banner_id">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.nicescroll.js"></script>
<script>
banner()
</script>
</body>
热心网友
时间：2022-04-25 21:20
