带放大效果jquery左右滚动图片代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是带放大效果jquery左右滚动图片代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>带放大效果jquery左右滚动图片代码</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/slider.js" type="text/javascript"></script> 
<script type="text/javascript">
$(document).ready(function() {
	$('#slider').slider({ speed: 500 });
});            
</script>
</head>
<body>
	<div style="height:200px;"></div>
	<div id="slider">
		<div class="spic">
			<img src="images/01.jpg" />
			<a href="#">三星I9300</a>
		</div>
		<div class="spic">
			<img src="images/02.jpg" />
			<a href="#">三星I9300</a>
		</div>
		<div class="spic">
			<img src="images/03.jpg" />
			<a href="#">三星I9300</a>
		</div>
		 <div class="spic">
			<img src="images/04.jpg" />
			<a href="#">三星I9300</a>
		</div>
		<div class="spic">
			<img src="images/05.jpg" />
			<a href="#">三星I9300</a>
		</div>
		<div class="spic">
			<img src="images/06.jpg" />
			<a href="#">三星I9300</a>
		</div>    
	</div>
</body>
</html>

JS代码(slider.js):

(function($){
	$.fn.extend({
	slider:function(options){
	var settings = $.extend({
	speed:500}
,options);
	return this.each(function(){
	var slidercontents = $(this).addClass('image-slider-contents');
	var slider = $('<div/>').addClass('image-slider').attr('id',slidercontents.attr('id'));
	var backbutton = $('<div/>').addClass('image-slider-back');
	var forwardbutton = $('<div/>').addClass('image-slider-forward');
	slidercontents.removeAttr('id');
	slidercontents.before(slider);
	slider.append(backbutton);
	slider.append(slidercontents);
	slider.append(forwardbutton);
	var total = $('> div',slidercontents).length;
	var left = 0;
	var w;
	var width;
	var maxScroll;
	slider.append($('<div/>').css('display','none').addClass('preview').append($('<div/>').addClass('img-large') .append($('<div/>').html('&nbsp').click(function(e){
	e.stopPropagation();
	e.stopImmediatePropagation();
	//display previous image var img = $(this).parent().find('img');
	var index = parseInt(img.attr('class'));
	img.removeAttr('class');
	if (index > 1){
	index--;
	var src = $('.' + index + ' div img').attr('src');
	var txt = $('.' + index + ' div a').html();
	$('.preview').find('.label').html(txt);
	$('.preview').find('img').addClass('' + (index) + '').css('opacity','0').attr('src',src).stop(false,true).animate({
	opacity:1}
,1000);
}
else $('.preview').find('img').addClass('' + (index) + '');
}
).addClass('left').css('opacity','0.5').hover(function(){
	$(this).css('opacity','1')}
,function(){
	$(this).css('opacity','0.5')}
)) .append($('<div/>').html('&nbsp').click(function(e){
	e.stopPropagation();
	e.stopImmediatePropagation();
	//display next image var img = $(this).parent().find('img');
	var index = parseInt(img.attr('class'));
	img.removeAttr('class');
	if (index < total){
	index++;
	var src = $('.' + index + ' div img').attr('src');
	var txt = $('.' + index + ' div a').html();
	$('.preview').find('.label').html(txt);
	$('.preview').find('img').addClass('' + (index) + '').css('opacity','0').attr('src',src).stop(false,true).animate({
	opacity:1}
,1000);
}
else $('.preview').find('img').addClass('' + (index) + '')}
).addClass('right').css('opacity','0.5').hover(function(){
	$(this).css('opacity','1')}
,function(){
	$(this).css('opacity','0.5')}
)) .append($('<img/>'))).append($('<div/>').addClass('label').css('opacity','0.8')) .append($('<div/>').addClass('close').click(function(e){
	$(this).parent().fadeOut("slow");
}
)));
	$(document).click(function(e){
	if ($('.preview').css('display') == 'block') $('.preview').fadeOut("slow");
}
);
	function initialize(){
	var tempElements = $('> div',slidercontents);
	var allElements = new Array();
	tempElements.each(function(index,el){
	allElements.push($('<div/>').addClass('' + (index + 1) + '').addClass('outer').append(el));
}
);
	allElements = $(allElements);
	$('> div',slidercontents).remove();
	var wrapper = $('<div/>').addClass('contents-wrapper');
	allElements.each(function(index,el){
	wrapper.append($(el));
}
);
	slidercontents.append(wrapper);
	var w = $('.outer:eq(0)',slidercontents).outerWidth() + parseFloat($('.outer:eq(0)',slidercontents).css('margin-left')) + parseFloat($('.outer:eq(0)',slidercontents).css('margin-right'));
	var width = (total + 1) * w;
	var maxScroll = width - $('.image-slider-contents').outerWidth();
	wrapper.css({
	width:width}
);
	$('> div > div',slidercontents).css('display','');
	$('.outer',slidercontents).each(function(index){
	$(this).prepend($('<img/>').attr('src','images/zoom.png').addClass('zoom') .css({
	cursor:'pointer','position':'absolute','float':'right',right:-10,top:-12,width:34,height:32}
));
	/* 酷站代码整理 http://www.5icool.org */
}
);
	$('.outer a').click(function(e){
	e.stopPropagation();
	e.stopImmediatePropagation();
}
);
	$('.outer').hover(function(){
	$(this).addClass('active');
}
,function(){
	$(this).removeClass('active');
}
).click( function(e){
	e.stopPropagation();
	e.stopImmediatePropagation();
	var cls = $(this).attr('class').split(' ')[0];
	var p = $(this).find('div');
	var img = p.find('img').attr('src');
	var preview = $('.preview');
	var l = $('.image-slider').width() / 2 - preview.outerWidth() / 2;
	var t = (p.offset().top - preview.height());
	t -= t / 2;
	preview.css({
	left:l,top:t}
);
	var text = p.find('a').html();
	preview.find('img').attr('src',img).addClass(cls);
	preview.find('.label').html(text);
	preview.fadeIn("slow");
}
);
	forwardbutton.click(function(){
	left -= w;
	if (left + maxScroll >= 0){
	$('.contents-wrapper').stop(false,true).animate({
	left:'-=' + w}
,settings.speed);
}
else left += w;
}
);
	backbutton.click(function(){
	if (left < 0){
	left += w;
	$('.contents-wrapper').stop(false,true).animate({
	left:'+=' + w}
,settings.speed);
}
}
);
}
initialize();
	function getDimensions(value){
	return value + 'px';
}
}
);
}
}
);
}
)(jQuery);

