使用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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jQuery实现简单QQ聊天框
Aug 27 jQuery
jquery实现简易验证插件封装
Sep 13 jQuery
jQuery实现穿梭框效果
Jan 19 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 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 GD绘制24小时柱状图
2008/06/28 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
Apache+PHP+MySQL搭建PHP开发环境图文教程
2020/08/06 PHP
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
javascript变量提升和闭包理解
2018/03/12 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
Python中字典的基本知识初步介绍
2015/05/21 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
婚前协议书怎么写
2014/04/15 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
go select编译期的优化处理逻辑使用场景分析
2021/06/28 Golang