在网页编辑中,banner是经常碰到的,这里介绍几种banner,要用到JQUERY.
第一种:直接改背景图片切换的,这种适合width:100%。没有文字说明,可以显示数字,上一页,下一页
<!--******************滚动条********************-->
<div id="banner"><!----------------------背景图片变换---------------------------->
<div class="btn"><!--------------数字-------------------->
<ul>
<li class="hover" dl="1">1</li>
<li class="" dl="2">2</li>
<li class="" dl="3">3</li>
<li class="" dl="4">4</li>
</ul>
<div style="clear: both"></div>
</div>
<div class="next_banner"><!--------------下一页-------------------->
<a href="javascript:next_to()"></a>
</div>
<div class="pre_banner"><!--------------上一页-------------------->
<a href="javascript:next_to()"></a>
</div>
</div>
CSS 样式:
/*---------------------------------top banner-----------------------------------*/
#banner{width:100%;height:402px;
background:url("../images/top_banner1.gif") top center;position:relative;margin:0px auto; z-index:2;}
.btn{position:absolute;top:385px;left:45%;color:red;/*border-radius:11px;*/}
.btn ul li{float:left;line-height:15px;display:block;margin-left:5px;}
.btn ul li{
display: block;
height:5px;
width:20px;
background:#dfdfdf;
text-align:center;
font-size:5px;color:#dff81b;
margin-top:10px;
font-size:0px;
}
.btn ul .hover {display:block;height:20px;width:20px;background:url("../images/fenyetiao_02.gif") no-repeat;filter:alpha(opacity=60 ); -moz-opacity:0.60 ;opacity:0.60 ;
font-size:12px;color:#dff81b;text-align:center;margin-top:0px;}
.next_banner {
position: absolute;
top: 42%;
left: 45%;
z-index:66;
}
.next_banner a {
display:block;
width:32px;
height:32px;
background:url(../images/jiantou003.png) no-repeat;
}
.pre_banner {
position: absolute;
top: 42%;
left: 45%;
z-index:66;
}
.pre_banner a {
display:block;
width:32px;
height:32px;
background:url(../images/jiantou003.png) no-repeat;
}
下面是JQ部分:
/*----------------------------------------------------top banner------------------------------------------*/
$(document).ready(function () {
$("#banner .btn li").mouseover(function () {
clearInterval(timer);
var cs = $(this).attr("dl");
$(this).attr("class","hover").siblings().attr("class", "");
$("#banner").css("background", "url(images/top_banner" + cs + ".gif) top center ").fadeIn("slow");/*----------------实现变换--------------------*/
}).mouseout(function () {
autoplay();
});
$("#banner .next").mouseover(function () {
clearInterval(timer);
}).mouseout(function () {
autoplay();
});
})
var index = 0;
var timer = null;
/*3 定时任务*/
function autoplay() {
timer = setInterval(function () {
index++;
if (index < 4) {
$("#banner .btn li").eq(index).attr("class","hover").siblings().attr("class", "");
$("#banner").css("background", "url(images/top_banner" + (index + 1) + ".gif) top center ").fadeIn("slow");/*----------------实现变换--------------------*/
} else { index = -1; }
}, 3000);
}
autoplay();
/*---当鼠标滑到#banner盒子上则不会自动切换,离开是则会自动切换*/
$("#banner .btn li").mouseover(function () {
clearInterval(timer);
}).mouseout(function () {
autoplay();
});
function next_to() {
index++;
if (index < 4) {
$("#banner .btn li").eq(index).attr("class","hover").siblings().attr("class", "");
$("#banner").css("background", "url(images/top_banner" + (index + 1) + ".gif) top center ").fadeIn("slow");/*----------------实现变换--------------------*/
} else {
$("#banner .btn li").eq(0).attr("class", "hover").siblings().attr("class", "");
$("#banner").css("background", "url(images/top_banner" + 1 + ".gif) top center ").fadeIn("slow");/*----------------实现变换--------------------*/
index = 0;
}
}
这是第一种,变化的道理很简单,就是$("#banner").css("background", "url(images/top_banner" + 1 + ".gif) top center ").fadeIn("slow");
第二种:左右滚动,自动播放,数字显示,还有文字说明的,这种要用到插件。
<div id="container">
<div id="example">
<div id="slides">
<div class="slides_container">
<div>
<img src='images/dongtai_banner1.gif' alt='' style="margin-top: 1px;" />
<h4>标题</h4>
<div class="word">jaijfioajofijaiofjoiahfioa</div>
</div>w
<div>
<img src='images/dongtai_banner2.jpg' alt='' style="margin-top: 1px;" />
<h4>标题</h4>
<div class="word">jaijfioajofijaiofjoiahfioa</div>
</div>
<div>
<img src='images/dongtai_banner3.jpg' alt='' style="margin-top: 1px;" />
<h4>标题</h4>
<div class="word">jaijfioajofijaiofjoiahfioa</div>
</div>
<div>
<img src='images/dongtai_banner4 .jpg' alt='' style="margin-top: 1px;" />
<h4>标题</h4>
<div class="word">jaijfioajofijaiofjoiahfioa</div>
</div>
</div>
<a href="#" class="prev">
<img src="images/left_go_01.png" width="24" height="43" alt="上一张" οnmοuseοver="this.src='images/left_go.gif'" οnmοuseοut="this.src='images/left_go_01.png'" />
</a>
<a href="#" class="next">
<img src="images/right_go.gif" width="24" height="43" alt="下一张" οnmοuseοver="this.src='images/right_go_01.png'" οnmοuseοut="this.src='images/right_go.gif'" /></a>
</div>
</div>
</div>
#container {
width:360px;
margin:0 auto;
position:relative;
z-index:0;
}
#example {
width:360px;
height:269px;
position:relative;
}
#slides {
position:absolute;
z-index:20;
}
#slides .next,#slides .prev {<!---------------上一页,下一页样式------------------>
position:absolute;
top:107px;
left:0px;
width:24px;
height:43px;
display:block;
z-index:101;
}
.slides_container {
width:360px;
height:269px;
overflow:hidden;
position:relative;
}
#slides .next {
left:336px;
}
/*--------------数字序号样式的编辑------------------*/
.pagination {
display:none;
}
.word{<!-----------------文字的样式---------------->
}
JQ部分:
<script type="text/javascript" src="js/slides.min.jquery.js"></script>
/*-----------------公告通知---------------------*/
$('#slides').slides({
preload: true,
preloadImage: 'images/loading.gif',
play: 3000,
pause: 1500,
hoverPause: true
});
这种的banner无法适应全屏,一般只用在页面中,不换在顶部。
在介绍一种多图的一种banner:
<div id="datouwang">
<a class="pre"></a><!-----------------------上一页--------------------------------->
<div id="wai_box"> <!------------------------显示区域,overflow:hidden---------------------------------------->
<div class="datouwang_box"><!------------------------滚动区域-------------------------------------->
<ul>
<li>
<a href="#" class="images">
<img src="images/tianzi.png" /><br />
土豆网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
迅雷看看</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
龍将</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
pps</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
秦美人</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
秦美人</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
土豆网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
迅雷看看</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
龍将</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
pps</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
秦美人</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
秦美人</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
优酷视频</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
1号店面</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
</ul>
<ul>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
土豆网</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
迅雷看看</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
龍将</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
pps</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
秦美人</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
秦美人</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
土豆网</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
迅雷看看</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
龍将</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
pps</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
秦美人</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
秦美人</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
优酷视频</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
1号店面</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/shanbiao.gif" /><br />
大头网</a></li>
</ul>
<ul>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
土豆网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
迅雷看看</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
龍将</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
pps</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
秦美人</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
秦美人</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
土豆网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
迅雷看看</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
龍将</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
pps</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
秦美人</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
秦美人</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
优酷视频</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
1号店面</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
<li><a href="#" class="images">
<img src="images/tianzi.png" /><br />
大头网</a></li>
</ul>
</div>
</div>
<a class="next"></a><!-----------------------下一页--------------------------------->
<!--数字nav-->
<div class="nav">
<a class="now"></a>
<a></a>
<a></a>
</div>
</div>
CSS部分:
#datouwang {
height: 360px;
width: 1000px;
margin:0px auto;
position: relative;
top: 0px;
left: 0px;
}
#datouwang .pre{
background-image: url(../images/jiantou0011.png);
background-repeat: no-repeat;
display: block;
height: 70px;
width: 35px;
cursor:pointer;
position: absolute;
left: -26px;
top: 190px;
z-index:13;
}
#datouwang .pre:hover
{
background-image: url(../images/jiantou0012_01.gif);
}
#datouwang .next{
background-image: url(../images/jiantou0011_01.gif);
background-repeat: no-repeat;
display: block;
height: 70px;
width: 35px;
cursor:pointer;
top: 190px;
right: -26px;
position: absolute;
z-index:13;
}
#datouwang .next:hover
{
background-image: url(../images/jiantou0012.png);
}
/*#datouwang a.next:hover{background-position: -25px top;}*/
#datouwang #wai_box {
height: 360px;
width: 1000px;
overflow: hidden;
position: relative;
left:-10px;
}
#datouwang .datouwang_box{
height: 360px;
width:4000px; /*----------------------------------很大的宽度------------------------------------------*/
position: absolute;
left: 0px;
top: 40px;
float:left;
}
#datouwang .datouwang_box a.img:hover{
-moz-opacity:0.9;
-khtml-opacity:0.9;
Opacity:0.9;
Filter:alpha(opacity=90);
outline:none;
}
#datouwang .datouwang_box .img{
display: block;
}
#datouwang .datouwang_box ul {
float: left;
height: 360px;
width: 1000px;
overflow:auto;
}
/*--单张图片宽度--*/
#datouwang .datouwang_box ul li{width:85px;float:left;margin:15px 0 0px 15px;display:block;text-align:center;
height: 85px;position:relative; z-index:1;
}
#datouwang .datouwang_box ul li a{display:block;}
#datouwang .datouwang_box ul li img{margin-bottom:3px;}
#datouwang .nav {
display:none;
height: 10px;
margin-top: 20px;
width:231px;
margin-right: auto;
margin-left: auto;
}
#datouwang .nav a {
background:rgba(100, 100, 100, 0.7);
display: block;
float: left;
height: 10px;
width: 75px;
font-size: 0px;
line-height: 0px;
margin-right: 2px;
cursor:pointer;
}
#datouwang .nav a:hover{
background-color: #F9B766;
}
#datouwang .nav .now{
background-color: #F9B766;
}
JQ部分:
$(document).ready(function () {
var page = 0;//初始化当前的版面为1
var $show = $("#datouwang").find(".datouwang_box");//找到图片展示区域
var page_count = $show.find("ul").length;
var $width_box = $show.parents("#wai_box").width();//找到图片展示区域外围的div
/*-------------------------------------------------------------------------
//显示title文字
$show.find("li").hover(function(){
$(this).find(".title").show();
},function(){
$(this).find(".title").hide();
})
------------------------------------------------------------------------------*/
$("#datouwang").find(".next").click(function () {
//首先判断展示区域是否处于动画
if (!$show.is(":animated")) {
page++;
if (page >= page_count) page = 0;
$show.animate({ marginLeft: -($width_box * page) }, "normal");
$("#datouwang").find(".nav a:eq(" + page + ")").addClass("now").siblings("a").removeClass("now");
return false;
}
})
$("#datouwang").find(".pre").click(function () {
if (!$show.is(":animated")) {
page--;
if (page < 0) page = page_count - 1;
$show.animate({ marginLeft: -($width_box * page) }, "normal");
$("#datouwang").find(".nav a:eq(" + page + ")").addClass("now").siblings("a").removeClass("now");
}
return false;
})
$("#datouwang").find(".nav a").click(function () {
$index = $(this).index();
page = $index;
$show.animate({ marginLeft: -($width_box * $index) }, "normal");
$(this).addClass("now").siblings("a").removeClass("now");
return false;
})
/*----------------------------滚动动画-----------------------------------*/
var timer = null;
function autobo() {
timer = setInterval(function () {
//首先判断展示区域是否处于动画
if (!$show.is(":animated")) {
page++;
if (page >= page_count) page = 0;
$show.animate({ marginLeft: -($width_box * page) }, "normal");
$("#datouwang").find(".nav a:eq(" + page + ")").addClass("now").siblings("a").removeClass("now");
}
}, 3000);
}
// autobo();
//停止计时
$("#datouwang").find(".pre").hover(function () {
clearInterval(timer);
}, function () {
autobo();
});
$("#datouwang").find(".next").hover(function () {
clearInterval(timer);
}, function () {
autobo();
});
});