利用Jquery制作一个广告图片展示-附源码(VS2010版本)

最近看到国外一个电影周刊上有一个广告展示栏，做的很很不错很炫丽也觉得在国内见得多了，因为是其中用PHP没怎么看，我就打算在.NET下用Jquery来实现以下觉得应该不是问题，于是尝试用Jquery来实现,当然样式是自己写的不是很专业,没有原来版本炫丽,但总体的功能是实现了,先看看简单效果: 截图如下-

右边文字样式我没有美化,如果觉得效果难看完全在样式上下点功夫即可,废话少说，来看看具体实现步骤:

A.定义页面布局:及其简单页面布局,我主要注重功能实现,当然目前定义是四张图片,根据需要可以在布局页面自动调整.增减,

1 
2 < div id ="featured" >
3 
4     < ul class ="ui-tabs-nav" >
5          < li class ="ui-tabs-nav-item ui-tabs-selected" id ="nav-fragment-1" >< a href ="#fragment-1" >< img src ="images/image1-small.jpg" alt ="" />< span > 15+ Excellent High Speed Photographs </ span ></ a ></ li >
6          < li class ="ui-tabs-nav-item" id ="nav-fragment-2" >< a href ="#fragment-2" >< img src ="images/image2-small.jpg" alt ="" />< span > 20 Beautiful Long Exposure Photographs </ span ></ a ></ li >
7          < li class ="ui-tabs-nav-item" id ="nav-fragment-3" >< a href ="#fragment-3" >< img src ="images/image3-small.jpg" alt ="" />< span > 35 Amazing Logo Designs </ span ></ a ></ li >
8          < li class ="ui-tabs-nav-item" id ="nav-fragment-4" >< a href ="#fragment-4" >< img src ="images/image4-small.jpg" alt ="" />< span > Create a Vintage Photograph in Photoshop </ span ></ a ></ li >
9      </ ul >
10      
11      < div id ="fragment-1" class ="ui-tabs-panel" style ="" >
12          < img src ="images/image1.jpg" alt ="" />
13          < div class ="info" >
14          < h2 >< a href ="#" > 15+ Excellent High Speed Photographs </ a ></ h2 >
15          < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam.... < a href ="#" > read more </ a ></ p >
16         </ div >
17     </ div >
18      
19      < div id ="fragment-2" class ="ui-tabs-panel ui-tabs-hide" style ="" >
20          < img src ="images/image2.jpg" alt ="" />
21          < div class ="info" >
22          < h2 >< a href ="#" > 20 Beautiful Long Exposure Photographs </ a ></ h2 >
23          < p > Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit.... < a href ="#" > read more </ a ></ p >
24          </ div >
25      </ div >
26      
27      < div id ="fragment-3" class ="ui-tabs-panel ui-tabs-hide" style ="" >
28          < img src ="images/image3.jpg" alt ="" />
29          < div class ="info" >
30          < h2 >< a href ="#" > 35 Amazing Logo Designs </ a ></ h2 >
31          < p > liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare.... < a href ="#" > read more </ a ></ p >
32          </ div >
33      </ div >
34      
35      < div id ="fragment-4" class ="ui-tabs-panel ui-tabs-hide" style ="" >
36          < img src ="images/image4.jpg" alt ="" />
37          < div class ="info" >
38          < h2 >< a href ="#" > Create a Vintage Photograph in Photoshop </ a ></ h2 >
39          < p > Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales.... < a href ="#" > read more </ a ></ p >
40          </ div >
41      </ div >
42 </ div >

B:设定页面CSS样式:样式定义主要区域UI和每个Content的定义

代码

/* --首先定义整体DIV样式以及第一次展现是小图片样式-- */
#featured {
    width : 400px ;
    padding-right : 250px ;
    position : relative ;
    border : 5px solid #ccc ;
    height : 250px ;
    background : #fff ;
}
#featured ul.ui-tabs-nav {
    position : absolute ;
    top : 0 ; left : 400px ;
    list-style : none ;
    padding : 0 ; margin : 0 ;
    width : 250px ;
} #featured ul.ui-tabs-nav li {
    padding : 1px 0 ; padding-left : 13px ;
    font-size : 12px ;
    color : #666 ;
}
/* --定义图片和下面图片提示Span提示层现实样式透明显示-- */
#featured ul.ui-tabs-nav li img {
    float : left ; margin : 2px 5px ;
    background : #fff ;
    padding : 2px ;
    border : 1px solid #eee ;
}
#featured ul.ui-tabs-nav li span {
    font-size : 11px ; font-family : Verdana ;
    line-height : 18px ;
}

1 /* -- 在定义每次选择时切换图片显示样式和转换链接样式定义-- */
2 #featured li.ui-tabs-nav-item a {
3     display : block ;
4     height : 60px ;
5     color : #333 ;   background : #fff ;
6     line-height : 20px ;
7 }
8 #featured li.ui-tabs-nav-item a:hover {
9     background : #f2f2f2 ;
10 }
11 #featured li.ui-tabs-selected {
12     background : url('images/selected-item.gif') top left no-repeat ;
13 }
14 #featured ul.ui-tabs-nav li.ui-tabs-selected a {
15     background : #ccc ;
16 }
17 #featured .ui-tabs-panel {
18     width : 400px ; height : 250px ;
19     background : #999 ; position : relative ;
20 }
21 #featured .ui-tabs-panel .info {
22     position : absolute ;
23     top : 180px ; left : 0 ;
24     height : 70px ;
25     background : url('images/transparent-bg.png') ;
26 }
27 #featured .info h2 {
28     font-size : 18px ; font-family : Georgia, serif ;
29     color : #fff ; padding : 5px ; margin : 0 ;
30     overflow : hidden ;
31 }
32 #featured .info p {
33     margin : 0 5px ;
34     font-family : Verdana ; font-size : 11px ;
35     line-height : 15px ; color : #f0f0f0 ;
36 }
37 #featured .info a {
38     text-decoration : none ;
39     color : #fff ;
40 }
41 #featured .info a:hover {
42     text-decoration : underline ;
43 }
44 #featured .ui-tabs-hide {
45     display : none ;
46 }

C:Jquery来控制自动间隔间隔切换时间等,注意图片路径,代码如下: 及其简化一行代码即可实现:

1 < head runat ="server" >
2      < title > 站点首页广告栏Jquery制作效果演示DEMO </ title >
3      < meta content ="利用Jquery制作简单广告栏效果演示 DEMO" ></ meta >
4      < meta content ="Author:chenkai Date:2009年12月3日18:28:44" ></ meta >
5
6      
7      < script type ="text/javascript" src ="Scripts/jquery-1.3.2.min.js" ></ script >
8      < script type ="text/javascript" src ="Scripts/jquery-1.3.2.js" ></ script >
9
10      
11      < link rel ="stylesheet" type ="text/css" href ="CSS/style.css" />
12
13      
14      < script type ="text/javascript" >
15         $(document).ready( function () {
16             $( " #featured > ul " ).tabs({ fx: { opacity: " toggle " } }).tabs( " rotate " , 5000 , true );
17         });
18      </ script >
19
20 </ head >

即上三个简短步骤就完成这个效果制作, Jquery设定就是Ready事件定义切换时间为5000毫秒(5秒)，这个可以自定义.具体项目通过VS2010编码，提供一个纯HTML版本效果下载如下:

HTML版本效果下载地址:http://good.gd/307167.htm(如有疏漏或不能下载请提示我我回进一步修改)

秒客网

利用Jquery制作一个广告图片展示-附源码(VS2010版本)

相关文章