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