网页在淘宝怎么做出鼠标移动切换图片的效果？

 我来答
5个回答
#热议# 空调使用不当可能引发哪些疾病？
莫6飞飞
2015-11-13 · TA获得超过430个赞
知道小有建树答主
回答量：358
采纳率：66%
帮助的人：235万
我也去答题访问个人页
展开全部
切换图片效果：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=gb2312">
<title>布丁移动官网jQuery焦点图</title>
<link href="styles/zzsc.css" rel="stylesheet" type="text/css" />
</head>

<body>
<br>

<div id="focus">
<div id="slides">
<style type="text/css">
ul.pagination{width:55px !important;}
</style>
<div class="slides_container">
<a href="i_weiche.html" title="微车" rel="external">
<img src="images/focus/weiche_banner.png" alt="微车" /></a>
<a href="i_ticket.html" title="布丁电影票" rel="external">
<img src="images/focus/ticket_banner.png" alt="布丁电影票" /></a>
<a href="i_coupon.html" title="布丁优惠券" rel="external">
<img src="images/focus/coupon.jpg" alt="布丁优惠券" /></a>
</div>
</div>
</div>

<script src="scripts/jquery.min_v1.0.js" type="text/javascript"></script>
<script src="scripts/slides.min.jquery_v1.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'images/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true,
fadeSpeed: 350,
effect: 'fade'
});
});

</script>
<div style="text-align:center;clear:both">
</div>
</body>
</html>

css代码：

@charset "utf-8";
/*通用样式*/
html, body, div, img, ul, ol, li, dl, dt, dd, a, span, h1, h2, h3, h4, h5, h6, p, span {
margin: 0;
padding: 0;
}
*html{
background-image: url(about:blank);
background-attachment: fixed;
}
body {
background: url(../images/body_bg.jpg);
font: 14px "微软雅黑", "宋体", "黑体";
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
border: 0 none!important;
}
ul, li {
list-style: none;
}
#wrap {
background: url(../images/wrap_bg.jpg);
border-bottom: 1px solid #c3c3c3;
box-shadow: 0 3px 20px #d2d2d2;
position: relative;
width: 100%;
display: table;
}

/*焦点图切换*/
#focus {
width: 1000px;
height: 466px;
margin: 0 auto;
background: url(../images/loading.png) no-repeat 48% 37%;
}
#slides {
position: absolute;
z-index: 1;
}
.slides_container {
width: 1000px;
overflow: hidden;
position: relative;
display: none;
}
.slides_container a {
width: 1000px;
height: 466px;
display: block;
}
.pagination {
position: absolute;

bottom: -8px;
z-index: 999;
padding: 0 10px;
padding-top: 3px;
margin-left: 47%;
background: rgba(255,255,255,0.5);
box-shadow: 0 0 10px #ccc inset;
border-radius: 10px;
width: 72px;
height: 14px;
}
.pagination li {
float: left;
margin: 0 4px;
}
.pagination li a {
display: block;
width: 10px;
height: 0;
padding-top: 10px;
background: url(../images/pagination_1.png) 0 0;
float: left;
overflow: hidden;
}
.pagination li.current a {
background-position: 0 -10px;
_background-position: 0 -9px;
}
/*内容*/
#column_ab_a {
width: 100%;
overflow: hidden;
float: left;
padding: 60px 30px 20px;
}
#column_ab_b {
width: 300px;
overflow: hidden;
float: right;
}
/*#column_ab_a*/
#column_ab_a div {
width: 250px;
float: left;
overflow: hidden;
color: #a1a1a1;
margin: 0 30px;
display: inline;
}
#column_ab_a div h2 {
font-size: 16px;
color: #4d4d4d;
padding-left: 50px;
height: 40px;
}
#column_ab_a div#coupon h2 {
background: url(../images/coupon_h2.jpg) no-repeat left center;
}
#column_ab_a div#ticket h2 {
background: url(../images/ticket_h2.jpg) no-repeat left center;
}
#column_ab_a div h2 span {
font-size: 14px;
font-weight: normal;
color: #a1a1a1;
display: block;
background: none;
}
#column_ab_a div p {
font-size: 14px;
margin-top: 20px;
margin-bottom: 20px;
line-height: 24px;
text-indent: 2em;
}
#column_ab_a div p a {
color: #ee4017;
background: url(../images/more.png) no-repeat right center;
padding-right: 10px;
margin-left: 10px;
}
#column_ab_a div p a:hover {
text-decoration: underline;
}
#column_ab_a div h3,
#column_ab_a div h4 {
text-align: right;
}
#column_ab_a div h3 {
margin-top: 5px;
}
/*#column_ab_b*/
#column_ab_b div {
width: 219px;
overflow: hidden;
color: #a1a1a1;
border-left: 1px solid #cecece;
margin-top: 60px;
padding: 0 40px;
}
#column_ab_b div h2 {
font-size: 16px;
color: #4d4d4d;
background: url(../images/system_h2.jpg) no-repeat left center;
padding-left: 50px;
height: 40px;
}
#column_ab_b div h2 span {
font-size: 14px;
font-weight: normal;
color: #a1a1a1;
display: block;
background: none;
}
#column_ab_b div dl {
margin-top: 20px;
line-height: 24px;
}
#column_ab_b div dt {
color: #4d4d4d;
font-weight: bold;
background: url(../images/dot1.png) no-repeat left center;
padding-left: 15px;
}
#column_ab_b div dd {
padding-left: 15px;
margin-bottom: 10px;
}
#column_ab_b div a {
display: block;
width: 161px;
height: 44px;
background: url(../images/tosystem.jpg);
text-indent: -9999px;
margin: 20px auto;
}
#sbuding {
display: block;
width: 161px;
height: 44px;
background: url(../images/tosystem.jpg);
text-indent: -9999px;
margin-left:60px;
}

