最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

分享一个slider图片效果,类似flash的图片显示效果

我的知识库 rockyxia 7321浏览 0评论

slider图片效果

分享一个近期项目遇到的一个js图片效果,类似flash的图片显示效果,看效果图:

slider效果

这也是一个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">"我是快乐女人"&mdash;公司欢度"三八"节活动精彩纷呈</div>  
                </div>  
            </div>  
        </div>  
    </div>  
    <script type="text/javascript">  
    /* ==== start script ==== */   
    slider.init();   
    </script>  

转载请注明:Rockyxia Web技术博客 » 分享一个slider图片效果,类似flash的图片显示效果
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。

(本篇完)