发布于:2019-09-18 13:19 阅读次数:2011 作者:云码素材 分类:行业经验 关键词:滚动 jquery
jQuery超简单实用的网站公告轮播效果(上下轮播翻动),使用的是最基础的css + js ,适合新手借鉴使用。
JS代码如下:
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> function timer(opj){ $(opj).find('ul').animate({ marginTop : "-3.5rem" },500,function(){ $(this).css({marginTop : "0.7rem"}).find("li:first").appendTo(this); }) } $(function(){ var num = $('.notice_active').find('li').length; if(num > 1){ var time=setInterval('timer(".notice_active")',3500); $('.gg_more a').mousemove(function(){ clearInterval(time); }).mouseout(function(){ time = setInterval('timer(".notice_active")',3500); }); } $(".news_ck").click(function(){ location.href = $(".notice_active .notice_active_ch").children(":input").val(); }) }); </script>
html代码如下:
<div class="huadong"> <div class="huabox"> <div class="hdimg"><img src="image/lingdang.png"></div> <h5>【公告】</h5> <div class="notice_active"> <ul> <li class="notice_active_ch"> <span>滑动轮播1a去哦我我iwoi我i滑动轮播3滑</span> <em>2017-01-18</em> </li> <li class="notice_active_ch"> <span>滑动轮播2滑动轮播3</span> <em>2017-01-18</em> </li> <li class="notice_active_ch"> <span>滑动轮播3滑动轮播3</span> <em>2017-01-18</em> </li> </ul> </div> <div class="gg_more"> <a class="news_ck" href="javascript:void(0)">查看详情</a> <a title="news_more" href="#">更多+</a> </div> </div> </div>
CSS代码如下:
<style type="text/css"> /*border-bottom: 1px solid #F0F0F0;*/ .huadong {width: 60rem;height:4rem;padding: 0.5rem 0 0.3rem 0; border-bottom: 1px solid #F0F0F0; position:relative;font: 12px/1.5 "Hiragino Sans GB","Microsoft YaHei",simsun;margin:0 auto;} .huadong .huabox { margin:0 auto; width: 80%; line-height: 4rem;} .huadong .hdimg {float:left;line-height:3.5rem;} .huadong .hdimg img { width: 100%; vertical-align:middle;} .huadong h5 {font-size:1rem;float:left; line-height: 2.2rem; margin: 0.8rem 0 0 0; } .huadong .gg_more { float: left;} .huadong .gg_more a { font-size: 0.8rem; text-decoration:none;} .huadong .notice_active { float: left; width: 55%; height: 4rem; padding: 0; overflow: hidden; position: relative; } .huadong .notice_active li{list-style-type:none;line-height: 2.4rem;overflow: hidden;} /*.huadong .notice_active li.notice_active_ch {}*/ .huadong .notice_active li.notice_active_ch span {color:#656972;font-size:1rem;display: block;overflow: hidden; width:80%;float: left; overflow: hidden;margin:0 0 2rem 0;} .huadong .gg_more .news_ck { float: left; margin: 0 1rem 0 1rem; color: #888; width: 5rem; height: 2rem; line-height: 2rem; display: block; border: 1px solid #656972; text-align: center; border-radius: 0.7rem; font-size: 0.8rem; margin-top: 1rem; } .huadong .gg_more .news_more { } .huadong .notice_active li.notice_active_ch em {text-align:right;float:right;color:#888; font-size:0.8rem;font-style:normal; } </style>
我要加群:资源共享的时代,不要再单打独斗!加小编微信号加入群:xnynews(备注:云码素材入群),qq群号:202498279,一起技术学习,资源分享!
免责声明
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!
热门标签
推荐模板
Light Year Admin后台模板 v4 iframe版本 基于Bootstrap 4.4.1
2024-10-20 22:57 浏览:24
html清爽ui设计作品集展示网站模板 响应式宣传网页制作代码模板
2024-09-23 10:12 浏览:238
热门文章
2022-05-10 08:48 浏览:30992
2Tik Tok 深田咏美抖音视频100+合集资源免费下载【绿色】
2022-10-31 08:42 浏览:29617
2022-03-27 09:29 浏览:15687
2022-09-11 15:02 浏览:12810
2020-04-13 15:31 浏览:11969
6免费使用chatgpt3种方式 chatgpt国内入口无需梯子
2023-04-23 17:52 浏览:10680
2022-09-08 10:28 浏览:9338
8三个开源的php论坛bbs源码 可自建 圈子 帖子社区网站!
2020-09-15 21:34 浏览:9324
2022-04-13 14:31 浏览:9179
2019-08-28 17:28 浏览:8649