jquery Banner 图片自动轮换显示
代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="banner.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.timers-1.2.js"></script>
<script type="text/javascript">
$(function(){
var index=0;//显示图片集合索引
var speed=4000;//轮转速度
var showImgSpeed=1000;//图片渐显速度
var imageBigArray;
var imageSmallArray;
var minSmaopacity=0.5;
var minBigopacity=0.05;
var isAuto=1;//1=自动，2=停止
function init(){
imageBigArray=$(".bigimg");
imageSmallArray=$(".smallimg");
$("#top_banner_bottom").html("");
var tmp="";
for(var i=0;i<imageSmallArray.length;i++){
tmp="<img id='bannerImg_"+i+"' src='"+imageSmallArray[i].src+"' width='100' height='60'/></div>"+tmp;
tmp="<div id='m"+i+"' class='imgblock'>"+tmp;
}
$("#top_banner_bottom").html(tmp);
for(var i=0;i<imageSmallArray.length;i++){
$("#m"+i).css({opacity: minSmaopacity});
$("#bannerImg_"+i).hover(
function () {
onOver(this.id.replace("bannerImg_",""));
},
function () {
onOut(this.id.replace("bannerImg_",""));
}
);
}
$("#img_banner").attr("src",imageBigArray[index].src).css({opacity: 0.1}).animate({opacity: 1.0},showImgSpeed);
$("#m"+index).css({opacity: minSmaopacity}).animate({opacity: 1.0},showImgSpeed);
}
function changeImg(i){
$("#img_banner").animate({opacity: 1.0},{duration:showImgSpeed});
$("#m"+i).animate({opacity: 1.0},{duration:showImgSpeed});
}
function every(){
if(isAuto==1){
$("#m"+index).animate({opacity:minSmaopacity},{duration:showImgSpeed});
$("#img_banner").animate({opacity:minBigopacity },{duration:showImgSpeed,complete:function(){
if((index+1)<imageSmallArray.length){
index=index+1;
}else{
index=0;
}
$("#img_banner").attr("src",imageBigArray[index].src)
$(document).stopTime();
$(document).everyTime(speed, every);
changeImg(index);
}});
}
}
function onOver(i){
$(document).stopTime();
isAuto=0;
for(var j=0;j<imageSmallArray.length;j++){
if(j!=i){
$("#m"+j).css({opacity: minSmaopacity});
}else{
index=i;
$("#img_banner").attr("src",imageBigArray[i].src).css({opacity: 0.1}).animate({opacity: 1.0},showImgSpeed);
$("#m"+j).css({opacity: 1.0});
}
}
}
function onOut(i){
isAuto=1;
$("#m"+i).css({opacity: minSmaopacity});
$(document).everyTime(speed, every);
}
init();
$(document).everyTime(speed, every)
});
</script>
</head>
<body>
<div id="top_banner" class="banner_style" >
<img id="img_banner" width="800" height="250px" />
<div id="top_banner_bottom" class="banner_bottom">
<img src="1.jpg" class="bigimg" />
<img src="2.jpg" class="bigimg" />
<img src="3.jpg" class="bigimg" />
<img src="1-1.jpg" class="smallimg" />
<img src="2-2.jpg" class="smallimg" />
<img src="3-3.jpg" class="smallimg" />
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="banner.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.timers-1.2.js"></script>
<script type="text/javascript">
$(function(){
var index=0;//显示图片集合索引
var speed=4000;//轮转速度
var showImgSpeed=1000;//图片渐显速度
var imageBigArray;
var imageSmallArray;
var minSmaopacity=0.5;
var minBigopacity=0.05;
var isAuto=1;//1=自动，2=停止
function init(){
imageBigArray=$(".bigimg");
imageSmallArray=$(".smallimg");
$("#top_banner_bottom").html("");
var tmp="";
for(var i=0;i<imageSmallArray.length;i++){
tmp="<img id='bannerImg_"+i+"' src='"+imageSmallArray[i].src+"' width='100' height='60'/></div>"+tmp;
tmp="<div id='m"+i+"' class='imgblock'>"+tmp;
}
$("#top_banner_bottom").html(tmp);
for(var i=0;i<imageSmallArray.length;i++){
$("#m"+i).css({opacity: minSmaopacity});
$("#bannerImg_"+i).hover(
function () {
onOver(this.id.replace("bannerImg_",""));
},
function () {
onOut(this.id.replace("bannerImg_",""));
}
);
}
$("#img_banner").attr("src",imageBigArray[index].src).css({opacity: 0.1}).animate({opacity: 1.0},showImgSpeed);
$("#m"+index).css({opacity: minSmaopacity}).animate({opacity: 1.0},showImgSpeed);
}
function changeImg(i){
$("#img_banner").animate({opacity: 1.0},{duration:showImgSpeed});
$("#m"+i).animate({opacity: 1.0},{duration:showImgSpeed});
}
function every(){
if(isAuto==1){
$("#m"+index).animate({opacity:minSmaopacity},{duration:showImgSpeed});
$("#img_banner").animate({opacity:minBigopacity },{duration:showImgSpeed,complete:function(){
if((index+1)<imageSmallArray.length){
index=index+1;
}else{
index=0;
}
$("#img_banner").attr("src",imageBigArray[index].src)
$(document).stopTime();
$(document).everyTime(speed, every);
changeImg(index);
}});
}
}
function onOver(i){
$(document).stopTime();
isAuto=0;
for(var j=0;j<imageSmallArray.length;j++){
if(j!=i){
$("#m"+j).css({opacity: minSmaopacity});
}else{
index=i;
$("#img_banner").attr("src",imageBigArray[i].src).css({opacity: 0.1}).animate({opacity: 1.0},showImgSpeed);
$("#m"+j).css({opacity: 1.0});
}
}
}
function onOut(i){
isAuto=1;
$("#m"+i).css({opacity: minSmaopacity});
$(document).everyTime(speed, every);
}
init();
$(document).everyTime(speed, every)
});
</script>
</head>
<body>
<div id="top_banner" class="banner_style" >
<img id="img_banner" width="800" height="250px" />
<div id="top_banner_bottom" class="banner_bottom">
<img src="1.jpg" class="bigimg" />
<img src="2.jpg" class="bigimg" />
<img src="3.jpg" class="bigimg" />
<img src="1-1.jpg" class="smallimg" />
<img src="2-2.jpg" class="smallimg" />
<img src="3-3.jpg" class="smallimg" />
</div>
</div>
</body>
</html>
CSS
代码.banner_style{
width:800px;
height:250px;
position:relative;
padding:0px; border:0px;
}
.banner_bottom{
width:100%;
text-align:right;
bottom:0px;
position:absolute;
height:90px;
line-height:90px;
vertical-align:middle;
overflow:hidden;
display:table-cell;
background-image:url(banner_bg.png)
}
.imgblock{
float:right;
width:100px;
height:60px;
margin-top:12px;
margin-right:5px;
border:2px solid #FFF;
display:inline-block;
cursor:pointer;
}
width:800px;
height:250px;
position:relative;
padding:0px; border:0px;
}
.banner_bottom{
width:100%;
text-align:right;
bottom:0px;
position:absolute;
height:90px;
line-height:90px;
vertical-align:middle;
overflow:hidden;
display:table-cell;
background-image:url(banner_bg.png)
}
.imgblock{
float:right;
width:100px;
height:60px;
margin-top:12px;
margin-right:5px;
border:2px solid #FFF;
display:inline-block;
cursor:pointer;
}
banner_bg.png 是个透明的背景图片
