Jquery实现的大小图自动切换

来源：互联网发布：复杂网络与Matlab 编辑：程序博客网时间：2024/06/11 19:34

好久没有搞前端的东西了熟悉一下，针对自己的记忆，与别人无关

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);});});}

0 0