（图片素材取自于小米官网）

刚开始接触jQuery的学习，个人觉得如果为了实现多数的动态效果，jQuery的确很简易方便。

下面简易的轮播图效果，还请前辈多多指教~

（努力学习react vue angular中，加油~~~）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         body,p,ul{margin:0px;padding:0px;}
  8.         #box{width:1226px;height:460px;margin:0 auto;position:relative;}
  9.         img{position:absolute;width:100%;display:none;}
  10.         #cir{position:absolute;height:20px;width:150px;bottom:0;left:50%;transform:translateX(-50%);}
  11.         span{height:20px;width:20px;border-radius:10px;background:blue;display:inline-block;box-sizing:border-box;}
  12.         #left{height:69px;width:41px;position:absolute;top:50%;transform:translateY(-50%);background:url("img/icon-slides.png") no-repeat -83px 0px;}
  13.         #right{height:69px;width:41px;position:absolute;right:0;top:50%;transform:translateY(-50%);background:url("img/icon-slides.png") no-repeat -125px 0px;}
  14.         #left:hover{background:url("img/icon-slides.png") no-repeat 0px 0px;}
  15.         #right:hover{background:url("img/icon-slides.png") no-repeat -42px 0px;}
  16.         .span_on{background:red;border:1px solid yellow;}
  17.         .img_on{display:block;}
  18.     </style>
  19.     <script src="jquery-1.11.3.js"></script>
  20.     <script>
  21.         $(function(){
  22.             var index=0;
  23.             var timer=null;
  24.             function play(){
  25.                 index++;
  26.                 if(index>5){
  27.                     index=0;
  28.                 }
  29.                 $("span").eq(index).prop("class","span_on").siblings().prop("class","");
  30.                 $("img").eq(index).prop("class","img_on").siblings().prop("class","");
  31.             }
  32.             timer=setInterval(play,1000);
  33.             $("#box").mouseover(function(){
  34.                 clearInterval(timer);
  35.             })
  36.  
  37.             $("#box").mouseout(function(){
  38.                 timer=setInterval(play,1000);
  39.             })
  40.             $("#left").click(function(){
  41.                 index--;
  42.                 if(index<0){
  43.                     index=5;
  44.                 }
  45.                 $("span").eq(index).prop("class","span_on").siblings().prop("class","");
  46.                 $("img").eq(index).prop("class","img_on").siblings().prop("class","");
  47.             })
  48.             $("#right").click(function(){
  49.                 play();
  50.             })
  51.             $("span").mouseover(function(){
  52.                 $(this).prop("class","span_on").siblings().prop("class","");
  53.                 index=$(this).index();
  54.             })
  55.         })
  56.     </script>
  57. </head>
  58. <body>
  59. <div>
  60.     <div id="box">
  61.  
  62.         <img class="img_on" src="img/11.jpg" alt="">
  63.         <img src="img/22.jpg" alt="">
  64.         <img src="img/33.jpg" alt="">
  65.         <img src="img/44.jpg" alt="">
  66.         <img src="img/55.jpg" alt="">
  67.         <img src="img/66.jpg" alt="">
  68.  
  69.         <div id="cir">
  70.             <span class="span_on"></span>
  71.             <span></span>
  72.             <span></span>
  73.             <span></span>
  74.             <span></span>
  75.             <span></span>
  76.         </div>
  77.         <div id="left">
  78.         </div>
  79.         <div id="right">
  80.         </div>
  81.     </div>
  82. </div>
  83. </body>
  84. </html>

jQuery实现简易轮播图的效果的更多相关文章

  1. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

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

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

  3. 原生JS实现轮播图的效果

    原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...

  4. jquery里面的attr和css来设置轮播图竟然效果不一致

    /*封装$*/ // window.$=HTMLElement.prototype.$=function(selector){ // var elems=(this==window?document: ...

  5. 用jQuery写的轮播图

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

  6. 原生js一行代码实现简易轮播图

    这是一个简易的js无限循环轮播图,只用了一行js代码就实现了无限循环,记录一下三目运算符的伟大! <!DOCTYPE html><html lang="en"&g ...

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

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

  8. 使用JS实现轮播图的效果

    其中的一些css样式代码就省略了,下面只把结构层html.行为层js的代码展示出来 ,看代码说事. 一.简单的轮播图 <div class="box" id="bo ...

  9. JQuery实现一个轮播图

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

随机推荐

  1. [转]How to Create an Add-in for Microsoft Outlook

    本文转自:https://www.codeproject.com/Articles/1112815/How-to-Create-an-Add-in-for-Microsoft-Outlook This ...

  2. Abp中SwaggerUI的接口说明文档配置

    项目中集成了swashbuckle,那么通过访问http://ip:port/swagger/ui/index,可以看到提供的接口列表.接口列表默认是没有提供接口说明信息的,但是swagger内部是集 ...

  3. c#Image.FromFile图形加载异常处理

    public void UpdateImg(string picpath) { //更新至控件中 PnlImageShow.BackgroundImage = LoadImgPath(picpath) ...

  4. async 和 await 的用法示例

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  5. AutoFac使用方法总结三：生命周期

         生命周期 AutoFac中的生命周期概念非常重要,AutoFac也提供了强大的生命周期管理的能力.     AutoFac定义了三种生命周期: Per Dependency Single I ...

  6. 使用AutoFac组织多项目应用程序

    较复杂的应用程序都是由多个项目组织成的,项目可以划分成程序集(Assemblies)和宿主(Hosts),也就是应用程序的入口.      Assemblies 通常是常见的类库项目,包括可以重用的功 ...

  7. Python 正则 re.sub替换

    # 正则将匹配到的两个字段,都替换成某个值import re s0 = 'BOY and GIRL' s1 = re.sub(r'BOY|GIRL', 'HUMAN', s0) print s1 # ...

  8. Linux : task work 机制

    task work机制可以在内核中向指定的进程添加一些任务函数,这些任务函数会在进程返回用户态时执行,使用的是该进程的上下文.包括下面的这些API: task_work_add task_work_c ...

  9. VMware安装vnwaretools

    1. 在VMware Fusion 6.0.4下安装Ubuntu镜像:ubuntu-14.04.1-desktop-amd64.iso 2. 点击虚拟机菜单栏-安装VMware Tools 3. 进入 ...

  10. 企业实施ERP的先后步骤，你真的了解吗？

    信息化是我国加快实现工业化和现代化的必然选择.坚持以信息化带动工业化,以工业化促进信息化,在国民经济和社会领域广泛采用信息技术.国民经济信息化中企业的信息化工作是基础, ERP管理系统是IT技术和先进 ...