效果图：

演示地址：

http://ae6623.cn/demo/slider/index.html

思路：

利用css的定位属性 left 进行调整图片的显示，每次点击上一页下一页按钮的时候，-图片宽度 * index(当前li索引)即可。

代码：


  2. <!DOCTYPE HTML>
  3. <html>
  4. <head>
  5.     <!--申明当前页面的编码集-->
  6.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7.     <!--网页标题-->
  8.     <title>slider</title>
  9.     <!--网页关键词-->
  10.     <meta name="keywords" content="" />
  11.     <!--网页描述-->
  12.     <meta name="description" content="" />
  13.     <!--适配当前屏幕-->
  14.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  15.     <!--禁止自动识别电话号码-->
  16.     <meta name="format-detection" content="telephone=no" />
  17.     <!--禁止自动识别邮箱-->
  18.     <meta content="email=no" name="format-detection" />
  19.     <!--iphone中safari私有meta标签,
  20.         允许全屏模式浏览,隐藏浏览器导航栏-->
  21.     <meta name="apple-mobile-web-app-capable" content="yes" />
  22.     <!--iphone中safari顶端的状态条的样式black(黑色)-->
  23.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  24.     <style type="text/css">
  25.         /*reset 重置*/
  26.         body,ul,ol,p,h1,h2,h3,h4,h5,dl,dd,form,input,textarea,
  27.         td,th,button,strong,em,select,video,canvas{margin:0;padding:0;}
  28.         li{list-style:none;vertical-align:top;}
  29.         table{ border-collapse:collapse;}
  30.         textarea{resize:none;overflow:auto;}
  31.         img{ border:none; vertical-align:middle;}
  32.         em{ font-style:normal;}
  33.         a{ text-decoration:none;}
  34.         a,input{
  35.             -webkit-appearance: none;/*屏蔽阴影*/
  36.             -webkit-tap-highlight-color:rgba(0,0,0,0);
  37.             /*ios android去除自带阴影的样式*/
  38.         }
  39.         a, img {
  40.             /* 禁止长按链接与图片弹出菜单 */
  41.             -webkit-touch-callout: none;
  42.         }
  43.         html, body {
  44.             /* 禁止选中文本(如无文本选中需求,此为必选项) */
  45.             -webkit-user-select: none;
  46.             user-select: none;
  47.         }
  48.         /*public*/
  49.         html {
  50.             font-size : 20px;
  51.         }
  52.         @media only screen and (min-width: 401px){
  53.             html {
  54.                 font-size: 25px !important;
  55.             }
  56.         }
  57.         @media only screen and (min-width: 428px){
  58.             html {
  59.                 font-size: 26.75px !important;
  60.             }
  61.         }
  62.         @media only screen and (min-width: 481px){
  63.             html {
  64.                 font-size: 30px !important;
  65.             }
  66.         }
  67.         @media only screen and (min-width: 569px){
  68.             html {
  69.                 font-size: 35px !important;
  70.             }
  71.         }
  72.         @media only screen and (min-width: 641px){
  73.             html {
  74.                 font-size: 40px !important;
  75.             }
  76.         }
  77.         body{font-family: "Helvetica Neue", Helvetica, "STHeiTi", sans-serif;
  78.             overflow-x:hidden; overflow-y:auto; font-size:0.7rem;
  79.         }
  80.         .clear{zoom:1;}
  81.         .clear:after{content:''; display:block; clear:both;}
  82.         .fl{float:left;}
  83.         .fr{float:right;}
  84.         .viewport{ max-width:640px; margin:0 auto; overflow-x:hidden;}
  86.         #slider{width:400px;position: relative;overflow: hidden;}
  87.         #slider-head{width:400px;}
  88.         #silder-head>div{float: left;height: 20px;line-height: 20px;vertical-align: middle;}
  90.         #slider-head-button{width:350px;}
  91.         #slider-head-button span{font-size: 12px;display: block;float: left;margin:3px;}
  93.         #slider-content ul{position:relative;height: 150px;width:2000px;}
  94.         #slider-content li{position:relative;width:200px;height: 150px;float: left;margin-right:5px;}
  95.         #slider-content  .li1{background-color:#3399cc;}
  96.         #slider-content  .li2{background-color: #cc3333;}
  97.         #slider-head-dots{ }
  98.         #slider-head-dots li{display: inline-block; width: 10px; height: 10px; margin: 5px 0px; text-indent: -999em; border: 2px solid #fff; border-radius: 6px; cursor: pointer; opacity: .4; -webkit-transition: background .5s, opacity .5s; -moz-transition: background .5s, opacity .5s; transition: background .5s, opacity .5s; background: #000;} 
  100.         #slider-head-dots li.active,li:hover {
  101.             background: #000;
  102.             opacity: 1;
  103.         }
  105.         </style> 
  107.         </head>
  108. <body>
  109.     <div>
  110.         <div id="main">
  111.             <div id="slider">
  112.                 <div id="silder-head">
  113.                     <div id="slider-head-button"><span class="l"> <a href="#" class="pri"><</a></span><span class="r"> <a href="#" class="next">></a> </span></div>
  114.                     <div id="slider-head-dots">
  115.                         <ol class="dots">
  116.                             <li class="dot active">1</li>
  117.                             <li class="dot">2</li>
  118.                         </ol>
  119.                     </div>
  120.                 </div>
  121.                 <div class="clear"></div>
  122.                 <div id="slider-content">
  123.                     <ul>
  124.                         <li class="li1">1</li>
  125.                         <li class="li2">2</li>
  126.                         <li class="li1">3</li>
  127.                         <li class="li2">4</li>
  128.                     </ul>
  129.                 </div>
  130.             </div>
  131.         </div>
  132.     </div>
  133.     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  134.   <script type="text/javascript">
  135.     $(function() {
  136.         console.log('author:Luo Yu');
  137.         //拿到小圆点
  138.         var nav = $('#slider-head-dots ol').find('li');
  139.         //轮播内容
  140.         var content = $("#slider-content").find('ul');
  141.        //按钮 左右剪头，我没用图片，用了大于号小于号临时将就一下
  142.         var head_button = $("#slider-head-button").find("a");
  143.         //第一张图片的宽度
  144.         var imgWidth = content.find("li").eq(0).width() + 5;
  146.         //点击了小圆点
  147.         nav.click(function() {
  148.             var me = $(this);
  149.             var index = me.index();
  150.             nav.removeClass("active");
  151.             me.addClass("active");
  152.             //轮播
  153.             content.animate({
  154.                 "left": -imgWidth * 2 * index
  155.             });
  156.         });
  158.         //点击了左右剪头
  159.         head_button.click(function(){
  160.             var me = $(this);
  161.             var index = me.attr("class");
  162.             if(index == "pri"){
  163.                 index = 0;
  164.             }else{
  165.                 index = 1;
  166.             }
  168.             nav.removeClass("active");
  169.             nav.eq(index).addClass("active");
  170.             content.animate({
  171.                 "left": -imgWidth * 2 * index
  172.             });
  174.         });
  175.     });
  176.     </script>
  177. </body>
  179. </html>

