使用jquery实现轮播图效果


Posted in jQuery onJanuary 02, 2021

今天给大家分享的是利用jquery实现轮播图的效果,废话不多说咯,直接上代码,当然每行代码会有注释了,这样也便于理解哦。

第一步:先引进jquery文件

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

第二步:html样式

<div id="banner">
  <!-- 图片 -->
  <ul id="banner_img">
   <li>
    <img src="./img/1.jpg" alt="">
   </li>
   <li>
    <img src="./img/2.jpg" alt="">
   </li>
   <li>
    <img src="./img/3.jpg" alt="">
   </li>
   <li>
    <img src="./img/4.jpg" alt="">
   </li>
  </ul>
  <!-- 圆点 -->
  <ul id="banner_yuandian">
   <li class="active">1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
  </ul>
  <!-- < >箭头指向 -->
  <button id="banner_back"><</button>
  <button id="banner_next">></button>
 </div>

第三步:css样式

<style>
  *{
   margin: 0;
   padding: 0;
   list-style: none;
  }
  #banner{
   position: relative;
  }
  /*图片样式 */
  #banner #banner_img{
   width: 300px;
   height: 300px;
   border: 2px red solid;
  }
  #banner #banner_img img{
   width: 300px;
   height: 300px;
  }
  #banner #banner_img>li{
   display: none;
  }
  #banner #banner_img :first-child{
   display:block;
  }
  /* 圆点样式 */
  #banner_yuandian{
   position: absolute;
   bottom: 10px;
   display: flex;
   margin-left: 35px;

  }
  #banner_yuandian li{
   margin-left: 30px;
   width: 20px;
   height: 20px;
   border: 1px red solid;
   border-radius: 50%;
   text-align: center;
  }
  #banner_yuandian li:hover{
   background: orange;
  }
  #banner_yuandian .active{
   background: orange;
  }
  /* 箭头样式 */
  #banner_back{
   width: 30px;
   height: 30px;
   position: absolute;
   margin-top: -150px;
  }
  #banner_next{
   width: 30px;
   height: 30px;
   position: absolute;
   margin-top: -150px;
   margin-left: 273px;
  }
</style>

第四步:js样式

<script>
  
  //设置图片,圆点,箭头共同的下标 从0开始
  var index=0;

  //封装轮播的函数 第一步
  function show(){
   //下标每次+1增加
   index+=1;
   //如果下标大于等于图片的长度数,返回第一张图,即是下标index=0就行
   if(index>=$("#banner_img>li").length){
    index=0;
   }

   //让li的每张图片点击时显示自己,其他兄弟隐藏
   $("#banner_img>li").eq(index).show(1000).siblings().hide(1000);
   //圆点的下标也需要封装一下样式
   $("#banner_yuandian>li").eq(index).addClass("active").siblings().removeClass("active");
  
  }

  //利用计时器达到轮播效果 第二步
  var x=setInterval(show,2000);

  //鼠标移动到图片上时清除计时器,移出之后重新加入计时器
  $("#banner_img>li").hover(
   function(){
    clearInterval(x);
   },
   function(){
    x=setInterval(show,2000);
   }
  )


  //圆点设置,点击圆点,切换相应图片 第三步
  $("#banner_yuandian>li").on("click",function(){
   //点击圆点时的下标取共同下标
   var index=$(this).index();//出错的地方index()语法

   //点击下标时展现对应的图片,其他兄弟图隐藏
   $("#banner_img>li").eq(index).show(1000).siblings().hide(1000);
   //点击圆点,添加样式,其他删除
   $("#banner_yuandian>li").eq(index).addClass("active").siblings().removeClass("active");
  
  })

  //鼠标滑动上去滑动出来要清除计时器和再次设置计时器 第四步
  $("#banner_yuandian>li").hover(
   function(){
    clearInterval(x);
   },
   function(){
    x=setInterval(show,2000);
   }
  )
   

  //箭头设置 第五步
  
  $("#banner_back").on("click",function(){
   //点击一次减去1
   index--;
   //当下标小于0时,就返回第一张图
   if(index<0){
    index=0;
   }

   
   //点击下标时展现对应的图片,其他兄弟图隐藏 
   $("#banner_img>li").eq(index).show(1000).siblings().hide(1000);
   //点击圆点,添加样式,其他删除
   $("#banner_yuandian>li").eq(index).addClass("active").siblings().removeClass("active");

  })
  //下一张 可以直接调用
  $("#banner_next").on("click",function(){
   show();
  })

  //点击button按钮再次清除计时器和添加计时器
  $("button").hover(
   function(){
    clearInterval(x);
   },
   function(){
    x=setInterval(show,2000);
 }
)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
深入分析jQuery.one() 函数
Jun 03 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
jQuery实现全选按钮
Jan 01 #jQuery
jquery自定义组件实例详解
Dec 31 #jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 #jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 #jQuery
jQuery实现简单轮播图效果
Dec 27 #jQuery
原生jQuery实现只显示年份下拉框
Dec 24 #jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 #jQuery
You might like
一些使用频率比较高的php函数
2008/10/03 PHP
邮箱正则表达式实现代码(针对php)
2013/06/21 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
php实现查看邮件是否已被阅读的方法
2013/12/03 PHP
php获取网页请求状态程序示例
2014/06/17 PHP
PHP输出日历表代码实例
2015/03/27 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
电子商务网站的创业计划书
2014/01/05 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
品质主管岗位职责
2014/03/16 职场文书
假面舞会策划方案
2014/05/29 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
Python中tqdm的使用和例子
2022/09/23 Python