100分，写一个jquery特效，鼠标滑过停止，鼠标离开继续

100分，写一个jquery特效！！！！就是：当鼠标移动到对象上面的时候停止自动滚动，当鼠标离开对象上面的时候继续滚动。代码如下：<divclass="w315fl"><... 100分，写一个jquery特效！！！！

就是：

当鼠标移动到对象上面的时候停止自动滚动，当鼠标离开对象上面的时候继续滚动。

代码如下：

<div class="w315 fl">

<div class="tPicShow">
<li style="display:block;"><a href="#" title="哇哈哈"><img src="1341382865_67875500.jpg" alt="哇哈哈" width="315" height="245"></a> <a href="#" title="哇哈哈" class="tTit">哇哈哈</a> </li>

<li style="display:none;"><a href="#" title="加多宝"><img src="1341366158_67163500.jpg" alt="加多宝" width="315" height="245"></a> <a href="#" title="加多宝" class="tTit">加多宝</a></li>
</div>

</div>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
i=0;
n=$(".tPicShow").children().length;
time=setInterval("tPicShow()",1000);
})
function tPicShow() {
i=i+1;
//alert(i);
$(".tPicShow li").hide();
$(".tPicShow li:eq("+i+")").fadeIn(1000);
$(".tPicShow li:eq("+i+")").fadeOut(1000);

if(i==n-1){
i=-1;
}
}

</script> 展开

 我来答

1个回答

#热议# 发烧为什么不能用酒精擦身体来退烧？

BS0小陈
推荐于2016-08-21 · TA获得超过116个赞

知道小有建树答主

回答量：186

采纳率：0%

帮助的人：108万

我也去答题访问个人页

关注

展开全部

<html>
<head>
<style>
*{
margin:0px;
padding:0px;
}
#adv_div{
border : 1px solid #aaaaaa;
margin-left:200px;
margin-top:40px;
width:548px;
height:177px;
overflow:hidden;
position:relative;
}
#adv,#index{
position:absolute;
}
ul li{
list-style:none;
display:inline;
}
ul adv{
width:548px;
height:177px;
display:block;
}
#index{
right:5px;
bottom:5px;
}
#index li{
float: left;
color: #FF7300;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 12px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #FF7300;
}
.on{
line-height: 21px;
width: 21px;
height: 21px;
font-size: 16px;
margin: 0 1px;
border: 0;
background-color:red;
font-weight: bold;
}
</style>
<script type="text/javascript" src="F:\Workspaces\_MyStudy\js\jquery-1.4.3.js"></script>
<script>
var adv_height = 177;
var adv_index = 0;
var adv_task;
$(function(){
$('#index li').mouseenter(function(){
var index = $('#index li').index(this);
showAdv(index);
});
showAdv(0);
$('#adv_div').hover(function(){
clearInterval(adv_task);
},function(){
adv_task = setInterval(function(){
showAdv(adv_index);
},2000);
}).mouseleave();
});
function showAdv(index){
$('#adv').stop(true).animate({'top':-1*adv_height*index},1000);
$('#index li').removeClass('on');
$('#index li').eq(index).addClass('on');
adv_index = index+1;
if(adv_index==5)adv_index=0;
}
</script>
</head>
<body>
<div id="adv_div">
<ul id="adv">
<li><img src="F:\Workspaces\_MyStudy\image\02_1.jpg"/></li>
<li><img src="F:\Workspaces\_MyStudy\image\02_2.jpg"/></li>
<li><img src="F:\Workspaces\_MyStudy\image\02_3.jpg"/></li>
<li><img src="F:\Workspaces\_MyStudy\image\02_4.jpg"/></li>
<li><img src="F:\Workspaces\_MyStudy\image\02_5.jpg"/></li>
</ul>
<ul id="index">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>

整个页面的html代码都给你了，你复制下来建立一个html粘贴上去，修改一下最后的图片地址，看看效果然后看看代码！！！

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

100分，写一个jquery特效，鼠标滑过停止，鼠标离开继续

其他类似问题

为你推荐：