jquery制作一个简单的轮播的更多相关文章

  1. 使用JavaScript制作一个好看的轮播图

    目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...

  2. jquery做一个小的轮播插件---有BUG，后续修改

    //首页无缝轮播 ; (function($, window, document, undefined) { $.fn.slider = function(options) { var default ...

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

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

  4. Jquery制作--焦点图左右轮播

    公司项目经常用到轮播焦点图,于是自己写了一个纯jq形式的横向轮播焦点图,可点击小圆点或者左右按钮进行切换,属于定宽类型.改成自适应宽度的也不难,将css里面的bannerCon宽度改为百分比,再在js ...

  5. 用jquery制作一个简单的导航栏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. JQuery制作基础的无缝轮播与左右点击效果

    在网页中我们想要的无缝轮播左右循环有好多好多中,这是我第一个轮播效果,也是最基础的,和大家分享一下,对于初学者希望你们能有所借鉴,对于大神我想让你们尽情的虐我给我宝贵的意见. 这个是我要的效果 进入正 ...

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

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

  8. Jquery教你写一个简单的轮播.

    这个我表示写的不咋地-_-//,但是胜在简单,可优化性不错. 实际上我本来想写个复杂点的结构的,但是最近忙成狗了!!!!所以大家就讲究着看吧 HTML结构 <div class="ba ...

  9. 用jquery制作的简单轮播图

    我也是进入H5前端的小菜鸟一枚,最近才进入jquery的学习,所以打算对自己的学习进行记录. 今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相 ...

随机推荐

  1. BZOJ 2118 墨墨的等式（最短路）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2118 [题目大意] 求a1x1+a2y2+…+anxn=B在B的取值范围,有多少B可以 ...

  2. zookeeper【5】分布式锁

    我们常说的锁是单进程多线程锁,在多线程并发编程中,用于线程之间的数据同步,保护共享资源的访问.而分布式锁,指在分布式环境下,保护跨进程.跨主机.跨网络的共享资源,实现互斥访问,保证一致性. 架构图: ...

  3. python及其模块下载集合

    1)python平台 https://www.python.org/downloads/ 2)打包工具 cx-freeze(python3以上版本打包工具) http://cx-freeze.sour ...

  4. python开发_tkinter_图片操作

    在java的swing中,我们可以找到一些有关图片的操作,对于python的tkinter类似,也有对于图片的相关操作 下面是我做的demo 运行效果: ======================= ...

  5. ZeptoLab Code Rush 2015 B. Om Nom and Dark Park DFS

    B. Om Nom and Dark Park Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/5 ...

  6. Linux下访问window挂载的磁盘

    点击window挂在的磁盘,如下图左侧"文档". 出现如下错误: Error mounting /dev/sda3 .... Command-line `mount -t &quo ...

  7. 通过yum来安装vsftpd

    Linux系统:centos6.6.  安装步骤  1.通过yum来安装vsftpd [root@localhost ~]# yum -y install vsftpd 2.设置为开机启动 [root ...

  8. Word文档中的语法高亮显示代码

    有时候我们程序员也需要在word文档里面显示代码,但是直接复制过去 不好看,格式也不太对,这里给大家分享一个Word文档中的语法高亮显示代码的方法 http://www.planetb.ca/synt ...

  9. WPF中的ImageBrush常用方式

    WPF的ImageBrush是一个比较常见也比较复杂的笔刷,它继承自图块笔刷(TileBrush).使用图块画笔绘制区域涉及以下三个组成部分:内容.基本图块和输出区域.基本输出过程如下图所示: 其中, ...

  10. 解决Oracle11g空表无法导出的问题

    Oracle11g 新增參数deferred_segment_creation  ,建库的时候默认值为true,意思是延时载入,当表中不存在数据的时候,不为这个表创建空间,当你导出的时候会发现非常多表 ...