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>
浙公网安备 33010602011771号