使用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 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 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服务器页面间跳转实现方法
2012/08/02 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
Python批量修改文件后缀的方法
2014/01/26 Python
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
Python读取键盘输入的2种方法
2015/06/16 Python
详解Django中的权限和组以及消息
2015/07/23 Python
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
Python定时器实例代码
2017/11/01 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
Python解决八皇后问题示例
2018/04/22 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
Java里面有没有全局变量?为什么?
2015/02/06 面试题
主管会计岗位责任制
2014/02/10 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP