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)的更多相关文章

  1. jQuery之制作简单的轮播图效果

    [源代码] 链接:https://pan.baidu.com/s/1XpZ66D9fmSwWX3pCnGBqjA 密码:w104 [整体构思] 这个轮播图使用的是jQuery,所以Js的整体代量比较少 ...

  2. 用纯css、JavaScript、jQuery简单的轮播图

    完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为  img ...

  3. JQuery手写一个简单的轮播图

    做出来的样式: 没有切图,就随便找了一些图片来实现效果,那几个小星星萌不萌. 这个轮播图最主要的部分是animate(),可以先熟悉下这个方法. 代码我放到了github上,链接:https://gi ...

  4. JS框架_(Bootstrap.js)实现简单的轮播图

    Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...

  5. <day006>bootstrap的简单学习 + 轮播图

    任务1:bootstrap的简单学习 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c ...

  6. 原生js实现一个简单的轮播图

    想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...

  7. 轮播图jQuery

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 基于JQ的简单左右轮播图

    // 轮播图 主要实现思想: a.第一层div,设置overflow为hidden. b.里面是一个ul,每个li里面有个img或者为每个li设置背景图片也可以. c.li设置为左浮动,排成一行,还有 ...

  9. 原生js用div实现简单的轮播图

    文章地址 https://www.cnblogs.com/sandraryan/ 原生js实现轮播图. 打开页面图片自动轮播,点击prev next按钮切换到上/下一张图片,点击1-5切换到对应图片. ...

随机推荐

  1. BZOJ 2436 Noi嘉年华（优化DP）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2436 题意:有一些活动,起始时间持续时间已知.有两个场地.每个活动最多只能在一个场地举行 ...

  2. Android-表格布局 计算器 修改版

    <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android=" ...

  3. Mysql 中 text类型和 blog类型的异同

    MySQL存在text和blob: (1)相同 在TEXT或BLOB列的存储或检索过程中,不存在大小写转换,当未运行在严格模式时,如果你为BLOB或TEXT列分配一个超过该列类型的最大长度的值值,值被 ...

  4. FreeSWITCH第三方库（音频）的简单介绍（一）

    FreeSWITCH使用了大量的第三方库,本文档主要介绍音频相关库的信息: 视频相关库的信息介绍参考:http://www.cnblogs.com/yoyotl/p/5488890.html 其他相关 ...

  5. ALV详解：Function ALV（二）

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  6. 读Effective Java笔记之one：static Factory methods instead of Constructors （静态工厂方与构造器）

    获取类的实例的方法有很多种,在这很多种方法中,它们各有优缺,各有特点.这里,只介绍2中方法 1.使用构造方法 public class Person { private String sex; /** ...

  7. Android Studio常见问题 -- AndroidManifest.xml 覆盖问题

    问题如下 D:\source-code\AndroidStudio\MyApplication\app\src\main\AndroidManifest.xmlError:(14, 9) Attrib ...

  8. iOS - UIButton

    前言 NS_CLASS_AVAILABLE_IOS(2_0) @interface UIButton : UIControl <NSCoding> @available(iOS 2.0, ...

  9. Android广播BroadcastReceiver 一

    Android 系统里定义了各种各样的广播,如电池的使用状态,电话的接收和短信的接收,开机启动都会产生一个广播.当然用户也可以自定义自己的广播. 既然说到广播,那么必定有一个广播发送者,以及广播接收器 ...

  10. nginx的location root 指令

    原文:http://blog.csdn.net/bjash/article/details/8596538 location /img/ { alias /var/www/image/; } #若按照 ...