文档章节

【原创】商品详情图切换 / 缩略图组左右按钮

柴高八斗之父
 柴高八斗之父
发布于 2017/09/07 12:20
字数 840
阅读 18
收藏 0
点赞 0
评论 0

  写在前面的话: 

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

 首先见效果图:

js如下

  思路:

  1. 首先实现点击每个缩略图切换大图;
  2. 然后,设定每次移动的步长,取到当前的left值,然后加或者减,并以jquery的animate动画移动。
  3. 超出范围做判断。
  4. var animateAble = true;  //给一个开关,否则后面有快速点击一直移动的BUG
$(function(){

    //【商品图片切换展示】

    //切换图
    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();
    })
    var animateAble = true;  //给一个开关,否则后面有快速点击一直移动的BUG
    //缩略图组移动
    $(".next").click(function(){
        var current_left = parseInt($(".otoc-thum-img").css("left")) //获取当前位置
        var go_left = current_left-80
        if (current_left < -45 || !animateAble)
        {
            return false;
        }
        else
        {
            animateAble = false;
            $(".otoc-thum-img").animate({ left: go_left + "px" }, 200, function () {
                animateAble = true;
            });
        }
    });

    $(".pre").click(function(){
        var current_left = parseInt($(".otoc-thum-img").css("left")) //获取当前位置
        var go_left = current_left+80
        if (current_left >= 6 || !animateAble)
        {
            return false;
        }
        else
        {
            animateAble = false;
            $(".otoc-thum-img").animate({ left: go_left + "px" }, 200, function () {
                animateAble = true;
            });
        }
    });
})

以上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; }
    }

  js 完善版本(解决了之前会快速点击后-缩略图会一直左移或者右移的BUG,孙版本)

$(function(){

    //【商品图片切换展示】

    //切换图
    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();
    })
    var animateAble = true;
    //缩略图组移动
    $(".next").click(function(){
        var current_left = parseInt($(".otoc-thum-img").css("left")) //获取当前位置
        var go_left = current_left-80
        if (current_left < -45 || !animateAble)
        {
            return false;
        }
        else
        {
            animateAble = false;
            $(".otoc-thum-img").animate({ left: go_left + "px" }, 200, function () {
                animateAble = true;
            });
        }
    });

    $(".pre").click(function(){
        var current_left = parseInt($(".otoc-thum-img").css("left")) //获取当前位置
        var go_left = current_left+80
        if (current_left >= 6 || !animateAble)
        {
            return false;
        }
        else
        {
            animateAble = false;
            $(".otoc-thum-img").animate({ left: go_left + "px" }, 200, function () {
                animateAble = true;
            });
        }
    });
})

 

© 著作权归作者所有

共有 人打赏支持
柴高八斗之父
粉丝 4
博文 158
码字总数 83975
作品 0
宁波
前端工程师
30款jQuery常用网页焦点图banner图片切换 下载

1、jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动 查看演示 2、jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 查看演示 3、jQuery图片层叠旋转类似洗牌翻转图片幻灯片 查看演示 ...

awbeci ⋅ 2013/09/18 ⋅ 0

jquery焦点图片左右滑动切换特效代码

焦点图片用的地方很多,主要以首页的横幅广告为主比较适合展示大图片,当前这个左右滑动效果的焦点图特效特点是当我们鼠标移到底部的焦点切换按钮时会在顶部显示缩略图片,而且缩略图片之前也...

板蓝根 ⋅ 2013/12/11 ⋅ 0

9款开发者值得一试的jQuery全新应用

jQuery是一个非常给力的JS框架,也因其使用方便而诞生了无数的jQuery应用插件,今天向大家分享9款全新的jQuery插件,前段开发者应该会比较喜欢。 1、jQuery图标选项卡上下滑动切换 这是一款非...

yykj ⋅ 2013/10/28 ⋅ 5

Meego手机最新界面被公开 其中暗合webOS和android

Meego最新UI被公开,暗含webOS和android操作习惯。 一篇名为MeeGo Handset Interaction Guidelines的文章,前几天在Meego官网的一个内部连接被发现。虽然没有图像,但他大概描述了在以后的诺...

阿泉 ⋅ 2010/06/19 ⋅ 0

程序猿必备的15款web前端动画插件七

  1.超简易的SVG/CSS3 Loading加载动画图标   今天我们要为大家分享一组非常简易的SVG/CSS3 Loading加载动画图标,和之前分享的SVG实现的一组超华丽Loading加载动画相比,这组Loading动画...

爱码农 ⋅ 01/08 ⋅ 0

如何用文件对比工具缩略图

Beyond Compare软件一直都是一款备受专业人士青睐的工作必备辅助工具,它可以高效对比整个驱动器和文件夹,检查大小和修改时间,或者逐字节完整验证每个文件,精确查找文件之间的所有差异部分...

