迪恩网络 图片列表切换效果

admin

1. <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
   
2. <script type="text/javascript" src="jquery.SuperSlide.2.1.1.js"></script>
   
3. <link href="font-awesome.min.css" type="text/css" rel="stylesheet" />
   
4. <script type="text/javascript">
   
5.         var jq=jQuery.noConflict();
   
6. </script>
   
7. <style type="text/css">
   
8. /*deanlimitbuy*/        
   
9. .deanlimitbuy{ width:1180px; margin:30px auto; }
   
10.         .deantit{ height:40px; line-height:40px;}
    
11.                 .deantit span{ color:#333; font-size:26px; float:left;}
    
12.                 .deantit b{ padding-left: 10px; font-size: 20px; color: #d3d3d3; float:left; font-weight:normal;}
    
13.                 .deanfr{ float:right; margin-top:10px;}
    
14.                         .deanfr a.prev{ float:left; display:block; width:8px; height:13px; background:url(listl.png) 0 0 no-repeat;}
    
15.                         .deanfr a.next{ float:left; display:block; width:8px; height:13px; background:url(listr.png) 0 0 no-repeat;}
    
16.                         .deanfr ul{ float:left; margin-top:5px; margin-left:10px;}
    
17.                                 .deanfr ul li{ float:left; cursor:pointer; overflow:hidden; width:5px; height:5px; background:#aaa; border-radius:5px; margin-right:10px; text-indent:-999px;}
    
18.                                 .deanfr ul li.on{ background:#ff0c2e;}
    
19.         .deanlimitbuy .deanbd{ width: 1200px; height: 320px; margin-top:10px; overflow:hidden; }
    
20.                 .deanlimitbuy .deanbd ul{  width:1220px; height: 320px; position: relative; left: 0px; top: 0px;  }
    
21.                         .deanlimitbuy .deanbd ul li{ width: 278px; border:1px solid #f0f0f0; height: 318px; overflow:hidden; margin-right:18px; float: left; position:relative; }
    
22.                                 .deanbd ul li .deanmoveimg{ width:238px; height:238px; overflow:hidden; position:absolute; top:20px; left:20px;}
    
23.                                         .deanbd ul li .deanmoveimg img{ width:238px; height:238px;}
    
24.                                 .deanbd ul li span{ position:absolute; display:block; width:240px; bottom:50px; left:20px; text-align:center; height: 30px; line-height: 30px; font-size: 24px; font-weight:bold; color: #ff0c2e; margin-top:15px;}
    
25.                                 .deanbd ul li h3{ position:absolute; bottom:20px; left:20px; width:240px; font-weight:normal; display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis; height:35px; line-height:35px; font-size: 14px;color: #888; margin:0 auto;}
    
26.                                 .deanbd ul li a:hover h3{ color:#333;}
    
27. </style>
    
28. <div class="deanlimitbuy">
    
29.     <div class="deantit">
    
30.         <span>热销排行/品牌特卖</span><b>SALE</b>
    
31.         <div class="deanfr">
    
32.             <a href="javascript:;" class="prev"></a>
    
33.             <ul><li class="on">1</li></ul>
    
34.             <a href="javascript:;" class="next"></a>
    
35.         </div>
    
36.         <div class="clear"></div>
    
37.     </div>
    
38.     <div class="clear"></div>
    
39.     <!--[diy=deanbd]--><div id="deanbd" class="area"></div><!--[/diy]-->
    
40.    
    
41. </div>
    
42. 
    
43. <script type="text/javascript">
    
44.     /*jq(function() {
    
45.         jQuery(".fullSlide").slide({ titCell:".hd ul", mainCell:".bd ul", effect:"fold",  autoPlay:true, autoPage:true, trigger:"mouseover" });
    
46.     })*/
    
47.     jq(function() {
    
48.         jq(".deanlimitbuy").slide({titCell:".deantit ul",mainCell:".deanbd ul",autoPage:true,effect:"leftLoop",autoPlay:true,scroll:4,vis:4,easing:"easeOutCirc",delayTime:"800",interTime:"4500"});
    
49.     })
    
50. </script>

复制代码

1. <div class="deanbd">
   
2. <ul>
   
3. [loop]
   
4. <li>
   
5.                     <a href="{url}" target="_blank">
   
6.                         <div class="deanmoveimg"><img src="{pic}" width="{picwidth}" height="{picheight}" /></div>
   
7.                         <div class="clear"></div>
   
8.                         <h3>{title}</h3>
   
9.                     </a>
   
10.                 </li>
    
11. 
    
12. [/loop]
    
13. </ul>
    
14.         </div>
    

复制代码