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. bug--Unable to add window –token is not valid; is your activity running?

    错误原因是Dialog在show的时候必须要有一个activity作为窗口载体,上面的日志的意思是承载Dialog的activity已经被销毁了,不存在了 解决方法: 1.粗暴一点直接try catc ...

  2. 腾讯微博OAuthV2认证实现第三方登录

    1)添加相关jar包: httpmime.jar 以下信息是必须的 //!!!请根据您的实际情况修改!!! 认证成功后浏览器会被重定向到这个url中 必须与注册时填写的一致 private Strin ...

  3. ios导航栏又按钮添加图片后使其保持原色

    UIBarButtonItem *rightBarItem = [[UIBarButtonItem alloc] initWithTitle:nil style:UIBarButtonItemStyl ...

  4. 数据查找之80-20原则的JavaScript代码实现

    作为前端开发人员,无论在工作还是找工作(笔试/面试),或多或少会涉及一些数据结构的知识. 数据结构即计算机存储和组织数据的方式. 常用的结构:数组.栈.队列.链表.树.图.堆和散列表 关于数据,我们常 ...

  5. Chapter 2 Open Book——16

    By Friday I was perfectly comfortable entering my Biology class, nolonger worried that Edward would ...

  6. hdu_4714_Tree2cycle(树形DP)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=4714 题意:给你N个点N-1条边,形成一个树,让你拆树,并连接成一个环,每拆一次,连接一次,消耗1,问 ...

  7. .Net 读取xml

    一.常规方法 1.知识介绍 //初始化一个xml对象 XmlDocument xml = new XmlDocument(); //加载xml文件 xml.Load("文件路径") ...

  8. 网络请求 get post

    1.新建一个网络请求工具类,负责整个项目中所有的Http网络请求 提示:同步请求会卡住线程,发送网络请求应该使用异步请求(这意味着类方法不能有返回值) 2.工具类的实现 YYHttpTool.h文件 ...

  9. CATransform3D的使用以及各个参数的含义

    1. 缩放 CABasicAnimation *theAnimation=[CABasicAnimation animationWithKeyPath:@"transform"]; ...

  10. liunx 内存文件 tmpfs

    tmpfs是Linux/Unix系统上的一种基于内存的文件系统.tmpfs可以使用您的内存或swap分区来存储文件 1 创建将被挂载的文件 mkdir /tmp/tmpfs/ 2 写入测试文件内容.大 ...