使用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插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
详解jQuery-each()方法
Mar 13 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 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的FTP学习(二)
2006/10/09 PHP
PHP中10个不常见却非常有用的函数
2010/03/21 PHP
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
无限树Jquery插件zTree的常用功能特性总结
2014/09/11 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
python中尾递归用法实例详解
2015/04/28 Python
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
详解Python3中字符串中的数字提取方法
2017/01/14 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
对pycharm 修改程序运行所需内存详解
2018/12/03 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
商铺门前三包责任书
2014/07/25 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
行政复议答复书
2015/07/01 职场文书
《小摄影师》教学反思
2016/02/18 职场文书
创业计划书之养殖业
2019/10/11 职场文书
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL