仿淘宝的详情页图片切换

鼠标放在小图片上，上面的大图会切换到相应的图片

html代码：

css代码：

js代码：

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
ul .picture-small-li{
display: inline-block;border: 1px solid #000;
margin-right: 5px;
width:60px;
height:60px;
box-size:border-boxing;
}
.picture-big img{
border-radius: 3px;
width: 350px;
height: 350px;
padding: 3px;
border: 1px solid #ccc;
}
.picture-small{
margin-top:10px;
}
.picture-small-li img{
width:58px;
height: 58px;
box-size:border-boxing;
}
</style>
</head>
<body>
<div class="picture-big " >
<img src="img/TIM%E5%9B%BE%E7%89%8720180425160832.jpg" class="img-responsive"id="pic" />
</div>
<div class="picture-small" >
<ul >
<li id="li01"class="picture-small-li"><img src="img/TIM%E5%9B%BE%E7%89%8720180425160832.jpg" /></li>
<li id="li02"class="picture-small-li"><img src="img/TIM%E5%9B%BE%E7%89%8720180425160836.jpg" /></li>
<li id="li03"class="picture-small-li"><img src="img/TIM%E5%9B%BE%E7%89%8720180425160836.jpg" /></li>
<li id="li04"class="picture-small-li"><img src="img/TIM%E5%9B%BE%E7%89%8720180425160846.jpg" /></li>
<li id="li05"class="picture-small-li"><img src="img/TIM%E5%9B%BE%E7%89%8720180425160841.jpg" /></li>
</ul>
</div>
<script>
function show(canshu1,canshu2){
var li01 = document.getElementById(canshu1) //参数1为小图片的id,参数2为大图片的src
var pic = document.getElementById('pic') // pic为大图片div的id
li01.onmouseover = function(){
pic.src = canshu2; // 把参数2设为新的src(路径)
}
}
show("li01","img/TIM%E5%9B%BE%E7%89%8720180425160832.jpg") //调用show()，用所有大小图片参数
show("li02","img/TIM%E5%9B%BE%E7%89%8720180425160836.jpg")
show("li03","img/TIM%E5%9B%BE%E7%89%8720180425160836.jpg")
show("li04","img/TIM%E5%9B%BE%E7%89%8720180425160846.jpg")
show("li05","img/TIM%E5%9B%BE%E7%89%8720180425160841.jpg")
</script>
</body>
</html>

仿淘宝的详情页图片切换相关推荐

仿淘宝商品详情页图片滑动并且数字也跟着变化
今天遇到需求需要做个淘宝那样的商品详情页如图(这里只差放图片了)支持移动端,当然用的是swiper.js支持左右滑动上代码 html代码 <div class="swiper-con ...
Android开发之仿淘宝商品详情页
看到有人在问如何实现淘宝商品详情页效果,手痒了就撸了一个,献上效果图大致梳理一下思路,这里不提供源码状态栏透明使用开源库StatusBarCompat,为了兼容手机4.4 dependencies ...
淘宝店铺装修详情页图片设计技巧及注意事项
淘宝网店装修详情页比起其他版块的装修要更为复杂一些,特别是在产品图片的优化设计之上如果不注意的那么整个页面的风格都会受到影响,反之则会提升整个淘宝网店装修的视觉效果.那么在淘宝网店装修的时候该如何处理 ...
Android 仿淘宝商品详情页下拉足迹Demo
DropDownMultiPager 仿淘宝等商品详情页下拉足迹效果SimpleDemo 可colne之后看MainActivity的调用,方便二次开发依赖 compile 'com.nineold ...
仿淘宝购买详情页购买缩小动画
偶尔一个时候,我们产品的详情页面也做的和淘宝神识,为了加强的体验,我们加了一些动画,下面说说淘宝详情的缩放详情页的动画怎么做的吧. 先上两张图, 其实也就是几个缩放的动画下面是核心代码 // 主页 ...
仿淘宝商品详情页TabLayout+ListView
第一次写博客,我是一名Android的小码农写代码也有三四年了.有点好玩的跟大家分享一下项目对商品详情页改版有新需求.顶部是一个渐变的Title包括"宝贝","详情&q ...
【商城开发三】Android 仿淘宝商品详情页下拉足迹修改版
开发商城的快有半个月了,需要做到详情页下拉足迹的效果,网上找了找没找到,找到一个差不多还有点问题,然后在基础上进行了二次开发感谢http://blog.csdn.net/yaphetzhao/art ...
仿淘宝商品详情页[带有视频和图片的轮播功能]
因为工作需求的原因,自己写了一个demo,既实现了功能,又能与大家分享,很高兴!Demo已上传GitHub,https://github.com/xinniangdeweidao/CloneTaoba ...
仿淘宝商品详情页顶部nav屏幕滑动出现-商品/详情/评价/分享
项目开发实录将其简化为一个demo方便后续使用简化淘宝顶部的淡入淡出并将其修改为两个不同盒子之间的切换,毕竟实际项目实际操作嘛. 下面的代码块为简略版的demo,直接复制粘贴即可实现效果(移动端喔 ...

仿淘宝的详情页图片切换

仿淘宝的详情页图片切换相关推荐

最新文章

热门文章