jquery插件owl.carousel.js实现商城产品图片展示效果

jquery响应式轮播图插件owl.carousel.js功能完善，参数丰富，可以改造成多种网页前端显示效果。比如常见的商城网站产品图片展示效果。

引用插件文件和样式文件

<link rel="stylesheet" type="text/css" href="owl.carousel.min.css" media="screen"/>
<script src="owl.carousel.min.js"></script>

HTML代码：

<!--by neirong.org-->
<div class="proPic">
	<div class="curPic">
		<span style="background-image: url(../uploadfiles/ruby_pro_01.jpg);"></span>
	</div>
	<div class="tabPic">
		<div id="tabPic" class="owl-carousel">
			<div class="item">
				<span style="background-image: url(../uploadfiles/ruby_pro_01.jpg);"></span>
			</div>

			<div class="item">
				<span style="background-image: url(../uploadfiles/ruby_pro_02.jpg);"></span>
			</div>

			<div class="item">
				<span style="background-image: url(../uploadfiles/ruby_pro_03.jpg);"></span>
			</div>

			<div class="item">
				<span style="background-image: url(../uploadfiles/ruby_pro_04.jpg);"></span>
			</div>

		</div>
		<div class="load"></div>
	</div>
</div>

CSS代码：

/*by neirong.org*/
.proPic {width:39.706%;}
.curPic {margin-bottom:3.704%; border:1px solid #eee;}
.curPic span {padding-bottom:100%;background:no-repeat center center;background-size:contain;display:block;}
.tabPic {padding:0 40px;position:relative;}
.tabPic #tabPic {position:static;}
.tabPic .item {border:1px solid #eee;}
.tabPic .item span {padding-bottom:100%;background:no-repeat center center;background-size:contain;display:block;}
.tabPic .load {padding-bottom:100px;}
.tabPic .owl-carousel .owl-nav.disabled {display:block;}
.tabPic .owl-nav button {display:block;position:absolute;top:50%;transform:translateY(-50%);cursor:pointer;}
.tabPic .owl-nav button.disabled {cursor:default;opacity:.5;}
.tabPic .owl-nav span {display:block;width:16px;height:23px;background:no-repeat center center;text-indent:-99999em;}
.tabPic .owl-nav .owl-prev {left:0;}
.tabPic .owl-nav .owl-prev span {background-image:url(images/icon_15.png);}/*icon_15.png 是箭头图标*/
.tabPic .owl-nav .owl-next {right:0;}
.tabPic .owl-nav .owl-next span {background-image:url(images/icon_16.png);}/*icon_16.png 是箭头图标*/

jQuery代码：

/*by neirong.org*/
function tabPic(ojb){
	ojb.find('.item').click(function(){
		var _url = $(this).children('span').css('backgroundImage').split('(')[1].split(')')[0];	
		var _cur = $('.curPic span').css('backgroundImage').split('(')[1].split(')')[0];	
		$(this).addClass('cur').parent().siblings().children('.item').removeClass('cur');
		if(_url != _cur){
			$('.curPic span').css('backgroundImage','url('+_url+')').hide().stop().fadeIn('fast');
		}				
	});	
}
$(function(){
	var _tabPic = $('#tabPic');
	_tabPic.on('initialize.owl.carousel initialized.owl.carousel', function(e) {
		$(this).siblings('.load').remove();
		tabPic($(this));
		$(this).find('.owl-item').eq(0).children('.item').trigger('click');
	});
	$('#tabPic').owlCarousel({
		items:4,
		margin:20,
		loop:false, 
		mouseDrag:false,
		autoplay:false,
		nav:true,	
		dots:false
	}); 
	$('.tabPic button').click(function(){		
		if($(this).hasClass('owl-next')){			
			$('.tabPic .cur').parent().next().children('.item').trigger('click');
		}else{
			$('.tabPic .cur').parent().prev().children('.item').trigger('click');
		}		
	});
});

类似效果：jQuery插件bxSlider+zoomsl实现商城商品图片轮播放大镜效果