jquery 图片轮播怎么设置？求高手帮忙
我是jquery初学者，还不是很了解jquery,求高手帮忙。<script>$(function(){$("div#numspan").hover(function()...
我是jquery初学者，还不是很了解jquery,求高手帮忙。
<script>
$(function(){
$("div#num span").hover(function(){
$(this).parent().children().removeClass("cut");
$(this).addClass("cut");
$("div#ass").animate({left:"-400"},5000).index();
});
});
</script>
<style>
#pic{width:400px; height:210px; overflow:hidden; margin:0 auto; margin-top:100px}
#pic div#gg{
width:398px;
height:198px;
position:relative;
overflow:hidden;
z-index: 1;
}
#pic div#num{
width:100px;
height:20px;
position:absolute;
left: 279px;
top: 164px; z-index:3;
}
#pic div#num span{width:20px; height:20px; cursor:pointer; line-height:20px; float:left; text-align:center; color:#000000}
#pic div#num span.cut{background:#000000; color:#FFFFFF;}
#pic img{width:400px; height:200px; float:left; }
#pic div#ass{
width:2000px;
position:absolute;
z-index:0;
height:195px; z-index:2;
}
</style>
<div id="pic"><div id="gg">
<div id="ass"><img src="file:///C|/Users/pb/Desktop/图片/5426070_105541074311_2.jpg" /><img src="file:///C|/Users/pb/Desktop/图片/8092962_121630541372_2.jpg" /><img src="file:///C|/Users/pb/Desktop/图片/8092962_183443922000_2.jpg" /></div>
<div id="num"><span class="cut">1</span><span>2</span><span>3</span><span>4</span></div>
</div></div>
不让它自动循环播放，鼠标经过相应的数字就显示相应的图片。 展开
<script>
$(function(){
$("div#num span").hover(function(){
$(this).parent().children().removeClass("cut");
$(this).addClass("cut");
$("div#ass").animate({left:"-400"},5000).index();
});
});
</script>
<style>
#pic{width:400px; height:210px; overflow:hidden; margin:0 auto; margin-top:100px}
#pic div#gg{
width:398px;
height:198px;
position:relative;
overflow:hidden;
z-index: 1;
}
#pic div#num{
width:100px;
height:20px;
position:absolute;
left: 279px;
top: 164px; z-index:3;
}
#pic div#num span{width:20px; height:20px; cursor:pointer; line-height:20px; float:left; text-align:center; color:#000000}
#pic div#num span.cut{background:#000000; color:#FFFFFF;}
#pic img{width:400px; height:200px; float:left; }
#pic div#ass{
width:2000px;
position:absolute;
z-index:0;
height:195px; z-index:2;
}
</style>
<div id="pic"><div id="gg">
<div id="ass"><img src="file:///C|/Users/pb/Desktop/图片/5426070_105541074311_2.jpg" /><img src="file:///C|/Users/pb/Desktop/图片/8092962_121630541372_2.jpg" /><img src="file:///C|/Users/pb/Desktop/图片/8092962_183443922000_2.jpg" /></div>
<div id="num"><span class="cut">1</span><span>2</span><span>3</span><span>4</span></div>
</div></div>
不让它自动循环播放，鼠标经过相应的数字就显示相应的图片。 展开
1个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>
RunJS 演示代码
</title>
<style>
#pic{
width:400px;
height:210px;
overflow:hidden;
margin:0 auto;
margin-top:100px;
}
#pic div#gg{
width:398px;
height:198px;
position:relative;
overflow:hidden;
z-index: 1;
}
#pic div#num{
width:100px;
height:20px;
position:absolute;
left: 279px;
top: 164px;
z-index:3;
}
#pic div#num span{
width:20px;
height:20px;
cursor:pointer;
line-height:20px;
float:left;
text-align:center;
color:#000000;
}
#pic div#num span.cut{
background-color:#000000;
color:#FFFFFF;
}
#pic img{
width:400px;
height:200px;
float:left;
}
#pic div#ass{
width:2000px;
position:absolute;
z-index:0;
height:195px;
z-index:2;
}
</style>
<script id="jquery_180" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.0.min.js"></script>
<script>
jQuery(function($){
var w = $("img").width();
$("span").hover(function(){
var me = $(this);
me.addClass("cut").siblings("span.cut").removeClass("cut");
$("#ass").stop().animate({
left: "-" + w * me.index() + "px"
}, "slow");
});
});
</script>
</head>
<body>
<div id="pic">
<div id="gg">
<div id="ass">
<img src="https://gss0.baidu.com/8_BXsjip0QIZ8tyhnq/timg?wh_rate=0&wapiknow&quality=100&size=w250&sec=0&di=513c25df22650d5a18aee135fdc8ca01&src=http%3A%2F%2Fimg.iknow.bdimg.com%2Fzhidaoribao2014%2F2015year%2F0314%2F4.jpg" />
<img src="https://gss0.baidu.com/8_BXsjip0QIZ8tyhnq/timg?wh_rate=0&wapiknow&quality=100&size=w250&sec=0&di=45039ef63beef48c27123fbfd1d0fa87&src=http%3A%2F%2Fimg.iknow.bdimg.com%2Fzhidaoribao2014%2F2015year%2F0314%2F2.jpg" />
<img src="http://cdn.iknow.bdimg.com/static/question/widget/user/info/daily/img/daily_b734a6b.png" />
</div>
<div id="num">
<span class="cut">
1
</span>
<span>
2
</span>
<span>
3
</span>
</div>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
