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. 8636 跳格子（dfs+记忆化搜索）

    8636 跳格子 该题有题解 时间限制:2457MS  内存限制:1000K提交次数:139 通过次数:46 题型: 编程题   语言: G++;GCC Description 地上有一个n*m 的数 ...

  2. 使用Common.Logging与log4net的组件版本兼容问题

    引用:  http://www.cnblogs.com/shijun/p/3713830.html 近期使用了Common.Logging的ILog接口做日志接口,同时利用其log4net适配器与lo ...

  3. MFC实现登录对话框连接access数据库方式

    编写一个简单的登录对话框 大家好,我们利用MFC编写一个简单的登录对话框.主窗体是单文档界面.程序运行的时候,先弹出一个简单的登录对话框,输入用户名和密码后主窗体显示出来. 1.开打VC++6.0.点 ...

  4. thinkphp的目录结构设计经验总结1

    ---恢复内容开始--- 用thinkphp开发了好些项目了:最近准备抽空写一些经验总结: 希望能给刚开始接触tp的童鞋们提供一些开发的方案:少走一些弯路:少踩一些坑: 这些绝对都是些精华干货:耐着性 ...

  5. what a malloc has to do

    1) Allocate a chunk of memory big enough to satisfy the request, and return a pointer to it.2) Remem ...

  6. implement a system call in minix

    http://www.papervisions.com/implementing-system-call-in-minix-os/

  7. asp.net textbox控件readonly为true时，后台取值的问题

    如题,在后台通过textbox.Text方式取值为空,不论你默认值是否是空,如想要获得,需通过request.Form[""]的方式.

  8. Qt::ConnectionType（信号与槽的传递方式）

    Qt::AutoConnection 自动连接:(默认值)如果信号在接收者所依附的线程内发射,则等同于直接连接.如果发射信号的线程和接受者所依附的线程不同,则等同于队列连接. Qt::DirectCo ...

  9. SQL　列拆分

    with CTE as( SELECT A.id, B.value FROM( SELECT id, value = CONVERT(xml,'<root><v>' + REP ...

  10. gnome3

    http://askubuntu.com/questions/67753/how-do-i-add-an-application-to-the-dash https://wiki.gnome.org/ ...