这次我们来说说网页上的Banner,网页上的Banner因为其动态的效果和处于整个页面的中心,所以可以更好的体现网页的中心意旨,起到很好的表达宣传效果。使用户的体验得到更好的提升,当前流行的网页上几乎都有Banner。而Banner的形式有很多种,下面就是我实现的其中一种(如文章标题):
css样式代码如下:
<style type="text/css">
*{ margin: 0px;padding: 0px }
#banner{width: 1000px;height: 400px;background-color: #94c2fa;margin: 100px auto 0;position: relative; }
#banner:hover .prev{display: block}
#banner:hover .next{display: block}
.banner_main{ width: 1000px; height: 400px; }
.banner_ul li{ list-style: none; width: 1000px; height: 400px; position: absolute; }
.banner_ul li img{ width:1000px; height: 400px; }
.banner_span{ width: 1000px; height: 35px; z-index: 1;bottom: 10px;position: absolute }
.banner_span p{ width: 100px; height: 35px; margin: 0 auto; }
.banner_span p span{ width: 15px; height: 15px;background: url("dot.png") no-repeat left bottom;
float: left;margin: 10px 4px;}
.prev{width:60px;height:90px;background:url("ad_ctr.png") no-repeat
5px -180px;position: absolute; top:50%;margin-top: -45px;display: none;
cursor: pointer;}
.prev:hover{background: url("ad_ctr.png") no-repeat 5px top}
.next{width:60px;height:90px;background:url("ad_ctr.png") no-repeat
-5px bottom;position: absolute;top: 50%;margin-top: -45px;right: 0;display: none;
cursor: pointer;}
.next:hover{background: url("ad_ctr.png") no-repeat -3px -88px}
.banner_span .active{background: url("dot.png") no-repeat left top;}
</style>
web界面代码如下:
<!--banner start-->
<div id="banner">
<!--banner_main start-->
<div class="banner_main">
<!--banner_ul start-->
<ul class="banner_ul">
<li><a href="#"><img src="1.jpg"></a></li>
<li><a href="#"><img src="2.jpg"></a></li>
<li><a href="#"><img src="3.jpg"></a></li>
<li><a href="#"><img src="4.jpg"></a></li>
</ul>
<!--end banner_ul-->
</div>
<!--end banner_main-->
<!--banner_span start-->
<div class="banner_span">
<p>
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</p>
</div>
<!--end banner_span-->
<p class="prev"></p>
<p class="next"></p>
</div>
<!--end banner-->
js代码如下:
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(function () {
var index=0;
var interval=null;
var num=$(".banner_span span").length;
$(".banner_ul li:gt(0)").hide();
$(".banner_span span").click(function () {
$(this).addClass("active").siblings().removeClass("active");
var index1=$(".banner_span span").index(this);
$(".banner_ul li").eq(index1).fadeIn("slow").siblings().fadeOut("slow");
index=index1;
});
$(".prev").click(function () {
if(index==0){
index=num;
}
$(".banner_ul li").eq(index-1).fadeIn().siblings().fadeOut();
$(".banner_span span").eq(index-1).addClass("active").siblings().removeClass("active");
index--;
});
$(".next").click(function () {
if(index==num-1){
index=-1;
}
$(".banner_ul li").eq(index+1).fadeIn().siblings().fadeOut();
$(".banner_span span").eq(index+1).addClass("active").siblings().removeClass("active");
index++;
});
function autoPlay() {
interval=setInterval(function () {
autoPlayNext();
},2000)
}
function autoPlayNext() {
if(index==num-1){
index=-1;
}
$(".banner_ul li").eq(index+1).fadeIn().siblings().fadeOut();
$(".banner_span span").eq(index+1).addClass("active").siblings().removeClass("active");
index++;
}
$("#banner").mouseover(function () {
clearInterval(interval);
});
$("#banner").mouseout(function () {
autoPlay();
});
autoPlay();
});
</script>