如何让带有格式的大篇幅内容在页面自动滚动

Naix1573 2018-01-19 09:48:54

第一次提问，请各位大佬教我！
数据库是一个新闻表，我想做的是查出数据后，在第一页显示新闻标题，然后单击新闻标题，把对应的id传到action里，再把内容显示新闻详情页面，这个我做完了，可以在页面显示新闻详情。
现在我想做的是让这个新闻详情的页面自动滚动，无限循环，从下往上滚动。



<p class="MsoNormal" style="text-indent:28.0pt;mso-char-indent-count:2.0">

	<font color="#000000" size="3"><span style="font-family: 宋体;">防患于未然，为进一步提高黄岛工厂全体人员的紧急情况应对能力和自我保护能力、熟练掌握突发火灾的应对和逃生技能、提高各车间消防骨干担当的业务水平，</span><span lang="EN-US">2017</span><span style="font-family: 宋体;">年</span><span lang="EN-US">11</span><span style="font-family: 宋体;">月</span><span lang="EN-US">14</span><span style="font-family: 宋体;">日黄岛工厂组织进行了综合应急疏散演习。</span><span lang="EN-US"><o:p></o:p></span></font>

</p>

<p class="MsoNormal" style="text-indent:28.0pt;mso-char-indent-count:2.0">

	<font color="#000000" size="3"><span style="font-family: 宋体;"><br></span></font>

</p>

<p class="MsoNormal" style="text-indent:28.0pt;mso-char-indent-count:2.0">

	<font color="#000000" size="3"><span style="font-family: 宋体;">本次演习是在构建工厂消防职能组织之后，所进行的第一次两栋生产楼全体人员参与的综合演习。经过前期脚本制作、培训考核、流程梳理、物资配置等一系列周密的准备，11月</span><span lang="EN-US">14</span><span style="font-family: 宋体;">日</span><span lang="EN-US">15:00，</span><span style="font-family: 宋体;">演习正式开始。</span><span lang="EN-US"><o:p></o:p></span></font>

</p>

<p class="MsoNormal" style="text-indent:28.0pt;mso-char-indent-count:2.0">

	<font color="#000000" size="3"><span style="font-family: 宋体;"><br></span></font>

</p>

<p class="MsoNormal" style="text-indent:28.0pt;mso-char-indent-count:2.0">

	<font color="#000000" size="3"><span style="font-family: 宋体;">当牙刷车间内报警信号发出后，门卫值班人员按工作要求完成了现场信息确认、播放警报、模拟报警等工作。而后，两栋生产楼内的全体人员按照指定的疏散通道、安全出口有序进行了疏散。疏散队各区域担当做好了人员清点工作，并将人员集合带队至指定地点。灭火队人员完成了模拟灭火作业。操作班人员完成了生产楼的模拟断电作业。救援队人员完成了“（指定）被困人员”的模拟营救作业。办公楼、研发本部人员全程进行了观摩。在紧张有序的现场气氛中，最终被困人员营救完毕、全体人员疏散完成，本次演习圆满结束。</span><span lang="EN-US"><o:p></o:p></span></font>

</p>

<p class="MsoNormal" style="text-indent:28.0pt;mso-char-indent-count:2.0">

	<font color="#000000" size="3"><span style="font-family: 宋体;"><br></span></font>

</p>

<p>



</p>

<p class="MsoNormal" style="text-indent:28.0pt;mso-char-indent-count:2.0"><span style="font-family: 宋体;"><font color="#000000" size="3">通过本次演习，全体员工的突发事件应对能力得到进一步提升，各职能队伍掌握了自身应承担的责任，全体员工的综合应急水平也得到了提升。演习结束后，任总监对本次演习进行了总结，强调紧急情况发生时所应注意的事项，要求大家后期加强培训训练，不断提高紧急情况应急知识和相关技能，降低事故危害，减少事故损失，确保公司的安全生产工作。</font></span></p>

