html代码

<html>
<head></head>
<body>
<div class='hpic'>

        <ul style="position: relative; width: 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:;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);

利用transform制作幻灯片的更多相关文章

  1. 利用jquery制作滚动到指定位置触发动画

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>利用 ...

  2. 利用CSS制作图形效果

    前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧   以下所有内容只使用一个HTML元素.任何类型 ...

  3. 利用TabHost制作QQ客户端标签栏效果（低版本QQ）

    学习一定要从基础学起,只有有一个好的基础,我们才会变得更加的perfect 下面小编将利用TabHost制作QQ客户端标签栏效果(这个版本的QQ是在前几年发布的)…. 首先我们看一下效果: 看到这个界 ...

  4. 使用Markdown+Pandoc+LaTex+Beamer制作幻灯片

    概述 为什么使用markdown? mardown是一种轻量级的标记语言,语法简单,可读性好,并且容易转化成其他格式的文档, 在技术文档撰写中得到越来越广泛的应用.相信大家对markdown都有一定了 ...

  5. 利用zxing制作彩色，高容错，支持中文等UTF编码的QR二维码图片

    利用zxing制作彩色,高容错,支持中文等UTF编码的QR二维码图片.代码如下 import java.awt.Color;import java.io.File;import java.util.H ...

  6. C#利用API制作类似QQ一样的右下角弹出窗体

    C#利用API制作类似QQ一样的右下角弹出窗体 (2009-03-21 15:02:49) 转载▼ 标签: 杂谈 分类: .NET using System;using System.Collecti ...

  7. 【百度地图API】如何利用PhoneGap制作地图APP

    原文:[百度地图API]如何利用PhoneGap制作地图APP 摘要:百度地图API是一套由javascript编写的地图程序接口,按说它应该运行在浏览器上.现在,只要利用PhoneGap,我们就能开 ...

  8. 利用CSS3制作淡入淡出动画效果

    CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...

  9. 【203】利用UltraISO制作和刻录光盘映像的方法

    参考:利用UltraISO制作和刻录光盘映像的方法 软件:UltraISO注册版(制作镜像).rar 目录: 1.利用UltraISO制作光盘映像2.利用UltraISO刻录光盘映像文件 1.利用Ul ...

随机推荐

  1. Bourn Again Shell编程

    shell既是命令解释程序,又是一种高级程序设计语言.shell是解释型语言. bash脚本的建立和运行: 注释行以#开头 #!后面的参数告诉系统执行本文件的程序 执行脚本文件有两种方法: 1.   ...

  2. VBS调用系统API

    如Beep的API声明为 Public Declare Function Beep Lib “kernel32″ Alias “Beep” (ByVal dwFreq As Long, ByVal d ...

  3. EDD-SPT综合规则

    关于生产运作的计算题· 很急 谢谢·有7项任务需经某设备加工,各任务资料如下.要求:(1)试用EDD-SPT综合规则确定加工顺序(2)分别计算两种规则下的平均流程时间. 任务 J1 J2 J3 J4 ...

  4. RESTful架构3--开发实战

    转自:REST服务开发实战 如果要说什么是REST的话,那最好先从Web(万维网)说起. 什么是Web呢?读者可以查看维基百科的词条(http://zh.wikipedia.org/zh-cn/Web ...

  5. /etc/fstab 文件解释

    /etc/fstab 文件解释 文件fstab包含了你的电脑上的存储设备及其文件系统的信息.它是决定一个硬盘(分区)被怎样使用或者说整合到整个系统中的唯一文件. 这个文件的全路径是/etc/fstab ...

  6. 括号匹配（C++ Stack）

    最近在学习C++,所以使用stack容器来实现括号匹配 /**********************************************************/ stack<Ty ...

  7. Centos7下安装numpy+matplotlib+scipy

    摘自:http://litchiware.github.io/centos/2015/07/05/centos7%E4%B8%8B%E5%AE%89%E8%A3%85numpy+matplotlib+ ...

  8. 手机端的META你知道多少？

    一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equ ...

  9. 开始制作国产的 scratch

    首先分析下API和数据格式: https://api.scratch.mit.edu/proxy/featured  GET   23.235.37.162:443 返回数据与对应栏目: commun ...

  10. Nginx 和 IIS 实现动静分离【转载】

    前段时间,搞Nginx+IIS的负载均衡,想了解的朋友,可以看这篇文章:<nginx 和 IIS 实现负载均衡>,然后也就顺便研究了Nginx + IIS 实现动静分离.所以,一起总结出来 ...