合云吧»论坛 程序代码 代码更新 程序完善 迪恩网络 图片列表切换效果
返回列表 发新帖
查看: 745|回复: 0

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

[复制链接]

267

主题

-3

回帖

1646

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1646
发表于 2020-6-11 18:03:52 | 显示全部楼层 |阅读模式





  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. <script type="text/javascript">
  43.     /*jq(function() {
  44.         jQuery(".fullSlide").slide({ titCell:".hd ul", mainCell:".bd ul", effect:"fold",  autoPlay:true, autoPage:true, trigger:"mouseover" });
  45.     })*/
  46.     jq(function() {
  47.         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"});
  48.     })
  49. </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. [/loop]
  12. </ul>
  13.         </div>
复制代码



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

返回列表 发新帖
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

CopyRight 2018-2019 河南合云网络科技有限公司 版权所有 豫ICP备19004330号-1营业执照
快速回复 返回列表