栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

Js图片点击切换轮播实现代码

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Js图片点击切换轮播实现代码

图片点击切换



   
    
    
    
    
      *{
 padding: 0;
 margin:0;
      }
      .outer{
 width:640px;
 height:453px;
 margin:100px auto;
 
 text-align: center;
      }
      
    
  
  
    
      

实现效果

轮播



  
    
    
    
      *{
 padding:0px;
 margin: 0px;
      }
      
      #outer{
 position: relative;
 width:660px;
 height:425px;
 margin:50px auto ;
 background:yellow;
 padding:10px 0;
 overflow: hidden;
      }
      #imglist{
 position: absolute;
 list-style: none;
 
 left:0px;

      }
      #imglist li{
 margin: 0 10px;
 float:left;
      }
      
      #navDiv{
 position: absolute;
 bottom: 15px;
 
 left:0;
 
      }
      #navDiv a{
 float:left;
 width:20px;
 height:20px;
 background:#ff1;
 opacity: 0.5;
 
 filter:alpha(opacity=50);
 margin: 0 5px;
      }
      #navDiv a:hover{
 background:red;
      }