好久没有搞前端的东西了 熟悉一下,针对自己的记忆,与别人无关
http://download.csdn.net/detail/lzwjavaphp/8239563
<!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>lvzhengwen工作</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.1.4.4.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="home_banner">
<a id="big_a">
<div id="big_img">
</div>
</a>
<div class="relative">
<div id="small_img">
<div class="maxwidth">
<a id="small_pre"><<</a>
<div id="small_imgs">
<a href="javascript:;" class="item"><div class="img" b="images/01.jpg" l="" theid="10">
<img src="images/01.jpg"/></div></a>
<a href="javascript:;" class="item"><div class="img" b="images/02.jpg" l="" theid="10">
<img src="images/02.jpg"/></div></a>
<a href="javascript:;" class="item"><div class="img" b="images/03.jpg" l="" theid="10">
<img src="images/03.jpg"/></div></a>
<a href="javascript:;" class="item"><div class="img" b="images/04.jpg" l="" theid="10">
<img src="images/04.jpg"/></div></a>
<a href="javascript:;" class="item"><div class="img" b="images/05.jpg" l="" theid="10">
<img src="images/05.jpg"/></div></a>
</div>
<a id="small_next">>></a>
</div>
</div>
</div>
</div>
</body>
</html>
@charset "utf-8";
*{padding:0;margin:0;}
a{text-decoration:underline;cursor:pointer;}
.clr{clear:both;overflow:hidden;height:0;width:0;}
.relative{position:relative;width:100%;}
#home_bannera{text-decoration:none;cursor:pointer;}
#home_banner{max-width:900px;margin:0 auto;}
.maxwidth{width:900px;margin:0 auto;}
#big_img{height:450px;background:no-repeat center}
#small_img{height:114px;padding-top:13px;position:absolute;top:-127px;width:100%;background:url(../images/bnbg.png) no-repeat center 0;}
#small_pre,#small_next,#small_imgs{height:104px;line-height:104px;float:left;font-size:22px;}
#small_pre,#small_next{width:22px;display:block;}
#small_pre{margin-right:20px;}
#small_next{margin-left:35px;}
#small_pre:hover{background-position:-22px center;}
#small_next:hover{background-position:-66px center;}
#small_imgs{width:800px;overflow:hidden;}
#small_imgs .item{float:left;padding:0 16px;}
#small_imgs .item .img{cursor:pointer;width:122px;height:92px;padding:3px;
padding-top:10px;background:url(../images/banner_bg.png) no-repeat center bottom;}
#small_imgs .item .img img{width:122px;height:90px;}
#small_imgs .item .active{background:url(../images/banner_bg_a.png) no-repeat center bottom;}
$(function(){
allHome();
});
function allHome(){
$('a').focus(function(){
$(this).blur();
});
changeImages(5);
$('#small_imgs a.item:first').find('div.img').addClass('active');
var allimg = $('#small_imgs .img');
var big_img = $('#big_img');
var big_a = $('#big_a');
var small_next = $('#small_next');
var stop2 = false;
allimg.mouseover(function(){
if($(this).hasClass('active'))return;
allimg.removeClass('active');
$(this).addClass('active');
var img = $(this).attr('b');
var link = $(this).attr('l');
var theid = $(this).attr('theid');
if(big_img.queue('fx').length!=0){
big_img.stop(true);
}
big_img.animate({'opacity':'0.2'},400,function(){
big_img.css('background-image','url('+img+')');
if(link==''){
big_a.attr('href','javascript:;').attr('onClick',"pgvSendClick(
{hottag:'HRTENCENT.HOME.BANNER.BANNER"+theid+"'});").addClass('cdefault');
}else{
big_a.attr('href',link).attr('onClick',"pgvSendClick(
{hottag:'HRTENCENT.HOME.BANNER.BANNER"+theid+"'});").removeClass('cdefault');
}
big_img.animate({'opacity':'1'},700);
});
});
allimg.eq(0).removeClass('active');
allimg.eq(0).mouseover();
$('#home_banner').mouseover(function(){
stop2=true;
}).mouseout(function(){
stop2=false;
});
var marquee2 = autoSwitchHomeBanner(allimg);
MyMar2 = setInterval(marquee2,6000);
function autoSwitchHomeBanner(allimg){
return (function(){
if(stop2)return;
var index = 0;
$('#small_imgs .img').each(function(i){
if($(this).hasClass('active')){
index = i;return false;
}
});
if(index>=4){
small_next.click();
}
var next = $('#small_imgs .img.active:first').parent().next().find('.img');
if(next.length==0){
next = allimg.eq(0);
}
next.mouseover();
stop2 = false;
});
}
}
function changeImages(allowl) {
var itemall = $('#small_imgs .item');
iteml = itemall.length;
if (iteml <= allowl) {
$('#small_pre,#small_next').css('background', 'none');
return;
}
iteml = ((iteml - allowl) > allowl) ? allowl : (iteml - allowl);
imagesSwitch33('#small_pre', '#small_next', itemall, 900, iteml);
}
function imagesSwitch33(left, right, items, movetime, num) {
movetime = (parseInt(movetime)) ? movetime : 400;
items.parent().css({
position : 'relative',
overflow : 'hidden'
});
items.parent().wrapInner('<div></div>');
items.parent().css('position', 'absolute');
items.parent().css('left', '0');
var offw = items.eq(0).outerWidth(true);
var allw = items.outerWidth(true) * (items.length);
var movew = offw * num;
items.parent().width(allw + 'px');
var len = items.length;
var isclick = false;
jQuery(left).click(function() {
if (items.parent().queue('fx').length != 0)
return;
isclick = true;
items.parent().prepend(items.parent().children().slice(len - num, len));
items.parent().css('left', '-' + movew + 'px');
items.parent().animate({
left : '+=' + movew + 'px'
}, movetime, function() {
items.parent().css('left', 0);
});
});
jQuery(right).click(function() {
if (items.parent().queue('fx').length != 0)
return;
isclick = true;
items.parent().animate({
left : '-=' + movew + 'px'
}, movetime, function() {
items.parent().append(items.parent().children().slice(0, num));
items.parent().css('left', 0);
});
});
}