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. 【leetcode❤python】 223. Rectangle Area

    #-*- coding: UTF-8 -*-#先判断是否有重叠class Solution(object):    def computeArea(self, A, B, C, D, E, F, G, ...

  2. BZOJ 2768 冠军调查（最小割）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2768 题意:给出一个无向图,每个点有一个值0或者1.现在重新设置每个点的值0或者1.设重 ...

  3. Fragment 与 Fragment 相互传值

    方法: 1 接口回调 2 用一个单例类 3 bundle 4 获取fragment实例 , setter getter 传值

  4. iOS - OC 数据持久化

    1.Sandbox 沙箱 iOS 为每个应用提供了独立的文件空间,一个应用只能直接访问为本应用分配的文件目录,不可以访问其他目录,每个应用自己独立的访问空间被称为该应用的沙盒.也就是说,一个应用与文件 ...

  5. iOS - OC NSRange 范围

    前言 结构体,这个结构体用来表示事物的一个范围,通常是字符串里的字符范围或者集合里的元素范围. typedef struct _NSRange { NSUInteger location; // 表示 ...

  6. iOS - OC Foundation 框架

    前言 框架是由许多类.方法.函数和文档按照一定的逻辑组织起来的集合,以使研发程序更容易. Foundation 框架:为所有程序开发奠定基础的框架称为 Foundation 框架. Cocoa :是指 ...

  7. iOS - MPMoviePlayer 视频播放

    前言 MP_EXTERN_CLASS_AVAILABLE(3_2) NS_DEPRECATED_IOS(3_2, 9_0, "Use AVPlayerViewController in AV ...

  8. iOS - UIDatePicker

    前言 NS_CLASS_AVAILABLE_IOS(2_0) __TVOS_PROHIBITED @interface UIDatePicker : UIControl <NSCoding> ...

  9. Jquery中css()方法获取边框长度

    1. JQuery中可以使用css()方法获取块元素的边框宽度,如下: $("divMode").css("border-left-width");//左边框长 ...

  10. poj3334Connected Gheeves(二分）

    链接 二分高度,算面积的地方有点麻烦,没有用求交点的模板,直接自己按三角形相似手算了一下,写的有点麻烦. 上下界直接取水可放的最高点以及最低点. 自己的长得很挫的代码 #include <ios ...