// 轮播图

主要实现思想:

  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. OC自动释放池autoreleasepool介绍

    自动释放池的机制是:它使得应用在创建新对象时,系统能够有效地管理应用所使用的内存. @autoreleasepool { statements } 在创建新对象时,并且系统未启动ARC特性,那么在使用 ...

  2. Raspberry Pi开发之旅-同步时间

    使用htpdate同步时间 由于树莓派板子上没有 RTC 硬件和电池,因此树莓派上的系统时间重启是保存不了的.网上已经有人想到应对 NTP 被防火墙封掉类似的需求了,开源的 htpdate 命令直接使 ...

  3. nodejs安装,配置环境,使用express建立一个新项目

    1.下载nodejs安装包 去nodejs官网下载最新版本就行,网址:http://nodejs.cn/download/,点击自己适用的系统,自动下载跟电脑操作系统位数符合的安装包, 下载下来安装包 ...

  4. ResourceLoader笔记

    Ant路径匹配 Ant路径通配符支持“?”.“*”.“**”,注意通配符匹配不包括目录分隔符“/”: “?”:匹配一个字符,如“config?.xml”将匹配“config1.xml”: “*”:匹配 ...

  5. memcpy与memmove

    函数原型: void* memcpy(void *dst,void const *src,size_t count) void* memmove(void *dst,void const *src,s ...

  6. java resources 红叉 An error occurred while filtering resources

    用eclipse创建了一个Spring mvc的Maven项目,在项目上有个叉叉,通过Window -> Show View -> Markers中看到错误原因 An error occu ...

  7. Response对象介绍(服务器到客户端)

    1.response的状态码和响应头设置 package com.test; import java.io.IOException; import java.io.PrintWriter; impor ...

  8. RabbitMQ死信队列

    关于RabbitMQ死信队列 死信队列 听上去像 消息“死”了     其实也有点这个意思,死信队列  是 当消息在一个队列 因为下列原因: 消息被拒绝(basic.reject/ basic.nac ...

  9. streambase一些疑难杂症

    1.webserverReqest控件接收不到换行符\r\n 方案一:这个在streambase7.6.7没有办法处理,只有在streambase7.7.4中才有办法处理,在这个版本中出现了Reque ...

  10. 直播P2P技术3-伙伴节点质量评估及子流订阅

    以上模型,暂且称之为W-P2P吧.