jquery.superslide插件制作新闻动态左右滚动效果支持自动滚动,文本内容自动滚动,jquery参数均可修改。下载即可使用。
使用方法:
1、head引入css文件
<link href="css/style.css" rel="stylesheet" type="text/css"/>
2、head引入js文件
<script src="js/jquery.js"></script>
<script src="js/jquery.SuperSlide.2.1.1.js"></script>
3、body引入HTML代码
<div class="strange-box">
<div class="strange-header">
<h2>新闻动态</h2>
<p>新闻报道</p>
</div>
<div class="strange-content">
<div class="strange-news-fl">
<img src="images/new.jpg" alt="">
</div>
<div class="strange-news-fr strange-news-sw">
<div class="strange-info">
<ul class="strange-info-list">
<li>
<a href="#">
<h2>云签约国家公安三所 发布一站式安全等保服务</h2>
<div class="strange-text">
<p class="strange-text-title">新闻报道了解云服务最新动态 了解云服务新闻报道云服务电脑亮相2018 CES ASIA,Mate10全系手机率先试商用新闻报道 云服务电脑亮相2018 CES ASIA,Mate10全系手机率先试商用2018-06-136月13日,亚洲消费电子展(CES ASIA)上,华为消费者BG 手机产品线总裁何刚,携手华为五项主要研发技术与大家见面,其中之一便是端云结合重新定义个人电脑的云服务电脑。何刚在2018 CES ASIA发布手机支持云电脑 云服务电脑是把云服务的云桌面服务通过app的形式集成到华为终端上,面向终端消费者推出的一种全新云服务产品。发挥端云协同的优势,提供给终端用户一个便...</p>
</div>
</a>
<a href="#" class="strange-more">了解更多 <em></em></a>
</li>
<li>
<a href="#">
<h2>云签约国家公安三所 发布一站式安全等保服务</h2>
<div class="strange-text">
<p class="strange-text-title">新闻报道了解云服务最新动态 了解云服务新闻报道云服务电脑亮相2018 CES ASIA,Mate10全系手机率先试商用新闻报道 云服务电脑亮相2018 CES ASIA,Mate10全系手机率先试商用2018-06-136月13日,亚洲消费电子展(CES ASIA)上,华为消费者BG 手机产品线总裁何刚,携手华为五项主要研发技术与大家见面,其中之一便是端云结合重新定义个人电脑的云服务电脑。何刚在2018 CES ASIA发布手机支持云电脑 云服务电脑是把云服务的云桌面服务通过app的形式集成到华为终端上,面向终端消费者推出的一种全新云服务产品。发挥端云协同的优势,提供给终端用户一个便...</p>
</div>
</a>
<a href="#" class="strange-more">了解更多 <em></em></a>
</li>
<li>
<a href="#">
<h2>云签约国家公安三所 发布一站式安全等保服务</h2>
<div class="strange-text">
<p class="strange-text-title">新闻报道了解云服务最新动态 了解云服务新闻报道云服务电脑亮相2018 CES ASIA,Mate10全系手机率先试商用新闻报道 云服务电脑亮相2018 CES ASIA,Mate10全系手机率先试商用2018-06-136月13日,亚洲消费电子展(CES ASIA)上,华为消费者BG 手机产品线总裁何刚,携手华为五项主要研发技术与大家见面,其中之一便是端云结合重新定义个人电脑的云服务电脑。何刚在2018 CES ASIA发布手机支持云电脑 云服务电脑是把云服务的云桌面服务通过app的形式集成到华为终端上,面向终端消费者推出的一种全新云服务产品。发挥端云协同的优势,提供给终端用户一个便...</p>
</div>
</a>
<a href="#" class="strange-more">了解更多 <em></em></a>
</li>
</ul>
</div>
<div class="strange-pagination">
<ul>
<li class="on"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(".strange-news-fr").slide({titCell:".strange-pagination ul",mainCell:".strange-info ul",autoPage:true,effect:"left",autoPlay:true,delayTime:1000,trigger:"click"});
</script>