利用transform制作幻灯片
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制作幻灯片的更多相关文章
- 利用jquery制作滚动到指定位置触发动画
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>利用 ...
- 利用CSS制作图形效果
前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧 以下所有内容只使用一个HTML元素.任何类型 ...
- 利用TabHost制作QQ客户端标签栏效果(低版本QQ)
学习一定要从基础学起,只有有一个好的基础,我们才会变得更加的perfect 下面小编将利用TabHost制作QQ客户端标签栏效果(这个版本的QQ是在前几年发布的)…. 首先我们看一下效果: 看到这个界 ...
- 使用Markdown+Pandoc+LaTex+Beamer制作幻灯片
概述 为什么使用markdown? mardown是一种轻量级的标记语言,语法简单,可读性好,并且容易转化成其他格式的文档, 在技术文档撰写中得到越来越广泛的应用.相信大家对markdown都有一定了 ...
- 利用zxing制作彩色,高容错,支持中文等UTF编码的QR二维码图片
利用zxing制作彩色,高容错,支持中文等UTF编码的QR二维码图片.代码如下 import java.awt.Color;import java.io.File;import java.util.H ...
- C#利用API制作类似QQ一样的右下角弹出窗体
C#利用API制作类似QQ一样的右下角弹出窗体 (2009-03-21 15:02:49) 转载▼ 标签: 杂谈 分类: .NET using System;using System.Collecti ...
- 【百度地图API】如何利用PhoneGap制作地图APP
原文:[百度地图API]如何利用PhoneGap制作地图APP 摘要:百度地图API是一套由javascript编写的地图程序接口,按说它应该运行在浏览器上.现在,只要利用PhoneGap,我们就能开 ...
- 利用CSS3制作淡入淡出动画效果
CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...
- 【203】利用UltraISO制作和刻录光盘映像的方法
参考:利用UltraISO制作和刻录光盘映像的方法 软件:UltraISO注册版(制作镜像).rar 目录: 1.利用UltraISO制作光盘映像2.利用UltraISO刻录光盘映像文件 1.利用Ul ...
随机推荐
- sql注入绕过union select过滤
# # # #WAF Bypassing Strings: /*!%55NiOn*/ /*!%53eLEct*/ ,,)-- - +union+distinct+select+ +union+dist ...
- PMP培训感想
终于等到了C打头的邮件,等了几个星期,悬着的心终于放了.1P4M,基本跟平时模块成绩一致.当初模考时,第一次考了126,还算比较满意,毕竟还没开始苦逼看嘛,悲剧的是不管后面再怎么努力,成绩始终在1 ...
- 河南多校联合训练 南阳理工 1261 音痴又音痴的LT
描述 LT最近一直在无限循环薛之谦的歌,简直都中毒了!可是呢…他的歌LT还是不会唱(其实不止他的歌LT不会唱,所有人的歌LT都不会唱…因为LT是标准的音痴)可是LT又很喜欢唱歌(所以LT不仅是音痴还是 ...
- 基于hadoop的图书推荐
根据在炼数成金上的学习,将部分代码总结一下在需要的时候可以多加温习.首先根据原理作简要分析.一般推荐系统使用的协同过滤推荐模型:分别是基于ItemCF的推荐模型或者是基于UserCF的推荐模型:首先分 ...
- 第三十二节,datetime时间模块
首先要引入import datetime时间模块 datetime.date.today()模块函数 功能:输出系统年月日输出格式 2016-01-26[无参] 使用方法:datetime.date. ...
- 其他应用和技巧-用Json格式来保存数据
-------------------- <script type="text/javascript"> //定义json变量 ...
- subversion SVN global ignore pattern
*.o *.lo *.la *.al .libs *.so *.so.[0-9]* *.a *.pyc *.pyo *.rej *~ #*# .#* .*.swp .DS_Store */bin */ ...
- 查询MySQL中某个数据库中有多少张表
SELECT COUNT(*) TABLES, table_schema FROM information_schema.TABLES WHERE table_schema = '数据库' GRO ...
- Ckeditor配置
配置参考文档,主要将ckeditor中的(adapters.images.lang.plugins.skins.themes.ckeditor.js.config.js.contents.css)解压 ...
- 移植WL18XX到高通的时候,会出现几个.KO文件没有编译出来的情况
1.检查kernel的.config文件,看是否有CONFIG又恢复了.这个时候就要需找依赖.把依赖使能 2.然后再去驱动源码检查 KCONFIG 的依赖,使能改使能的配置就可以了.