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. 一、java环境搭建

    结论: 1.jdk包括jre,jre包括jvm. 2.eclipse ide依赖环境变量.如果未设置,在启动eclipse工具会提示:返回码是13.

  2. 中型企业的IT运维策略

    如何建设一支能够解决问题.创造价值.有活力的.不断进取的IT运维团队,并带领这支团队?充分发挥这个团队的优势力量,是运维业务有效开展的关 键.运维策略是直接体现运维业务的经济价值所在.好的运维措施.方 ...

  3. iOS日常工作之常用宏定义大全

    前言: 在工作中, 很多小伙伴都会在PCH文件定义一些常用的宏,但是又怕写这些简单的宏浪费时间,又有时候忘记怎么定义了怎么办?本人在工作中也是如此.所以在这里给大家分享一些常用的宏定义,喜欢的小伙伴可 ...

  4. GZFramwork快速开发框架演练之会员系统(一)框架源码下载

    GZFramwork框架开发环境为.NET 4.0 (必须)   VS2013+SQL2005+DevExpress v13.2.8+FastReport (推荐)  数据库建模工具PowerDesi ...

  5. PHP工作原理

    文章一 :http://blog.csdn.net/21aspnet/article/details/6973405 简介 先看看下面这个过程: 我们从未手动开启过PHP的相关进程,它是随着Apach ...

  6. DevExpress中使用DocumentManager，并确保不重复

    https://www.devexpress.com/Support/Center/Question/Details/Q411356 void ActivatForm(Type someType) { ...

  7. request 获取各种路径

    从request获取各种路径总结 request.getRealPath("url"); // 虚拟目录映射为实际目录 request.getRealPath("./&q ...

  8. IDoc

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

  9. [SAP ABAP开发技术总结]选择屏幕——PARAMETERS

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

  10. 键盘unicode值对照表

    A:65 B:66 C:67 D:68 E:69 F:70 G:71 H:72 I:73 J:74 K:75 L:76 M:77 N:78 O:79 P:80 Q:81 R:82 S:83 T:84 ...