slider图片效果
分享一个近期项目遇到的一个js图片效果,类似flash的图片显示效果,看效果图:
这也是一个Jquery库的js插件,详细的DEMO:请狠狠的点击我!
下载JS:单击右键下载JS
使用方法:
1.引入jquery.js
<script src="http://apps.bdimg.com/libs/jquery/1.4.4/jquery.min.js"></script>
2.引入slider.js
<script src="js/slider.js"></script>
3.加入css样式
<style> .entry { width: 675px; height: 213px; min-height: 0; margin: 50px auto; padding: 6px; background-color: #f4ecdf; border: #dbcdae solid 1px; position: relative; } #center { Z-INDEX: 2; rightright: 40%; } #slider { Z-INDEX: 1; POSITION: absolute; WIDTH: 675px; BACKGROUND: #000; HEIGHT: 213px; OVERFLOW: hidden; LEFT: 6px; } #slider .slide { Z-INDEX: 10; POSITION: absolute; BORDER-LEFT: #000 1px solid; WIDTH: 405px; BACKGROUND: #000; HEIGHT: 213px; OVERFLOW: hidden; CURSOR: default; LEFT: 22px } #slider .title { COLOR: #f80; FONT-SIZE: 1.2em; FONT-WEIGHT: bold; MARGIN-RIGHT: 1.5em; TEXT-DECORATION: none } #slider .text { POSITION: absolute; line-height:30px; TEXT-ALIGN: justify; WIDTH: 405px; FONT-FAMILY: verdana, arial, Helvetica, sans-serif; COLOR: #fff; FONT-SIZE: 0.9em; TOP: 100%; LEFT: 10px } #slider .backgroundText { height:30px; position:absolute; background:#000; FILTER: alpha(opacity=60); width:405px; opacity: 0.6;} #slider .diapo { POSITION: absolute; FILTER: alpha(opacity=100); VISIBILITY: visible; opacity: 1; width: 405px; height: 213px; } </style>
4.页面html代码
<div class="entry"> <div id="center"> <div id="slider"> <div class="slide" style="border-left: medium none;"><a href="javascript:;"><img border="0" src="http://cued.xunlei.com/demos/publ/img/P_011.jpg" class="diapo" style="opacity: 0.7; visibility: visible;"></a> <div class="text">"包装能手"的比拼拉启第二届詹氏技能比赛序幕</div> </div> <div class="slide"><a href="javascript:;"><img border="0" src="http://cued.xunlei.com/demos/publ/img/P_012.jpg" class="diapo" style="opacity: 0.7; visibility: visible;"></a> <div class="text">浓情端午 乐在粽中</div> </div> <div class="slide"><a href="javascript:;"><img border="0" src="http://cued.xunlei.com/demos/publ/img/P_013.jpg" class="diapo" style="opacity: 0.7; visibility: visible;"></a> <div class="text">比拼拉启第二届詹氏技能比赛序幕</div> </div> <div class="slide"><a href="javascript:;"><img border="0" src="http://cued.xunlei.com/demos/publ/img/P_014.jpg" class="diapo" style="opacity: 0.7; visibility: visible;"></a> <div class="text">"篮球!篮球!"</div> </div> <div class="slide"><a href="javascript:;"><img border="0" src="http://cued.xunlei.com/demos/publ/img/P_015.jpg" class="diapo" style="opacity: 0.7; visibility: visible;"></a> <div class="text">"我是快乐女人"—公司欢度"三八"节活动精彩纷呈</div> </div> </div> </div> </div> <script type="text/javascript"> /* ==== start script ==== */ slider.init(); </script>
转载请注明:Rockyxia Web技术博客 » 分享一个slider图片效果,类似flash的图片显示效果
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。