Jquery实现的大小图自动切换

最新推荐文章于 2021-11-30 07:50:26 发布

抢街饭

最新推荐文章于 2021-11-30 07:50:26 发布

阅读量1.8k

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/lzwjavaphp/article/details/41823057

版权

Jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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