求一个jquery实现的焦点广告,不要用插件

就是很多网站上面那种图片轮显效果,只用jquery.js,不要用其他的jquery插件... 就是很多网站上面那种图片轮显效果,只用jquery.js,不要用其他的jquery插件 展开
 我来答
先锋站长
2013-06-18
知道答主
回答量:24
采纳率:0%
帮助的人:10.6万
展开全部
看代码:
HTML部分:

<div class="ad" >
<ul class="slider" >
<li><img src="images/ads/1.gif"/></li>
<li><img src="images/ads/2.gif"/></li>
<li><img src="images/ads/3.gif"/></li>
<li><img src="images/ads/4.gif"/></li>
<li><img src="images/ads/5.gif"/></li>
</ul>
<ul class="num" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
JS部分:
/*首页广告效果*/
$(function(){
var len = $(".num > li").length;
var index = 0;
var adTimer;
$(".num li").mouseover(function(){
index = $(".num li").index(this);
showImg(index);
}).eq(0).mouseover();
//滑入 停止动画,滑出开始动画.
$('.ad').hover(function(){
clearInterval(adTimer);
},function(){
adTimer = setInterval(function(){
showImg(index)
index++;
if(index==len){index=0;}
} , 3000);
}).trigger("mouseleave");
})
// 通过控制top ,来显示不同的幻灯片
function showImg(index){
var adHeight = $(".content_right .ad").height();
$(".slider").stop(true,false).animate({top : -adHeight*index},1000);
$(".num li").removeClass("on")
.eq(index).addClass("on");
}
haodemumu168
2013-06-14 · TA获得超过299个赞
知道小有建树答主
回答量:479
采纳率:100%
帮助的人:284万
展开全部
不太懂焦点广告

不过图片轮显效果 就是js取图片的src值然后替换

一般做法就是把图片放到一个数组 然后设定时间遍历替换
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

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

类别

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

说明

0/200

提交
取消

辅 助

模 式