切换图片无论在淘宝网页上还是一般的网站上都是非常的常见的一个效果。实现的方法也有多种。只要灵活运用就行。不难。
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
百度网友be72e7ff8
2016-01-06 · TA获得超过126个赞
知道小有建树答主
回答量：155
采纳率：100%
帮助的人：51.1万
我也去答题访问个人页
展开全部
第一个img标签显示大图，后面的显示小图，鼠标点击小图，对应图片放大

<div class="box">
<div class="tb-booth tb-pic tb-s310"> <img style="vertical-align:middle;width:400px;height:270px;cursor: crosshair;" src="" alt="" rel="example_group" class="jqzoom" ></a> </div>
<ul class="tb-thumb" id="thumblist">
<li class="">
<div class="tb-pic tb-s40"> <a rel="example_group" href="images/01.jpg"> <img src="images/01_small.jpg" mid="images/01_mid.jpg" big="images/01.jpg"></a></div>
</li>
<li>
<div class="tb-pic tb-s40"><a rel="example_group" href="images/02.jpg"> <img src="images/02_small.jpg" mid="images/02_mid.jpg" big="images/02.jpg"></a></div>
</li>
<li>
<div class="tb-pic tb-s40"> <a rel="example_group" href="images/03.jpg"> <img src="images/03_small.jpg" mid="images/03_mid.jpg" big="images/03.jpg"></a></div>
</li>
<li>
<div class="tb-pic tb-s40"> <a rel="example_group" href="images/04.jpg"> <img src="images/04_small.jpg" mid="images/04_mid.jpg" big="images/04.jpg"></a></div>
</li>
<li>
<div class="tb-pic tb-s40"> <a rel="example_group" href="images/05.jpg"> <img src="images/05_small.jpg" mid="images/05_mid.jpg" big="images/05.jpg"></a></div>
</li>
</ul>
</div>
<!--图片-->
<script type="text/javascript">
$(document).ready(function () {

$(".jqzoom").imagezoom();

$("#thumblist li a").click(function () {
$(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
$(".jqzoom").attr('src', $(this).find("img").attr("mid"));

$(".jqzoom").attr('rel', $(this).find("img").attr("big"));
});

});
</script>
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
狮子GYM
推荐于2019-01-24 · TA获得超过2.3万个赞
知道大有可为答主
回答量：7298
采纳率：85%
帮助的人：1679万
我也去答题访问个人页
展开全部
淘宝店铺装修鼠标滑过，图片变换，非常实用，用JS可以很容易做到，但是JS有个缺陷，不是淘宝设计师，根本不能用。其实用html实现更容易，而且天猫淘宝都可以用。

分享一下HTML实现鼠标滑过切换图片的代码
<div class="sub all_t10" style="width:300px;height:300px; dashed #ccc;background:url(http://img03.taobaocdn.com/imgextra/i3/743545528/T2gttoXBpaXXXXXXXX_!!743545528.jpg_310x310.jpg);float:left;margin-right: 20px">

<div data-widget-config="{'trigger':'.all_t10','align':{'node':'.all_t10','offset':[0,-300],'points':['bc','tc']}}" data-widget-type="Popup" class="J_TWidget hidden">
<div style="width:298px;height:298px;background:url(http://img03.taobaocdn.com/imgextra/i3/743545528/T2QW8dXzlaXXXXXXXX_!!743545528.jpg_310x310.jpg)">
<a href="#" style="display:block;width:298px;height:298px;" target="_blank"></a></div>
</div>
</div>

注意：
1.“sub all_t10”这个序列号需要修改一下，全部修改，一个图片切换一个对应的数字。否则切换的图片会混掉。

2.图片网址链接换成自己做的网址链接。还有图片大小都要修改。

3.上面还有一个图片指向链接，大家可以换掉#。

4.{'node':'.all_t10','offset':[0,-300],'points':['bc','tc']}}"这段里面的【0，-300】的300一定要修改。修改成你要切换图片高度。
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
hengqi18
2011-09-19 · 贡献了超过338个回答
知道答主
回答量：338
采纳率：0%
帮助的人：152万
我也去答题访问个人页
展开全部
顶级淘宝营销视频 长达60分钟淘宝装修，让你玩转淘宝 金冠掌柜私藏营销软件，整天特价出售。 除了购买别人的模板一位，要么就自己申请为设计师，自己弄
追问
然后南。
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
羽落huang
2015-10-28 · TA获得超过161个赞
知道小有建树答主
回答量：206
采纳率：96%
帮助的人：78.1万
我也去答题访问个人页
展开全部
用的js javascript 可以实现很多功能
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
收起 1条折叠回答
收起 更多回答（3）
推荐律师服务： 若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

为你推荐：

下载百度知道APP，抢鲜体验
使用百度知道APP，立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

京ICP证030173号-1   京网文【2023】1034-029号     ©2024Baidu  使用百度前必读 | 知道协议 | 企业推广

辅 助

模 式