使用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卸载全部事件的思路详解
Apr 03 jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jQuery实现简单聊天室
Feb 08 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常用技巧总结(附函数代码)
2012/02/04 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
求得div 下 img的src地址的js代码
2007/02/28 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
Eval and new funciton not the same thing
2012/12/27 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
node express使用HTML模板的方法示例
2019/08/22 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
使用js获取身份证年龄的示例代码
2020/12/11 Javascript
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
详解python中递归函数
2019/04/16 Python
python中正则表达式与模式匹配
2019/05/07 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
六年级学生评语
2014/04/22 职场文书
生物技术专业求职信
2014/06/10 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
2014年办公室人员工作总结
2014/12/09 职场文书
销售开票员岗位职责
2015/04/15 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
教育教学读书笔记
2015/07/02 职场文书
2015大一新生军训感言
2015/08/01 职场文书
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python