zoukankan      html  css  js  c++  java
  • 利用transform制作幻灯片

    html代码

    <html>
    <head></head>
    <body>
    <
    div class='hpic'> <ul style="position: relative; 100%; transform: translate3d(0px, 0px, 0px);"> <li><a href="#"><img src="p1.png"></a></li> <li class='tranl' style="left: 100%;"><a href="#"><img src="p2.png"></a></li> <li class='tranl' style="left: 200%;"><a href="#"><img src="p3.png"></a></li> <li class='tranl' style="left: 300%;"><a href="#"><img src="p4.png"></a></li> </ul> <span class="indicator"> <i class="active"></i> <i class=""></i> <i class=""></i> <i class=""></i> </span> </div>
    </body>
    </html>

    css代码

    .hpic{height: auto;overflow: hidden;position: relative;}
    .hpic .tranl{position: absolute; width: 100%; top: 0px; }
    .hpic img{width: 100%;}
    .hpic .indicator {position: absolute;left: 50%;bottom: 2px;line-height: 0;padding: 2px 3px 2px 8px;border-radius: 5px;background: rgba(0,0,0,.3);}
    .hpic .indicator i {width: 6px;height: 6px;display: inline-block; border-radius: 50%;background: #fff; margin-right: 5px;}
    .hpic .indicator .active{background-color: #f60;}

    js代码

      //首页幻灯片轮播
      var hpic = $('.hpic');
      var hpic_num = hpic.find('li').length;
      var hpic_index = 0;

    setInterval(function(){
            if(hpic_index>hpic_num-1){
                hpic_index = 0;
            }
            hpic.find('ul').css('transform','translate3d(-'+ 100*hpic_index +'%, 0px, 0px)');
            hpic.find('ul').css('transition','-webkit-transform 0.3s ease 0s');
            hpic.find('i').removeClass('active');
            hpic.find('i').eq(hpic_index).addClass('active');
            hpic_index ++ ;
    },4000);
  • 相关阅读:
    eclipse常用快捷键
    Sql server 问题诊断
    Oracle 表格大小分析
    VM虚拟机增加磁盘空间
    Linux搭建Nexus+Maven私人仓库
    Linux 下安装Git 版本管理工具 使用记录
    Jenkins 环境打建设 Linux
    Oracle 数据库用户表大小分析
    Windgb 其他常用命令
    Windbg 查内存占用
  • 原文地址:https://www.cnblogs.com/xiaozong/p/5071284.html
Copyright © 2011-2022 走看看