jquery焦点图片移动
我是一名jquery新手，现在想做一个类似于淘宝图片切换的效果，就是当鼠标移到数字时，数字有变化，然后图片也跟着移动，现在只有数字发生变化，图片不跟着移动，望各位高手告知...
我是一名jquery新手，现在想做一个类似于淘宝图片切换的效果，就是当鼠标移到数字时，数字有变化，然后图片也跟着移动，现在只有数字发生变化，图片不跟着移动，望各位高手告知，是那里出现了问题？
<html>
<head>
<title>practice</title>
<style>
.container{
height:168px;
width:408px;
overflow:hidden;
}
.picture{
height:168px;
width:408px;
overflow:hidden;
position:absolute;
display:inner;
}
.focus{
float:left;
}
.num{
position:absolute;
right:5px;
bottom:5px;
}
.num li{
float:left;
padding-left:5px;
color: #FF7300;
font-family: Arial;
cursor: pointer;
border: 1px solid #FF7300;
}
.numon{
color: #fff;
background-color: #FF7300;
font-family: Arial;
cursor: pointer;
float:left;
}
</style>
<script src="js/jquery-1.3.1.js">
</script>
<script>
$(function(){
$(".num li").hover(function(){
$(this).addClass("numon");
$(".focus").animate({left:"408px"},2000);
},function(){
$(".num li").removeClass("numon");
});
});
</script>
</head>
<body>
<div class="container">
<ul class="picture">
<li class="focus"><img src="images/01.jpg"/></li>
<li class="focus"><img src="images/02.jpg"/></li>
<li class="focus"><img src="images/03.jpg"/></li>
</ul>
<ul class="num">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html> 展开
<html>
<head>
<title>practice</title>
<style>
.container{
height:168px;
width:408px;
overflow:hidden;
}
.picture{
height:168px;
width:408px;
overflow:hidden;
position:absolute;
display:inner;
}
.focus{
float:left;
}
.num{
position:absolute;
right:5px;
bottom:5px;
}
.num li{
float:left;
padding-left:5px;
color: #FF7300;
font-family: Arial;
cursor: pointer;
border: 1px solid #FF7300;
}
.numon{
color: #fff;
background-color: #FF7300;
font-family: Arial;
cursor: pointer;
float:left;
}
</style>
<script src="js/jquery-1.3.1.js">
</script>
<script>
$(function(){
$(".num li").hover(function(){
$(this).addClass("numon");
$(".focus").animate({left:"408px"},2000);
},function(){
$(".num li").removeClass("numon");
});
});
</script>
</head>
<body>
<div class="container">
<ul class="picture">
<li class="focus"><img src="images/01.jpg"/></li>
<li class="focus"><img src="images/02.jpg"/></li>
<li class="focus"><img src="images/03.jpg"/></li>
</ul>
<ul class="num">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html> 展开
4个回答
展开全部
应该是你的图片层写的有问题吧，图片层开始时默认显示图片1，其他不显示，之后随数字的切换而变化。我看你代码上图片的部分直接什么都没有处理啊。
<script>
$(function(){
$(".num li").hover(function(){
var id='#d'+$(this).attr('id').substring(1);
$(id).attr('style','display:;');
},function(){
var id='#d'+$(this).attr('id').substring(1);
$(id).attr('style','display:none;');
});
});
</script>
</head>
<body>
<div class="container">
<ul class="picture" style='display:;'>
<li class="focus" id=d1><img src="images/01.gif"/></li>
<li class="focus" id=d2 style='display:;'><img src="images/02.gif"/></li>
<li class="focus" id=d3 style='display:;'> <img src="images/03.gif"/></li>
</ul>
<ul class="num">
<li id=i1>1</li>
<li id=i2>2</li>
<li id=i3>3</li>
</ul>
<script>
$(function(){
$(".num li").hover(function(){
var id='#d'+$(this).attr('id').substring(1);
$(id).attr('style','display:;');
},function(){
var id='#d'+$(this).attr('id').substring(1);
$(id).attr('style','display:none;');
});
});
</script>
</head>
<body>
<div class="container">
<ul class="picture" style='display:;'>
<li class="focus" id=d1><img src="images/01.gif"/></li>
<li class="focus" id=d2 style='display:;'><img src="images/02.gif"/></li>
<li class="focus" id=d3 style='display:;'> <img src="images/03.gif"/></li>
</ul>
<ul class="num">
<li id=i1>1</li>
<li id=i2>2</li>
<li id=i3>3</li>
</ul>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
晨控智能
2025-02-10 广告
可视化标签是广州晨控智能技术有限公司在物联网及自动识别领域的一项重要技术创新。通过先进的图形化界面设计，我们将复杂的数据信息转化为直观、易读的标签形式。这些标签不仅美观大方，更能够实时展示物品状态、库存数量、位置信息等关键数据。用户只需一眼...
点击进入详情页
本回答由晨控智能提供
展开全部
html>
<head>
<title>practice</title>
<style>
.container{
height:168px;
width:408px;
overflow:hidden;
}
.picture{
height:168px;
width:408px;
overflow:hidden;
position:absolute;
display:inner;
}
.focus{
float:left;
}
<head>
<title>practice</title>
<style>
.container{
height:168px;
width:408px;
overflow:hidden;
}
.picture{
height:168px;
width:408px;
overflow:hidden;
position:absolute;
display:inner;
}
.focus{
float:left;
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
试试这个图片切换
有12345数字一起切换
鼠标点一下数字会变换到另一张图片，不点就会自动换
里面有教程和源码
参考资料： http://www.blueidea.com/common/shoutbox/redir.asp?4=p&id=10895
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
