【原创】商品详情图切换 / 缩略图组左右按钮
【原创】商品详情图切换 / 缩略图组左右按钮
柴高八斗之父 发表于3个月前
【原创】商品详情图切换 / 缩略图组左右按钮
  • 发表于 3个月前
  • 阅读 16
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: parseInt,animate,

  写在前面的话: 

网上这种插件很多,但是本身简单的东西,我并不希望导入很多文件到页面中,所以自己写一个,代码少,还维护方便。

 首先见效果图:

js如下

  思路:

  1. 首先实现点击每个缩略图切换大图;
  2. 然后,设定每次移动的步长,取到当前的left值,然后加或者减,并以jquery的animate动画移动。
  3. 超出范围做判断。
$(function(){ 
	
	//【商品图片切换展示】
	//[思路]:切换+位移 柴备注-2017-09-07
	
	//切换图                                         			
  	var get_div=$(".otoc-thum-img > div");
  	get_div.click(function(){
        $(this).addClass("selected").siblings().removeClass("selected");
        var index = get_div.index(this);
     	$(".otoc-details-img > img").eq(index).show().siblings().hide(); 
  	})
	
	//缩略图组移动
	$(".next").click(function(){
		var current_left = parseInt($(".otoc-thum-img").css("left")) //获取当前位置
		var go_left = current_left-60
		if(current_left<-30)
		{
			return false;
		}
		else
		{
			$(".otoc-thum-img").animate({left: go_left+"px"}, 200);
		}
	});
	
	$(".pre").click(function(){
		var current_left = parseInt($(".otoc-thum-img").css("left")) //获取当前位置
		var go_left = current_left+60
		if(current_left>=0)
		{		
			return false;
		}
		else
		{			
			$(".otoc-thum-img").animate({left: go_left+"px"}, 200);
		}
	});
})

以上js里有要注意一个函数,parseInt.  ---------parseInt() 函数可解析一个字符串,并返回一个整数。

详见:http://www.w3school.com.cn/jsref/jsref_parseInt.asp

  为什么要用这个函数?请看如下图:

直接取这个缩略图组的left,返回的带px的一个字符串,用 typeof 测试后,返回的是string。

而我是希望拿到数值型,所以如此。

  html如下:

<div class="box">
	<div class="otoc-details-img">  <!--大图-->
   		<img src="img/details-big-1.jpg"/>
   		<img src="img/details-big-2.jpg"/>
       	<img src="img/details-big-3.jpg"/>
   		<img src="img/details-big-4.jpg"/>
   		<img src="img/details-big-5.jpg"/>
    </div>
    <div class="otoc-thum-wrap"> <!--这个是缩略图容器,需要定义overflow:hidden;-->
    	<div class="otoc-thum-img"> <!--按钮组-->
           	<div class="selected">
           		<img src="img/details-big-1.jpg" />
           	</div>
           	<div class="">
           		<img src="img/details-big-2.jpg" />
           	</div>
           	<div class="">
           		<img src="img/details-big-3.jpg" />
           	</div>
           	<div class="">
           		<img src="img/details-big-4.jpg" />
           	</div>
           	<div class="">
           		<img src="img/details-big-5.jpg" />
           	</div>
  		</div>
    </div>
    <div class="otoc-thum-btn"> <!--左右按钮-->
    	<div class="pre">
    		<i class="fa fa-angle-left"></i>
    	</div>
		<div class="next">
			<i class="fa fa-angle-right"></i>
		</div>
    </div>
</div>
<!-- 产品tab切换图 结束 -->

  less如下:

/*外容器*/
.otoc-thum-wrap{ 
    position: relative; 
    margin-top: 15px;  
    width: 100%; 
    height: 80px; 
    overflow:hidden; 
    border-radius:5px ;
    border: 1px solid @otoc-border-color-1level;
}

/*大图*/
.otoc-details-img{
    padding-top:8px;
    img:nth-child(2),img:nth-child(3),img:nth-child(4),img:nth-child(5){ display: none;}
    > img{ width: 260px; height: 260px;}
}

/*缩略图*/
.otoc-thum-img{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    padding: 10px 15px; 
    width: 340px; 
    height: 60px; 
    border: 1px solid #fff; 
    z-index: 999;
        div{ 
            float: left; 
            margin-left: 1.3px;
            img{ 
                width: 58.3px; 
                height: 58px; 
                border: 2px solid #fff; 
                cursor: pointer;
                }
            
        }
        div.selected img { border: 2px solid #333; }
}

/*按钮*/
.otoc-thum-btn{ 
    overflow:visible;
        > div{ 
            position: absolute; 
            cursor: pointer; 
            z-index: 999; 
            bottom:47px; 
            width: 20px; 
            height: 20px; 
            font-size: 24px;
            text-align: center; 
            line-height: 20px; 
            border-radius:20px; 
            color: #00343B; 
            transition: all 0.3s;
            &:hover{ color: #36c6d3; transform: scale(1.2);};
            &:active{ transform: translate(2px,1px);}
        }
        > div.pre{ position: absolute; left: 1px; }
        > div.next{ position: absolute;  right:1px; }
    }

 

共有 人打赏支持
粉丝 4
博文 134
码字总数 53585
×
柴高八斗之父
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: