电商图片轮播效果

原创 2017年10月13日 14:41:22

源码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#img_show{
width: 500px;
height: 500px;
border: 1px solid gray;
margin: 10px;

}

#img_show img{
width: 500px;
}

#small_img img{
border: 1px solid gainsboro;
width: 100px;
}

#small_img img:hover{
cursor: pointer;
border: 1px red solid;
}
</style>

<script>

function over(obj){
document.getElementById("img").src = obj.src;
}

</script>

</head>
<body>

<div id="img_show">
<img id="img" src="img/01.jpg" />
</div>

<div id="small_img">
<img src="img/01.jpg" onmouseover="over(this)" />
<img src="img/02.jpg" onmouseover="over(this)"  />
<img src="img/03.jpg" onmouseover="over(this)"  />
<img src="img/04.jpg" onmouseover="over(this)"  />
<img src="img/05.jpg" onmouseover="over(this)"  />
</div>

</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

jQuery实现图片轮播效果(仿QQ商城首页、天猫首页)

图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果。相信很多同学都在各种类型的网站上看过花样百出的轮播效果图,不少同学也想尝试下自己做出来一个,但...
  • dreamsunday
  • dreamsunday
  • 2014年04月21日 09:53
  • 14482

淘淘商城系列——首页轮播图展示

上文我们一起学习了内容管理,由于时间太紧了,好多功能都没实现,在此对读者说声抱歉!以后我一定会完善这些功能,读者如果有兴趣,也可以实现这些功能,希望大家都能学有所成。废话扯了一大堆,进入主题,本文我们...
  • yerenyuan_pku
  • yerenyuan_pku
  • 2017年06月02日 22:25
  • 1874

jQuery实现轮播图特效,仿京东——李帅醒博客

如今轮播图已然成为网站中的最常用功能功能之一,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果。今天就教教大家做一个仿京东的轮播图。 1.首先定时器实现轮播效果。 2.图下...
  • wcslb
  • wcslb
  • 2016年11月30日 18:57
  • 4335

3维效果的jquery图片轮播特效

  • 2017年04月12日 11:43
  • 22KB
  • 下载

原生js图片轮播效果

  • 2017年08月22日 09:26
  • 336KB
  • 下载

android图片轮播效果,RollViewPager的简单使用

  • 2016年05月06日 09:32
  • 22.32MB
  • 下载

教你一天玩转JavaScript(三)——使用JavaScript完成图片轮播的效果

  • 2017年04月27日 23:17
  • 908KB
  • 下载

WPF3D图片轮播效果

  • 2017年03月28日 22:59
  • 23.78MB
  • 下载

史上最简单Android图片轮播效果实现 源码程序

  • 2015年08月28日 12:07
  • 3.15MB
  • 下载

js实现的图片轮播器效果

  • 2015年08月19日 19:27
  • 526KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:电商图片轮播效果
举报原因:
原因补充:

(最多只允许输入30个字)