<p class="MsoNormal" style="text-indent:28.0pt;mso-char-indent-count:2.0"><span style="font-family: 宋体;"><font size="2" color="#808080">（新闻提供者：生产本部 人事总务部 孙兴凯）</font></span></p>

<p class="MsoNormal" style="text-indent:28.0pt;mso-char-indent-count:2.0"><span style="font-family: 宋体;"><font size="2" color="#808080"><br></font></span></p>

<p class="MsoNormal" style="text-indent:28.0pt;mso-char-indent-count:2.0"><img src="http://oares.lionchina.cn/3w//customized/portal/lion/newsfile/b328ef96b5a826ebea89b63733c19ab8.jpg" alt="1" style="max-width: 100%; width: 582.3px; height: 387.9px;" class=""><span style="font-family: 宋体;"><font color="#000000" size="3"><br></font></span></p>

<p class="MsoNormal" style="text-indent:28.0pt;mso-char-indent-count:2.0"><br></p>

<p class="MsoNormal" style="text-indent:28.0pt;mso-char-indent-count:2.0"><img src="http://oares.lionchina.cn/3w//customized/portal/lion/newsfile/0902eaa774c415e649ad35d0d0c301dd.jpg" alt="2" style="max-width: 100%; width: 582.3px; height: 387.9px;" class=""><br></p>

<p class="MsoNormal" style="text-indent:28.0pt;mso-char-indent-count:2.0"><br></p>

<p class="MsoNormal" style="text-indent:28.0pt;mso-char-indent-count:2.0"><img src="http://oares.lionchina.cn/3w//customized/portal/lion/newsfile/35326c04f379e0ba21d05630f497c6a6.jpg" alt="3" style="max-width: 100%; width: 582.3px; height: 436.5px;" class=""><br></p>

<p class="MsoNormal" style="text-indent:28.0pt;mso-char-indent-count:2.0"><br></p>

<p class="MsoNormal" style="text-indent:28.0pt;mso-char-indent-count:2.0"><img src="http://oares.lionchina.cn/3w//customized/portal/lion/newsfile/1e474e417c011e8a1a0c6b034fc847e0.jpg" alt="4" style="max-width: 100%; width: 582.3px; height: 387.9px;" class=""><br></p>

<p><br></p>

<p>        <img src="http://oares.lionchina.cn/3w//customized/portal/lion/newsfile/4f324ad9349b006ec1817fd4c06271e8.jpg" alt="5" style="max-width: 100%; width: 576.4px; height: 383.9px;" class="clicked"><br></p>

<p><br></p>

这是新闻内容的数据库字段。我试了几个方案：
1.Swiper。http://www.swiper.com.cn/api/start/2014/1218/140.html
可以滚动显示，但是在两个滚动的内容中间有一个非常大的空白，而且因为每个新闻内容长短不一样，会因为长短不同导致滚动的速度也不一样。



 <script type="text/javascript" src="${pageContext.request.contextPath}/js/swiper.min.js"></script>

	 <div id="swiper-container" class="swiper-container" align="center">

			<div class="swiper-wrapper">

				<div class="swiper-slide" id="swiper-slide1">

					<c:forEach items="${newsdetails}" var="details">

						<div style="text-align:center;"}>

							<font size="6">${details.title}</font>

						</div>

						<br>

						<div style="text-align:center;"}>

						<font size="3">发布于:${details.createdate}</font>

						</div>

						<br>

						 <font size="4">${details.content}</font>

			 		</c:forEach>

				</div>

				

			</div>

	 </div>

	</div>

	 <script>    	

		var mySwiper = new Swiper('.swiper-container', {

	    	autoplay: true,//可选选项，自动滑动

	    	direction : 'vertical',

	    	autoHeight: true, 

	    	loop : true,

	    	speed:30000,

	    	autoplay : {

		    delay:3000

		 	}, 

	    })

	</script>