// 轮播图

主要实现思想:

  a.第一层div,设置overflow为hidden。

  b.里面是一个ul,每个li里面有个img或者为每个li设置背景图片也可以。

  c.li设置为左浮动,排成一行,还有ul的宽度设置成li宽度的总和,不然li会换行!

  d.点击向右按钮:

    (1)让整个ul向左滑动,margin-left的滑动距离为为负的li宽度;

    (2)把第一个li放到ul里的最后位置;

    (3)设置ul的margin-left为0px;

    Tips:以上步骤必须放到ul向左滑动动画的回调函数里面。

  e.点击向左按钮:

    (1)先把ul的margin-left的距离设置为负的li宽度;

    (2)把最后一个li放到ul里的第一个位置;

    (3)设置ul的margin-left为0px(此步骤需写在animate动画函数中)。

具体例子:

  CSS代码:  

  

  * {
    margin:;
    padding:;
  }
  ul {
    list-style: none;
  }   .list {
    width: 1000px;
    padding: 10px;
    overflow: hidden;
    margin: 100px auto;
    border: 1px solid;
  }
  .list-cont {
    display: inline-block;
    width: 1350px;
  }
  .list-cont li {
    width: 200px;
    height: 180px;
    float: left;
    border: 1px solid;
    text-align: center;
    line-height: 180px;
    font-size: 24px;
    margin-right: 5px;
  }
  .btn {
    display: table;
    margin: 10px auto;
    border: 1px solid;
    padding: 5px 10px;
    cursor: pointer;
  }
  .btn:hover {
    background-color: #ccc;
  }

  HTML代码:

  

  <div class="list">
    <ul class="list-cont">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
    <button class="btn scroll-left">向左滚动</button>
    <button class="btn scroll-right">向右滚动</button>
  </div>

  JS代码:

  因为此轮播图是基于JQ的animate,所有必须要引用JQ文件才行!

  

  $(function(){
    // ul的宽度
    $(".list-cont").width($(".partner-list li").length * 200);     // 点击右箭头         $(".scroll-right").click(function(){
      $(".list-cont").stop().animate({"margin-left":"-200px"},600,function(){
        $(".list-cont>li").first().appendTo($(".list-cont"));
        $(".list-cont").css("margin-left","0");
      });
    });     // 点击左箭头         $(".scroll-left").click(function(){
      $(".list-cont").css("margin-left","-200px");
      $(".list-cont>li").last().prependTo($(".list-cont"));
      $(".list-cont").stop().animate({"margin-left":"0"});
    });   });

基于JQ的简单左右轮播图的更多相关文章

  1. jQ实现的一个轮播图

    众所周知,轮播图是被广泛的运用的. 轮播图我们在很多的网站上都可以看到,例如淘宝.京东这些网站都很常见. 下面开始我们的轮播之旅: 搭建我们的骨架: <!DOCTYPE html> < ...

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

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

  3. 最最最简单的轮播图(JQuery)

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. Centos系统 上下文切换的检查思路

    1.什么是上下文切换(Context Switch)? 上下文切换,有时也称做进程切换或任务切换,是指CPU从一个进程或线程切换到另一个进程或线程. 操作系统可以同时运行多个进程, 然而一颗CPU同时 ...

  2. tomcat8配置tomcat-users.xml不生效

    一般想进入tomcat管理后台,只要在tomcat-users.xml配置文件中添加一下内容即可 <role rolename="manager-gui"/> < ...

  3. MongoDB部署指南

    下載安裝包 http://www.mongodb.org/ 安裝MongoDB systemLog: destination: file path: E:\MongoDB\log\mongo.log ...

  4. INSPIRED启示录 读书笔记 - 第40章 最佳实践经验

    十大要点 1.产品管理的职责:许多产品经理将大把的时间浪费在与产品管理无关的工作上 2.用户体验:对于大多数软件产品来说,用户体验就是产品的生命 3.机会评估:用方便快捷的机会评估方法取代过时的市场需 ...

  5. JQuery 操作 iframe

    JQuery访问iframe内的元素 $("iframe#Main", top.document).contents().find("#id"); JQuery ...

  6. centos下无法使用lsof命令"-bash: lsof: command not found"

    1.问题描述 : 在CentOS下,使用lsof命令,报错如下: 2.解决方法: #yum install lsof 若输入y不能安装成功,通过yum install 包 -y 进行安装: # yum ...

  7. 【bzoj1876】[SDOI2009]SuperGCD(高精度)

    题目传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=1876 一道简单的高精度+Stein算法(或者叫辗转相除法)求最大公约数板子题. md还 ...

  8. WIN7 X64 PASSUAC 源码

    // Passuac.cpp : Defines the entry point for the console application. // #include "stdafx.h&quo ...

  9. intellij idea build时出现Artifact contains illegal characters的解决

    此处无法创建是因为Artifact的命名为大小写混合,将大写改为小写即可正常创建

  10. volume image

    http://docs.openstack.org/user-guide/cli_nova_launch_instance_from_volume.html http://docs.openstack ...