CSS代码(css.css):

@charset "utf-8";/* CSS Document */
h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#333;}
table{border-collapse:collapse;border-spacing:0;}
a{color:#333;text-decoration:none;}
p,p a{font-size:12px;color:#666;}
body{background:#333;}
/* image-slider */
.image-slider{width:802px;height:195px;margin:0 auto;background:url(../images/bg.png) no-repeat;padding:14px 16px 0px 16px;position:relative;}
.image-slider-back,.image-slider-forward{float:left;width:23px;height:98px;color:White;position:relative;top:32px;cursor:pointer;}
.image-slider-back{background-image:url(../images/arrow-left.png);background-repeat:no-repeat;background-position:left;}
.image-slider-forward{background-image:url(../images/arrow-right.png);background-repeat:no-repeat;background-position:right;}
.image-slider-contents{width:755px;height:164px;float:left;position:relative;overflow:hidden;}
.image-slider-contents .contents-wrapper{position:absolute;padding-top:18px;left:0;}
.image-slider-contents .outer{background-color:#fff;float:left;width:156px;height:186px;margin:0px 15px;cursor:pointer;position:relative;}
.spic{width:156px;height:186px;text-align:center;color:#333;float:left;}
.image-slider-contents img{width:120px;height:120px;margin:0 auto;}
.spic a{display:block;text-align:center;}
.hidden{display:none;}
.visible{display:block;}
.thumbnail-active{filter:alpha(opacity=100);opacity:1.0;cursor:pointer;}
.thumbnail-inactive{filter:alpha(opacity=20);opacity:0.2;cursor:pointer;}
.preview{position:absolute;width:450px;height:450px;background-color:White;padding:2px;border:solid 1px black;}
.preview .img-large{width:330px;z-index:1000;margin:0 auto;}
.preview .img-large .left{position:absolute;left:8px;top:200px;width:16px;height:24px;z-index:1000;background:url(../images/arrow-left.png);cursor:pointer;}
.preview .img-large .right{position:absolute;left:428px;top:200px;z-index:1000;width:16px;height:24px;background:url(../images/arrow-right.png);cursor:pointer;}
.preview .close{position:absolute;left:434px;top:-16px;width:32px;height:34px;background:url(../images/close.png);float:right;cursor:pointer;z-index:2000;}
.preview .img-large img{width:330px;height:330px;}
.preview .label{width:434px;line-height:30px;float:left;position:absolute;top:316px;left:0;padding:8px;background-color:White;text-align:left;font-weight:bold;font-size:13px;text-align:center;}
.outer{border:solid 1px black;}

附件:下载该文件资源,减少时间成本(增值服务)