js实现京东轮播图效果

本文实例为大家分享了js实现京东轮播图效果的具体代码，供大家参考，具体内容如下

  
  
  
    body,ul,li{padding:0;margin:0;}
    li{list-style-type:none;}
    .wrap{
      position:relative;
      width:480px;
      height:260px;
      margin:100px auto;
    }
    .wrap>ul>li{position:absolute;display:none;}
    
    .wrap img{width:480px;height:260px;}
    .wrap li:first-child{display:block;}
    .arrow{
      width:480px;
      height:60px;
      position:absolute;
      top:50%;
      margin-top:-30px;
      display:none;
    }
    .arrow>span{
      font-size:24pt;
      line-height:60px;
      display:inline-block;
      width:36px;
      background-color:#CEE5E8;
      text-align:center;
      cursor:pointer;
      opacity:0.5;
      border-radius:5px;
      -webkit-border-radius:5px;
      -moz-border-radius:5px;
      color:black;
    }
    .wrap:hover .arrow{
      display:block;
    }
    .arrow>span:last-child{
      float:right;
    }
  



  
  

    

      
 
      
    
    

      
 
      
    
    

      
 
      
    
    

      
 
      
    
  
  
  
    <
    >
  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。