jQuery实现简单轮播图效果


Posted in jQuery onDecember 27, 2020

本文实例为大家分享了jQuery实现简单轮播图效果的具体代码,供大家参考,具体内容如下

介绍:这里是我使用了计时器的方式实现图片每隔几秒切换然后添加了两个按钮用于上一张和下一张的切换

1、导入jQuery文件

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

2、设置图片的样式

<style>
  *{
   margin: 0;
   padding: 0;
  }
  #box{
   width: 300px;
   height: 300px;
   border: 2px solid red;
  }
  #box img{
   position: absolute;
   display: none;
  }
  #box :first-child{
   display: block;
  }
  .page{
   list-style: none;
   display: flex;
   width: 300px;
   justify-content: space-around;
  }
  .page li{
   border: 1px solid red;
   border-radius: 50%;
   width: 20px;
   height: 20px;
   text-align: center;

  }
  .active{
   background: red;
  }
 </style>
 <script src="./jquery.js"></script>
</head>
<body>
 <div id="box">
  <img src="./img/1.jpg" alt="">
  <img src="./img/2.jpg" alt="">
  <img src="./img/3.jpg" alt="">
  <img src="./img/4.jpg" alt="">
 </div> 
 <ul class="page" id="page" >
  <li class="active">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
 </ul>
<button id="next">下一张</button>
<button id="prev">上一张</button>

3 进行图片的轮播实现方式

/*
 绝对定位 -- 摞起来
 通过下标 -- 显示当前 --其他兄弟 隐藏
*/
  <script>
   var index=0;
    // 移动方法
   function move(){
    index++;
    if (index>=$("#box img").length) {
     index=0;
    }
    $("#box img").eq(index).show().siblings().hide();
    $("#page li").eq(index).addClass("active").siblings().removeClass("active");
   }
   //计时器的实现方法
   var t=setInterval(move,2000);
   //鼠标移动到图片会停止离开继续轮播
   $("#box").hover(function(){
    clearInterval(t)
   },function(){
    t=setInterval(move,2000)
   })

   $("#page li").click(function(){
    index= $(this).index() ;
    $("#box img").eq(index).show().siblings().hide();
    $("#page li").eq(index).addClass("active").siblings().removeClass("active");
   })
   //下一张的点击
   $("#next").click(function(){
    move();
   })
   //上一张的点击
   $("#prev").click(function(){
    index--;
    // 判断如果下标超过固有图片的数量时,从头开始轮播
    if (index<0) {
     index=$("#box img").length-1;
    }
    $("#box img").eq(index).show().siblings().hide();
    $("#page li").eq(index).addClass("active").siblings().removeClass("active");
   })

</script>

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

jQuery 相关文章推荐
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
jQuery实现雪花飘落效果
Aug 02 jQuery
jQuery实现简单弹幕制作
Dec 10 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 #jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 #jQuery
jquery实现图片放大镜效果
Dec 23 #jQuery
jQuery实现增删改查
Dec 22 #jQuery
jQuery实现本地存储
Dec 22 #jQuery
jQuery实现电梯导航模块
Dec 22 #jQuery
jQuery实现tab栏切换效果
Dec 22 #jQuery
You might like
通过文字传递创建的图形按钮
2006/10/09 PHP
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
大学系主任推荐信范文
2013/12/24 职场文书
写演讲稿要注意的六件事
2014/01/14 职场文书
高中体育教学反思
2014/01/29 职场文书
学雷锋演讲稿
2014/03/04 职场文书
大学生就业意向书范文
2014/04/01 职场文书
党员大会主持词
2014/04/02 职场文书
根叔历年演讲稿
2014/05/20 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis
python如何利用traceback获取详细的异常信息
2021/06/05 Python
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS