• JS


    下载地址:http://www.lanrentuku.com/js/jiaodiantu-1076.html

    修改焦点图:

    CSS代码:

    /* 懒人图库 搜集整理 www.lanrentuku.com */
     
    /*焦点图*/
     
     
    /*-------------------------------此处修改整体的大小(960px; height:500px;)-----------------------------------*/
    .focus{ position:relative; 960px; height:500px; background-color: #000; float: left;} 
    .focus img{  960px; height: 500px;}
    /*------------------------------------------------------------------------------------------------------------------*/
     
     
     
    .focus .shadow .title{ 260px; height: 65px;padding-left: 30px;padding-top: 20px;}
    .focus .shadow .title a{ text-decoration:none; color:#fff; font-size:14px; font-weight:bolder; overflow:hidden; }
    .focus .btn{ position:absolute; bottom:34px; left:510px; overflow:hidden; zoom:1;}
    .focus .btn a{position:relative; display:inline; 13px; height:13px; border-radius:7px; margin:0 5px;color:#B0B0B0;font:12px/15px "5B8B4F53"; text-decoration:none; text-align:center; outline:0; float:left; background:#D9D9D9; } 
    .focus .btn a:hover,.focus .btn a.current{  cursor:pointer;background:#fc114a;} 
    .focus .fPic{ position:absolute; left:0px; top:0px; } 
    .focus .D1fBt{ overflow:hidden; zoom:1;  height:16px; z-index:10;  } 
     
     
     
    /*--------------------------------此处修改标题阴影(height:50px; line-height:50px;)---------------------------------*/
    .focus .shadow{ 100%; position:absolute; bottom:0; left:0px; z-index:10; height:50px; line-height:50px; background:rgba(0,0,0,0.6);   
    /*------------------------------------------------------------------------------------------------------------------*/
         
         
         
         
         
    filter:progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = '#80000000',endColorstr = '#80000000' 9;  display:block;  text-align:left; } 
    
    
    
    /*--------------------------------此处修改底部文字的大小(font-size:20px)----------------------------------------*/
    .focus .shadow a{ text-decoration:none; color:#fff; font-size:20px; overflow:hidden; margin-left:10px; font-family: "5FAE8F6F96C59ED1";} 
    /*------------------------------------------------------------------------------------------------------------------*/
    
    
    .focus .fcon{ position:relative; 100%; float:left;  display:none; background:#000  } 
    .focus .fcon img{ display:block; } 
    .focus .fbg{bottom:25px; right:40px; position:absolute; height:21px; text-align:center; z-index: 200; } 
     
     
     
    /*--------------------------------此处修改底部阴影上的按钮高度(margin:4px)----------------------------------------*/
    .focus .fbg div{margin:4px auto 0;overflow:hidden;zoom:1;height:14px}
    /*-----------------------------------------------------------------------------------------------------------*/   
     
     
     
     
      
    /*--------------------------------此处修改底部小圆点的大小(12px; height:12px;)----------------------------------------*/
    .focus .D1fBt a{position:relative; display:inline; 12px; height:12px; border-radius:7px; margin:0 5px;color:#B0B0B0;font:12px/15px "5B8B4F53"; text-decoration:none; text-align:center; outline:0; float:left; background:#D9D9D9; }   
    /*-----------------------------------------------------------------------------------------------------------*/   
    
    .focus .D1fBt .current,.focus .D1fBt a:hover{background:#fc114a;}   
    .focus .D1fBt img{display:none}   
    .focus .D1fBt i{display:none; font-style:normal; }   
    .focus .prev,.focus .next{position:absolute;40px;height:74px;background: url(../images/focus_btn.png) no-repeat;}
    .focus .prev{top: 50%;margin-top: -37px; left: 0;background-position:0 -74px; cursor:pointer; } 
    .focus .next{top: 50%;margin-top: -37px; right: 0;  background-position:-40px -74px;  cursor:pointer;} 
    .focus .prev:hover{  background-position:0 0; } 
    .focus .next:hover{  background-position:-40px 0;} 
    

      

  • 相关阅读:
    jQuery 入门 -- 事件 事件绑定与事件委托
    原生js实现视差风格音乐播放器
    jQuery 入门
    一些开放的免费接口【已失效】
    php mysqli操作数据库
    DOM 相关
    面向对象
    对象
    博客园添加鼠标点击特效
    正则表达式
  • 原文地址:https://www.cnblogs.com/KTblog/p/4713600.html
Copyright © 2020-2023  润新知