jquery基于swiper商品細節圖片輪播翻轉代碼



146 583 195



特效描述:jquery 基于swiper 商品細節 圖片輪播翻轉,jquery swiper.js商品圖片輪播,圖片翻轉代碼,適用于各大商城網站商品細節展示的圖片切換效果,是一款有創意和實用的商品細節展示代碼。

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/swiper.min.css">

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/swiper.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/swiper.js"></script>

3. 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>無標題文檔</title>
</head>
<body style="background:#b9b9b9;">
<style type="text/css">
.dp-pic .swiper-container{height:833px;}
.dp-pic .swiper-pagination-bullet{width:16px;height:16px;background:#fff;opacity:0.5;}
.dp-pic .swiper-pagination-bullet-active{background:#007aff;opacity:1;}
.part_mrdp{width:990px;margin:20px auto;}
.part_mrdp .p_left{float:left;width:395px;}
.part_mrdp .p_right{float:left;width:555px;overflow:hidden}
.blk_mrdp{background:url(img/U7526P1503DT20160331144008.png) 0 0 no-repeat;padding-top: 170px;position: relative;}
.list01 li{line-height:36px;}
.list01 li a{font-size: 23px;color: #4c4c4c;line-height: 36px;padding-left: 1rem;transition: padding-left 1s;
-moz-transition: padding-left 1s; /* Firefox 4 */
-webkit-transition: padding-left 1s; /* Safari 和 Chrome */
-o-transition: padding-left 1s; /* Opera */}
.list01 li a:visited{text-decoration: none;}
.list01 li a:hover{text-decoration: none;}
.list01 .selected a{font-size: 23px;color: #000;padding-left: 0rem;}
.banner-inner .date{position: absolute;top:633px;left:540px;width: 111px;height: 94px;}
.banner-inner .date .month{font-size: 16px;color: #ffdca2;display: block;line-height: 30px;height: 30px;overflow: hidden;text-align: center;}
.banner-inner .date .day{font-size: 52px;color: #ffdca2;display: block;line-height: 60px;height: 60px;overflow: hidden;text-align: center;font-family: 'arial';margin-top: 3px;}
.banner-inner .editor{position: absolute;top:705px;left: 420px;text-align: center;}
.banner-inner .editor .avatar{display: block;width: 93px;height: 93px;overflow: hidden;border-radius: 50%;}
.banner-inner .editor label{color: #fff;font-size: 12px;display: block;line-height: 20px;}
.banner-inner .editor .name{font-size: 16px;color: #fff;display: block;}
.banner-inner .txt{color: #fff;font-size: 18px;line-height: 24px;position: absolute;left: 535px;bottom: 30px;}
.swiper01{position: absolute;width: 564px;height: 366px;top: 416px;left: 0;z-index:99;}
</style>
<div class='part_mrdp clearfix'>
<!--每日單品 start-->
	<div class='p_left'>
	<!--left_part start-->
		<div class="blk_mrdp">
		<!--單品滾動 start-->
			<ul class='list01 j-scrollPage01'>
				<li class='selected'><a href="javascript:;">印花長裙:Tory Burch</a></li>
				<li><a href="javascript:;">手提包:Valextra</a></li>
				<li><a href="javascript:;">涼鞋:MICHAEL Michael Kors</a></li>
			</ul>
			<div class='swiper01 swiper-container'>
				<div class='swiper-wrapper'>
					<div class='swiper-slide'><img src="img/U5790P1503DT20170613164501.jpg" width='564px'></div>
					<div class='swiper-slide'><img src="img/U5790P1503DT20170613164503.jpg" width='564px'></div>
					<div class='swiper-slide'><img src="img/U5790P1503DT20170613164503_1.jpg" width='564px'></div>
				</div>
			</div>	
		<!--單品滾動 end-->
		</div>
	<!--left_part start-->	
	</div>
	<div class='p_right dp-pic'>
	<!--right_part start-->
	<!-- Swiper -->
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="img/U5790P1503DT20170614142416.jpg" width='555px'></div>
				<div class="swiper-slide"><img src="img/U5790P1503DT20170614142506.jpg" width='555px'></div>
				<div class="swiper-slide"><img src="img/U5790P1503DT20170614142516.jpg" width='555px'></div>
			</div>
			<!-- Add Pagination -->
			<div class="swiper-pagination"></div>
		</div>
	<!--right_part start-->	
	</div>
</div>	
<script type="text/javascript">
var dpData = [
//team1
[
   {
      pic:'img/U5790P1503DT20170613164501.jpg',
      name:'印花長裙:Tory Burch'
    },
    {
      pic:'img/U5790P1503DT20170613164503.jpg',
      name:'手提包:Valextra'
    },
    {
      pic:'img/U5790P1503DT20170613164503_1.jpg',
      name:'涼鞋:MICHAEL Michael Kors'
    },
  ],
//team2
[
   {
      pic:'img/U5790P1503DT20170614144533.jpg',
      name:'無袖上衣:Carven'
    },
    {
      pic:'img/U5790P1503DT20170614144533_1.jpg',
      name:'印花半裙:Fabitoria'
    },
    {
      pic:'img/U5790P1503DT20170614144534.jpg',
      name:'手提包:Jimmy Choo '
    },
 {
      pic:'img/U5790P1503DT20170614144534_1.jpg',
      name:'短靴:Giuseppe Zanotti '
    },
 {
      pic:'img/U5790P1503DT20170614144535.jpg',
      name:'戒指:Tiffany&Co. '
    },
  ],
//team3
[
   {
      pic:'img/U5790P1503DT20170614145547.jpg',
      name:'連衣裙:Lanvin'
    },
    {
      pic:'img/U5790P1503DT20170614145548.jpg',
      name:'高跟鞋:Giuseppe Zanotti'
    },
 {
      pic:'img/U5790P1503DT20170614145549.jpg',
      name:'腕表、項鏈:Tiffany&Co.'
    },
 {
      pic:'img/U5790P1503DT20170614145551.jpg',
      name:'手提包:MICHAEL Michael Kors'
    },
  ],
];
function initSwip(){
  var mySwiper = new Swiper('.swiper01',{
    effect : 'cube',
    direction : 'vertical',
    autoplay:3000,
    autoplayDisableOnInteraction : false,
    cube: {
        slideShadows: false,
        shadow: false
    },
onSlideChangeEnd: function(swiper){
        $('.j-scrollPage01 li').removeClass('selected');
        var curIndex = swiper.activeIndex;
        $('.j-scrollPage01 li').eq(curIndex).addClass('selected');
      }
  });
  $('.j-scrollPage01 a').on('mouseover',function(){
    var $this = $(this),
      curIndex = $this.parent().index();
    $('.j-scrollPage01 li').removeClass('selected');
    $this.parent().addClass('selected');
    mySwiper.slideTo(curIndex)
  }); 
}
    var swiper02 = new Swiper('.dp-pic .swiper-container', {
        pagination: '.dp-pic .swiper-pagination',
        direction: 'vertical',
        slidesPerView: 1,
        paginationClickable: true,
        spaceBetween: 30,
        mousewheelControl: true,
        onSlideChangeEnd:function(s){
            var index = s.activeIndex;
var liStr = [],
			  swipImgStr = [];
		for(var i=0;i<dpData[index].length;i++){
		 var  tempClass='';
		  if(i==0){tempClass='selected';}
		  liStr.push('<li ><a class="'+tempClass+'" href="javascript:;">'+dpData[index][i].name+'</a></li>');
		  swipImgStr.push('<div class="swiper-slide"><img src="'+dpData[index][i].pic+'" width="564px"></div>');
		}
		$('.list01').html(liStr.join(''));
		  $('.swiper01 .swiper-wrapper').html(swipImgStr.join(''));
		  initSwip();
	 }
});
initSwip();
</script>
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 滑動選項卡 滑動切換 滾動切換 滾動條切換 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 自動滾動圖片輪播 疊加浮動層 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 層疊疊加 疊加層疊 層疊 疊加 加載更多 旋轉翻轉 旋轉 翻轉 焦點圖 幻燈片 輪播圖 bar焦點圖 圖片疊加 圖片層疊 圖片翻轉 圖片旋轉 圖片滾動 圖片滾動條 純圖片輪播 圖片輪播 自動滾動圖片輪播 選項卡自動切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子