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. Yii2.0官方高级模板的目录结构分析

    Yii 是什么 Yii 是一个高性能,基于组件的 PHP 框架,用于快速开发现代 Web 应用程序.名字 Yii (读作 易)在中文里有"极致简单与不断演变"两重含义,也可看作 Y ...

  2. python多线程，多进程

    线程是公用内存,进程内存相互独立 python多线程只能是一个cpu,java可以将多个线程平均分配到其他cpu上 以核为单位,所以GIL(全局锁,保证线程安全,数据被安全读取)最小只能控制一个核,很 ...

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

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

  4. c语言中->的一个作用

    为了使用方便和直观,c语言中结构体指针带成员(*p).num可以用p->num来代替. ->称为指向运算符:

  5. updating the chroot

    Ubuntu may stop working after a Chrome OS update. If that's the case, update all the installed targe ...

  6. 分布式事务实现-Spanner

    Spanner要满足的external consistency 是指:后开始的事务一定可以看到先提交的事务的修改.所有事务的读写都加锁可以解决这个问题,缺点是性能较差.特别是对于一些workload中 ...

  7. iOS 最值宏定义

    NSIntegerMax.NSIntegerMin.NSUIntegerMax.MAXFLOAT

  8. Industry Engineer

    IE:有两种,一种是系统方面的,对全厂的物流设计,依据产量做人力估算,机台,设备,手工具的估算等,一种是配合产能提升做制造的改善,以及SOP(Standard Operation Procedure: ...

  9. C# 将字符串转为&#2345;这种的 html实体编码

    1.字符串转为html实体编码 private string GetHtmlEntities(string str) { string r = string.Empty; ; i < str.L ...

  10. libc.so.6重做链接，删除导致的缺失问题（后期需要深入研究），未能成功升级

    中间件启动,提示/lib64/libc.so.6版本过低,升级glibc后,修改临时环境变量,结果导致sgment fault错误,根据报错 ll /lib64/ |grep libc -rwxr-x ...