制作网站推广码,中山网站建设找阿江,我要发布招聘信息,南充网站建设网站说明
在很多情况下#xff0c;我们都需要开发广告轮播图#xff0c;当我们进行页面的功能开发时#xff0c;采用轮播图来实现也行#xff0c;但是很多情况下#xff0c;我们只需要简单的控制轮播循环轮播展示即可#xff0c;所以用jq开开发广告轮播波#xff0c;自定义… 说明
在很多情况下我们都需要开发广告轮播图当我们进行页面的功能开发时采用轮播图来实现也行但是很多情况下我们只需要简单的控制轮播循环轮播展示即可所以用jq开开发广告轮播波自定义方式比较灵活而且还简单只需要几行代码就可以实现广告轮播。
一、效果图 实现功能循环滚动向上下左右滚动都可以滚动鼠标悬浮时取消滚动。
二、开发代码
用例下面开发代码广告向上滚动左右滚动方法同理。 style.nav_box .search{display: none !important;}.div_box{margin-top: 50px;min-height: 600px;width: 100%;}.ad{width: 200px;height: 30px;margin: 0 auto;overflow: hidden;}ul,li,h3{line-height: 30px;cursor: pointer;}
/stylediv classdiv_boxdiv classadh3 classfl[公告]/h3ul classfl w_ullispan这个是新闻广告1/span/lilispan这个是新闻广告2/span/lilispan这个是新闻广告3/span/lilispan这个是新闻广告4/span/li/ul/div
/divscript typetext/javascriptvar timer_ad setInterval(roll_ad,1500);$(.w_ul).hover(function(){//悬浮清除定时器clearInterval(timer_ad)},function(){//取消悬浮定时器开启timer_ad setInterval(roll_ad,1500);})function roll_ad(){$(.w_ul).animate({//滚动效果marginTop:-30px,},500,function(){//滚动时长//滚动结束后执行方法$(this).css({marginTop:0px}).find(li:first).appendTo($(this));//将位置初始化然后将第一个数据放到最后面})} /script
