向上滚动
superslide插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <style> *{ margin: 0; padding: 0; font-family:SimHei; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } body{ min-width:1000px; background: #080e2c ; } div{ color:#fff; } ul li{list-style: none;} .content{ width: 100%; position: absolute; top: 96px; } .subcontentr{ width:93%; border:1px solid #3772b2; border-radius:12px; margin:6% 7% 6% 0; background:#001848; position:relative; } .title{ height:40px;border:1px solid #3772b2;background:#09275e;border-radius:12px 12px 0 0; } .subtitle{ line-height:40px;margin-left:17px; } /* 滚动 */ .txtscroll{padding:12px 7px;} .scroll_top {} .scroll_top ul{} .scroll_top ul li{float:left;text-align: center;line-height: 30px;background:rgba(28,61,105,1);} .scroll_top ul li:nth-child(1){width:60%;} .scroll_top ul li:nth-child(2){width:15%;} .scroll_top ul li:nth-child(3){width:25%;} .txtScroll-top{ width:100%; overflow:hidden; position:relative; } .txtScroll-top .bd{ padding:1%;} .txtScroll-top .infoList li{ height:34px;display:flex; line-height:34px;background:rgba(28,61,105,0.23); font-size:14px;color:#fff; } .txtScroll-top .infoList li:nth-child(2n){background:#001848;} .txtScroll-top ul li p{float:left;text-align: center;} .txtScroll-top ul li p:nth-child(1){width:60%;} .txtScroll-top ul li p:nth-child(2){width:15%;} .txtScroll-top ul li p:nth-child(3){width:25%;} /* 滚动 end*/ /* 中间上 center_top */ .center_top ul {margin:15px 0;} .center_top ul li{float:left;width:33%;text-align:center;border-right:1px solid rgba(255,255,255,0.2);} .center_top ul li:last-child{border-right:0;} .center_top ul li p:nth-child(1){font-size:14px;padding-bottom: 8px;color:#fff;} .center_top ul li p:nth-child(2){font-size:26px; height: 26px;color:#3BE8F3;} .center_top ul li:nth-child(1) p:nth-child(2){color:#3BE8F3;} .center_top ul li:nth-child(2) p:nth-child(2){color:#21D29D;} .center_top ul li:nth-child(3) p:nth-child(2){color:#52BBFF;} </style> <body> <script type="text/javascript" src="js/jquery1.42.min.js"></script> <script type="text/javascript" src="js/jquery.SuperSlide.2.1.js"></script> <div class="content"> <div class="content_right" style="width:500px;height:400px;"> <div class="subcontentr subheight1 part5"> <div class="title"> <span class="subtitle">我是标题</span> </div> <div class="txtscroll" style="width:100%; " > <div class="scroll_top"> <ul> <li>标题1</li> <li>标题2</li> <li>标题3</li> </ul> </div> <div class="scroll_bot"> <div class="txtScroll-top"> <div class="bd"> <ul class="infoList"> <li> <p>11111111111111111111111111111111</p> <p class="date_num">1</p> <p class="date_num">22320</p> </li> <li> <p>我是标题</p> <p class="date_num">1</p> <p class="date_num">22320</p> </li> <li> <p>我是标题</p> <p class="date_num">1</p> <p class="date_num">22320</p> </li> <li> <p>我是标题</p> <p class="date_num">1</p> <p class="date_num">22320</p> </li> <li> <p>我是标题</p> <p class="date_num">1</p> <p class="date_num">22320</p> </li> <li> <p>我是标题</p> <p class="date_num">1</p> <p class="date_num">22320</p> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </body> <script type="text/javascript"> $(document).ready(function(){ function date_num(){ $('.date_num').each(function(i){ var date_num=parseInt($(this).html()); var random=parseInt(10*Math.random()); random=date_num+random; $(this).html(random) console.log($(this).html()) }); } setInterval(date_num,5000) jQuery(".txtScroll-top").slide({ mainCell:".bd ul",autoPage:true,effect:"topLoop",autoPlay:true,vis:5,pnLoop:false}); }) </script> </html>