Navicat数据库管理工具 ⋅ 2016/11/16 ⋅ 0

【Android】商品详情页实现

我告诉自己,要独立,要坚强,要勇敢,要活的漂亮,要让自己永远善良。 现今的市场说O2O模式很火一点都不假,例如电商,各行各业都在做电商。而做电商平台必不可少的是商品详情页,那么如何实...

zrunker ⋅ 2017/10/25 ⋅ 0

40个有创意的jQuery图片和内容滑动及弹出插件收藏集之一

在网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片,并且用户可以点击左右按钮来切换图片。相信大家都知道jQuery是最优秀的Javascript框架之一。以其语法简单灵活而...

未来十年 ⋅ 2012/01/07 ⋅ 0

页面布局的重要性在Beyond Compare中

Beyond Compare是一款专业级别的文件夹以及文件比较工具,操作简单,使用方便。当我们用Beyond Compare软件进行文本比较时,为了方便用户快速查看文本差异部分,符合用户个人查看习惯,接下来...

学术研究软件 ⋅ 2016/06/15 ⋅ 0

Windows 7 任务栏开发 之 缩略图工具栏(Thumbnail Toolbar)

上一篇我们为应用程序设置了自定义的缩略图,本篇我们将继续在缩略图中进行开发,为其添加工具栏(Toolbar)。在使用Windows Media Player(WMP)的时候,将鼠标放置在WMP 图标上方时会出现缩...

junwong ⋅ 2012/03/09 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

DevOps 资讯 | PostgreSQL 的时代到来了吗 ?

PostgreSQL是对象-关系型数据库,BSD 许可证。拼读为"post-gress-Q-L"。 作者: Tony Baer 原文: Has the time finally come for PostgreSQL?(有删节) 近30年来 PostgreSQL 无疑是您从未听...

RiboseYim ⋅ 11分钟前 ⋅ 0

Cube、Cuboid 和 Cube Segment

1.Cube (或Data Cube),即数据立方体,是一种常用于数据分析与索引的技术;它可以对原始数据建立多维度索引。通过 Cube 对数据进行分析,可以大大加快数据的查询效率 2.Cuboid 在 Kylin 中特...

无精疯 ⋅ 49分钟前 ⋅ 0

github太慢

1:用浏览器访问 IPAddress.com or http://tool.chinaz.com 使用 IP Lookup 工具获得github.com和github.global.ssl.fastly.net域名的ip地址 2:/etc/hosts文件中添加如下格式(IP最好自己查一...

whoisliang ⋅ 51分钟前 ⋅ 0

非阻塞同步之 CAS

为解决线程安全问题,互斥同步相当于以时间换空间。多线程情况下,只有一个线程可以访问同步代码。这种同步也叫阻塞同步(Blocking Synchronization). 这种同步属于一种悲观并发策略。认为只...

长安一梦 ⋅ 今天 ⋅ 0

云计算的选择悖论如何对待?

人们都希望在工作和生活中有所选择。但心理学家的调查研究表明,在多种选项中进行选择并不一定会使人们更快乐,甚至不会产生更好的决策。心理学家Barry Schwartz称之为“选择悖论”。云计算为...

linux-tao ⋅ 今天 ⋅ 0

Redis 注册为 Windows 服务

Redis 注册为 Windows 服务 redis 注册为 windows 服务相关命令 注册服务 redis-server.exe –service-install redis.windows.conf 删除服务 redis-server –service-uninstall 启动服务 re......

Os_yxguang ⋅ 今天 ⋅ 0

世界那么大,语言那么多,为什么选择Micropython,它的优势在哪?

最近国内MicroPython风靡程序界,是什么原因导致它这么火呢?是因为他功能强大,遵循Mit协议开源么? 错!因为使用它真的是太舒服了!!! Micropython的由来,这得益于Damien George这位伟大...

bodasisiter ⋅ 今天 ⋅ 0

docker 清理总结

杀死所有正在运行的容器 docker kill $(docker ps -a -q) 删除所有已经停止的容器(docker rm没有加-f参数,运行中的容器不会删掉) docker rm $(docker ps -a -q) 删除所有未打 dangling 标...

vvx1024 ⋅ 今天 ⋅ 0

关于学习

以前学车的时候,教练说了这样的一句话:如果一个人坐在车上一直学,一直学,反而不如大家轮流着学。因为一个人一直学,就没有给自己留空间来反思和改进。而轮流着学的时候大家下来之后思考上...

mskk ⋅ 今天 ⋅ 0

压缩工具之gzip-bzip2-xz

win下常见压缩工具:rar zip 7z linux下常见压缩工具:zip gz bz2 xz tar.gz tar.bz2 tar.xz gzip 不支持目录压缩 gzip 1.txt #压缩。执行后1.txt消失,生成1.txt.gz压缩文件 gzip -d 1.txt....

ZHENG-JY ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部