1.首先看一下目录结构

images文件夹放所需要播放的图片。

js文件夹放jquery库和main.js

2.html代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="utf-8">

     <title>JQuery slideShow</title>

     <style>

     *{margin: 0;padding: 0}

     ul,ol{list-style: none;}

     .slideShow{position: relative;margin: 100px auto;height: 140px;width: 340px;overflow: hidden;}

     .slideShow ul{ position: relative;width: 2000px; }

     .slideShow ul li{float: left;width: 340px}

     .slideShow .nav{text-align: center;position: absolute;right: 10px;bottom: 10px;font-size: 12px;line-height: 18px;}

     .slideShow .nav span{ -webkit-user-select:none;user-select:none;float: left;cursor: pointer;border-radius: 9px;display: inline-block;width: 18px;height: 18px;background:rgba(0,0,0,0.7);margin-left: 2px;color: #fff;opacity: 0.5;}

      .slideShow .nav span.active{opacity: 1;}

     </style>

 </head>

 <body>

         <div class="slideShow">

             <ul>

                   <li><a href="#"><img src="./images/01.jpg" alt=""></a></li>

                    <li><a href="#"><img src="./images/02.jpg" alt=""></a></li>

                     <li><a href="#"><img src="./images/03.jpg" alt=""></a></li>

                      <li><a href="#"><img src="./images/04.jpg" alt=""></a></li>

                       <li><a href="#"><img src="./images/05.jpg" alt=""></a></li>

             </ul>

             <div class="nav">

                         <span class="active">1</span>

                         <span>2</span>

                         <span>3</span>

                          <span>4</span>

                          <span>5</span>

           </div>

           <script src="js/jquery-3.1.1.min.js"></script>

           <script src="js/main.js"></script>

 </body>

 </html>

3.main.js代码:

 $(document).ready(function(){

     var slideShow = $(".slideShow"),         //获取div

           ul=slideShow.find("ul"),

           nav=slideShow.find(".nav span"),      //获取按钮

           oneWidth=ul.find("li").eq(0).width(),

           timer=null,

           iNow=0;

           slideShow.hover(function(){

           clearInterval(timer);

           },autoPlay);

      nav.on("click",function(){         //添加点击按钮

          var me=$(this),

               index=me.index();

               iNow=index;

               ul.animate({

                   "left":- oneWidth * iNow,

               });

         nav.removeClass("active");

          me.addClass("active");

      });

 autoPlay();

      function autoPlay(){

          timer = setInterval(function(){

           iNow++;

         if(iNow>nav.length-1){

             iNow=0;

         }

           nav.eq(iNow).trigger("click");

 },2000);

 }

      });

4.效果图

当然了，大小可以利用CSS自己进行调整！

声明：代码非原创，取自网络。

使用JQuery制作幻灯片(轮播图）的更多相关文章

  1. [vuejs短文]使用vue-transition制作小小轮播图

    提示 本文是个人的一点小笔记,用来记录开发中遇到的轮播图问题和vue-transition问题. 会不断学习各种轮播图添加到本文当中 也有可能会上线,方便看效果 开始制作 超简易呼吸轮播 简单粗暴的使 ...

  2. jQuery淡入淡出轮播图实现

    大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...

  3. 用jQuery写的轮播图

    效果图: GitHub地址:https://github.com/123456abcdefg/Javascript 大家可以下载源码查看. 与前一篇写的轮播图实现的效果一致,这个是用jQuery写的, ...

  4. jQuery实现简易轮播图的效果

    (图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...

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

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

  6. （数据科学学习手札90）Python+Kepler.gl轻松制作时间轮播图

    本文示例代码及数据已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 Kepler.gl作为一款强大的开源地理信 ...

  7. 用JavaScript制作banner轮播图

    JavaScript_banner轮播图 让我们一起来学习一下用js怎么实现banner轮播图呢? 直接看代码: <!DOCTYPE html> <html> <head ...

  8. H5制作显示轮播图的方法Swiper

    1.需要引入Swiper插件 <!-- swiper插件 --> <link rel="stylesheet" href="https://unpkg. ...

  9. JQuery实现一个轮播图

    1.HTML <div class="banner"> <div class="b_main"> <div class=" ...

随机推荐

  1. 微信 之jsapi实现支付

    一.微信公众号号后台支付配置 附微信支付参考文档:https://pay.weixin.qq.com/wiki/doc/api/index.html 二.微信支付类封装 该类可以实现付款码支付.JSA ...

  2. CAD保存高版本的dwg（com接口）

    主要用到函数说明: MxDrawXCustomFunction::Mx_SaveDwgEx 保存DWG文件,可以设置保存的文件版本号和密码,详细说明如下: 参数 说明 IN CString sFile ...

  3. Oracle ASM注意事项

    ASM是负载均衡的存储策略,加新磁盘会将其它盘数据平均迁移到新磁盘,删除磁盘会将删除磁盘数据平均写回其它磁盘 1.同一磁盘组如果是在raid上,划分的磁盘越少越好,磁盘组分布在不同raid上性能好: ...

  4. 啥是SQL？

    SQL:(Structured Query Language)是结构化查询语言缩写.是一门专门与数据库管理系统打交道的语言. SQL语言:是关系型数据库的标准语言,,其主要用于存取数据,查询数据,更新 ...

  5. python爬虫12 | 爸爸，他使坏，用动态的 Json 数据，我要怎么搞？

    在前面我们玩了好多静态的 HTML 想必你应该知道怎么去爬这些数据了 但还有一些常见的动态数据 比如 商品的评论数据 实时的直播弹幕 岛国动作片的评分 等等 这些数据是会经常发生改变的 很多网站就会用 ...

  6. BZOJ 4032 Luogu P4112 [HEOI2015]最短不公共子串 (DP、后缀自动机)

    这其实是道水题... 题目链接: (bzoj)https://www.lydsy.com/JudgeOnline/problem.php?id=4032 (luogu)https://www.luog ...

  7. N天学习一个linux命令之sort

    用途 对文本内容按行排序,输出排好序后的内容到标准输出流 用法 sort [OPTION]... [FILE]... sort [OPTION]... --files0-from=F 常用选项 -b, ...

  8. [转]十五天精通WCF——第七天 Close和Abort到底该怎么用才对得起观众

    一:文起缘由 写这一篇的目的源自于最近看同事在写wcf的时候,用特别感觉繁琐而且云里雾里的嵌套try catch来防止client抛出异常,特别感觉奇怪,就比如下面的代码. public void S ...

  9. NGINX之——配置HTTPS加密反向代理訪问–自签CA

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46695495 出于公司内部訪问考虑,採用的CA是本机Openssl自签名生成的,因 ...

  10. ubuntu 关于sublime text3的一些应用

    安装 如今能够通过ppa的方法来安装sublime text3 了,个人感觉就是有有点儿慢,毕竟要update一下. sudo add-apt-repository ppa:webupd8team/s ...