最最最简单的轮播图(JQuery)
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<script src="js/jquery-3.1.0.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
<script src="js/main.js"></script>
</html>
css:
* {
margin:;
padding:;
list-style: none;
}
#showBox {
width: 500px;
height: 400px;
background: coral;
overflow: hidden;
}
#box {
width: 400%;
height: 100%;
overflow: hidden;
transition: all 2s;
-webkit-transition: all 2s;
}
.boxLi {
float: left;
width: 500px;
height: 100%;
}
js:
$(function () {
var colors = ["red", "blue", "green", "yellow"];
//布局
function layout() {
var showBox = $("<div></div>").attr("id", "showBox");
$("body").append(showBox);
var box = $("<ul></ul>").attr("id", "box");
showBox.append(box);
for (var i = 0; i < colors.length; i++) {
var oli = $("<li></li>").addClass("boxLi");
oli.css({
background: colors[i]
});
box.append(oli);
}
}
//动起来
function move() {
var index = 1;
var page = 1;
function start() {
$("#box").css({transform: "translateX(" + -500 * index + "px)"});
index += page;
if (index >= colors.length - 1) {
page = -page;
} else if (index <= 0) {
page = -page;
}
}
setInterval(function () {
start();
}, 5000);
}
function init() {
layout();
move();
}
init();
});
最最最简单的轮播图(JQuery)的更多相关文章
- jQuery之制作简单的轮播图效果
[源代码] 链接:https://pan.baidu.com/s/1XpZ66D9fmSwWX3pCnGBqjA 密码:w104 [整体构思] 这个轮播图使用的是jQuery,所以Js的整体代量比较少 ...
- 用纯css、JavaScript、jQuery简单的轮播图
完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为 img ...
- JQuery手写一个简单的轮播图
做出来的样式: 没有切图,就随便找了一些图片来实现效果,那几个小星星萌不萌. 这个轮播图最主要的部分是animate(),可以先熟悉下这个方法. 代码我放到了github上,链接:https://gi ...
- JS框架_(Bootstrap.js)实现简单的轮播图
Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...
- <day006>bootstrap的简单学习 + 轮播图
任务1:bootstrap的简单学习 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c ...
- 原生js实现一个简单的轮播图
想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...
- 轮播图jQuery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 基于JQ的简单左右轮播图
// 轮播图 主要实现思想: a.第一层div,设置overflow为hidden. b.里面是一个ul,每个li里面有个img或者为每个li设置背景图片也可以. c.li设置为左浮动,排成一行,还有 ...
- 原生js用div实现简单的轮播图
文章地址 https://www.cnblogs.com/sandraryan/ 原生js实现轮播图. 打开页面图片自动轮播,点击prev next按钮切换到上/下一张图片,点击1-5切换到对应图片. ...
随机推荐
- VC++实现在系统托盘来新消息闪烁，鼠标悬停显示窗口
转载:http://www.codeguru.com/cpp/com-tech/activex/tutorials/article.php/c8115/How-to-Implement-a-Mouse ...
- Ubuntu Linux 下文件名乱码（无效的编码）的快速解决办法
文件是在WIndows 下创建的,Windows 的文件名中文编码默认为GBK,而Linux中默认文件名编码为UTF8,由于编码不一致所以导致了文件名乱码的问题,解决这个问题需要对文件名进行转码.文件 ...
- [HDOJ5952]Counting Cliques（DFS，剪枝）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5952 题意:求图中规模为s的团的个数. DFS+剪枝,姿势不好很容易TLE啊. #include &l ...
- [HDOJ1016]Prime Ring Problem
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1016 原题: A ring is compose of n circles as shown in d ...
- PE结构笔记
提示:前面加*为必须背下来的 DOS头: typedef struct _IMAGE_DOS_HEADER { // DOS .EXE header WORD e_magic; //* Magic n ...
- Codeforces Round #257 (Div. 2) B
B. Jzzhu and Sequences time limit per test 1 second memory limit per test 256 megabytes input standa ...
- 即时定位与地图构建SLAM(Simultaneous Localization and Mapping)
SLAM 即时定位与地图构建SLAM(Simultaneous Localization and Mapping) 参考链接: 视觉SLAM漫谈,http://www.cnblogs.com/gaox ...
- .NET中的三种接口实现方式
摘自:http://www.cnblogs.com/zhangronghua/archive/2009/11/25/1610713.html 一般来说.NET提供了三种不同的接口实现方式,分别为隐式接 ...
- 利用CGLib实现动态代理实现Spring的AOP
当我们用Proxy 实现Spring的AOP的时候, 我们的代理类必须实现了委托类的接口才能实现. 而如果代理类没有实现委托类的接口怎么办? 那么我们就可以通过CGLib来实现 package cn. ...
- 使jQuqer更高效的方法
讨论 jQuery 和 javascript 性能的文章并不罕见.然而,本文我计划总结一些速度方面的技巧和我本人的一些建议,来提升你的 jQuery 和 javascript 代码.好的代码会带来速度 ...