郁闷吧 微信小程序 4188479 63242849 39070147 130690866
还没有任何记录...

博彩评级专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

博彩评级提供网页素材下载、网站模板
这一切都是免费的!
当前位置:博彩评级 > javascript > 网页特效 >

图片上下翻滚式焦点图广告(基于jquery)

来源:博彩评级 作者: 博彩评级 日期:2010-07-06 人气:
基于jquery的图片上下翻滚式焦点图广告代码,精仿淘宝网首页的焦点幻灯片效果。

本文地址:http://www.qqydc.com/js/texiao/jquery%20taobaofz.html
文章摘要:图片上下翻滚式焦点图广告(基于jquery),扭住美国空军破桐之叶,期数远在天边管状。

基于jquery的图片上下翻滚式焦点图广告代码,完全仿淘宝网首页的焦点幻灯片效果。

看参数控制代码:
<script type="text/javascript" >
$(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();
  //滑入停止动画,滑出开始动画 博彩评级 http://www.qqydc.com/
  $('.ad').hover(function(){
    clearInterval(adTimer);
   },function(){
    adTimer = setInterval(function(){
       showImg(index)
    index++;
    if(index==len){index=0;}
     } , 2000);
  }).trigger("mouseleave");
})
// 通过控制top ,来显示不同的幻灯片 博彩评级 http://www.qqydc.com/
function showImg(index){
        var adHeight = $(".ad").height();
  $(".slider").stop(true,false).animate({top : -adHeight*index},400);
  $(".num li").removeClass("on")
   .eq(index).addClass("on");
}
</script>

其中的 2000 是控制自动播放间隔时间的,400 是控制鼠标划过数字时图片的翻滚速度的。按照你的实际需要自行修改为合适的大小。

博彩评级 整理

本文链接:图片上下翻滚式焦点图广告(基于jquery)http://www.qqydc.com/js/texiao/jquery taobaofz.html

(责任编辑:博彩评级)

图片上下翻滚式焦点图广告(基于jquery)由博彩评级收集整理,您可以自由传播,请主动带上本文链接

web前端开发就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。