jsp+css实现图片自动轮换

最新推荐文章于 2024-09-22 22:49:42 发布

szjyy007

最新推荐文章于 2024-09-22 22:49:42 发布

阅读量4.2k

点赞数 2

分类专栏： javascript css jsp 文章标签： jsp css function class path filter

本文链接：https://blog.csdn.net/szjyy007/article/details/7056271

版权

本文展示了如何结合jsp和css实现一个简单的图片自动轮换效果。通过jsp动态加载图片路径，配合css实现样式布局，同时用javascript处理图片切换的动画效果，实现了鼠标悬停停止轮播，离开继续轮播的功能。

摘要由CSDN通过智能技术生成

jsp文件（片段）

<div id="ifocus">
<div id="ifocus_pic">
<div id="ifocus_piclist" style="left:0; top:0;">
<ul>
<li><a href="http://slide.news.sina.com.cn/s/slide_1_2841_17440.html" target="_blank"><img src='<%=path%>/images/picture/2011050903.jpg' alt="" /></a></li>
<li><a href="http://news.sina.com.cn/c/p/20101202/17289496.shtml" target="_blank"><img src='<%=path%>/images/picture/2011050901.jpg' alt="" /></a></li>
<li><a href="http://blog.sina.com.cn/u/1565088014" target="_blank"><img src='<%=path%>/images/picture/meinv/wangruoyi(2).jpg' alt="" /></a></li>
<li><a href="http://news.sina.com.cn/c/p/20101227/12109533.shtml" target="_blank"><img src='<%=path%>/images/picture/2011050902.jpg' alt="" /></a></li>
</ul>
</div>
<div id="ifocus_opdiv"></div>
<div id="ifocus_tx">
<ul>
<li class="current">云南空乘招募吸引众多俊男美女</li>
<li class="normal">女大学生学做痛经操</li>
<li class="normal">王若伊</li>
<li class="normal">陕西华县发现巨大地窖挖掘出数吨宋代古钱币</li>
</ul>
</div>
</div>
<div id="ifocus_btn">
<ul>
<li class="current"><img src='<%=path%>/images/picture/2011050903.jpg' alt="" /></li>
<li class="normal"><img src='<%=path%>/images/picture/2011050901.jpg' alt="" /></li>