jQuery实现轮播图效果demo


Posted in jQuery onJanuary 11, 2020

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

效果展示:

jQuery实现轮播图效果demo

编程思路:

1. 首先是基础的布局,使用"子绝父相"等页面布局方法,将图片、左右按钮以及每张图片下方对应的标识小按钮安排的明明白白。
2. JS中在通过点击左右按钮来切换图片时,使用三个变量分别来表示当前显示的图片序号、点击上一张按钮时候显示的图片序号、点击下一张按钮时候显示的图片序号。
3. 在自动轮播的时候,通过使用定时器来改变当前显示的图片序号来控制轮播

具体代码:

HTML代码:

<div id="slideShow">
 <a href="#" class="slide_pic"><img src="../img/phone_photo/p1.jpg" alt="0"></a>
 <a href="#" class="slide_pic"><img src="../img/phone_photo/p2.jpg" alt="1"></a>
 <a href="#" class="slide_pic"><img src="../img/phone_photo/p3.jpg" alt="2"></a>
 <a href="#" class="slide_pic"><img src="../img/phone_photo/p4.jpg" alt="3"></a>
 <a href="#" class="slide_pic"><img src="../img/phone_photo/p5.jpg" alt="4"></a>
 <a href="#" class="slide_pic"><img src="../img/phone_photo/p6.jpg" alft="5"></a>

 <button class="prev_one"> < </button>
 <button class="next_one"> > </button>

 <ul id="mark_box">
  <li class="mark">1</li>
  <li class="mark">2</li>
  <li class="mark">3</li>
  <li class="mark">4</li>
  <li class="mark">5</li>
  <li class="mark">6</li>
 </ul>
</div>

CSS代码:

#slideShow{
 width: 330px;
 height: 245px;
 background-color: #999999;
 text-align: center;
 left: 50%;
 margin-left: -165px;
 position: relative;
}
#slideShow .slide_pic{
 position: absolute;
 left: 0;
 top: 0;
}
#slideShow .prev_one{
 position: absolute;
 left: 0;
 top: 45%;
}
#slideShow .next_one{
 position: absolute;
 right: 0;
 top: 45%;
}
#slideShow #mark_box{
 position: absolute;
 bottom: 0;
}

#mark_box .mark{
 width: 20px;
 height: 20px;
 border-radius: 20px;
 padding: 2px;
 text-align: center;
 line-height: 20px;
 background-color: red;
 float: left;
 list-style: none;
 margin: 10px 10px;
 cursor: pointer;
}
#mark_box .active_img{
 background-color: green;
}

Javascript代码:

$(function(){
 var prev_mark=0;    //点击上一张按钮时候的一个标志位
 var next_mark=0;    //点击下一张按钮时候的一个标志位
 var cur_pic=$('.slide_pic').length-1;   //当前图片的序号

 $('.prev_one').click(function(){
  prev_mark=cur_pic;   //获取当前图片的序号
  if(prev_mark === 0){
   prev_mark=$('.slide_pic').length-1;
  }
  else{
   prev_mark--;
  }
  cur_pic=prev_mark;
  $('.slide_pic').eq(cur_pic).fadeIn(500).siblings('.slide_pic').fadeOut(500);
  $('.mark').eq(cur_pic).addClass('active_img').siblings('.mark').removeClass('active_img');
 });

 $('.next_one').click(function(){
  next_mark=cur_pic;
  if(next_mark === $('.slide_pic').length-1){
   next_mark=0;
  }
  else{
   next_mark++;
  }
  cur_pic=next_mark;
  $('.slide_pic').eq(cur_pic).fadeIn(500).siblings('.slide_pic').fadeOut(500);
  $('.mark').eq(cur_pic).addClass('active_img').siblings('.mark').removeClass('active_img');
 });

 // 轮播图下面的指示点
 $.each($('.mark'),function(index,value){
  $(value).click(function(){
   cur_pic=this.innerHTML-1;
   $('.slide_pic').eq(cur_pic).fadeIn(500).siblings('.slide_pic').fadeOut(500);
   $(this).addClass('active_img').siblings('.mark').removeClass('active_img');
  });
 });

 // 鼠标移入图片则停止轮播;鼠标移出图片则开始轮播
 var slide_timer=setInterval(auto_slide,2000);
 $('#slideShow').mouseenter(function(){
  clearInterval(slide_timer);
 });
 $('#slideShow').mouseleave(function(){
  slide_timer=setInterval(auto_slide,2000);
 });

 // 自动轮播函数
 function auto_slide(){
  if(cur_pic === $('.slide_pic').length-1){
   cur_pic =0;
  }
  else {
   cur_pic++;
  }
  $('.slide_pic').eq(cur_pic).fadeIn(500).siblings('.slide_pic').fadeOut(500);
  $('.mark').eq(cur_pic).addClass('active_img').siblings('.mark').removeClass('active_img');
 }
});

更多关于轮播图效果的专题,请点击下方链接查看学习

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

jQuery 相关文章推荐
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
基于jQuery拖拽事件的封装
Nov 29 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 #jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 #jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 #jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 #jQuery
jQuery操作动画完整实例分析
Jan 10 #jQuery
jQuery操作事件完整实例分析
Jan 10 #jQuery
jQuery操作元素追加内容示例
Jan 10 #jQuery
You might like
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
php导入模块文件分享
2015/03/17 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
JavaScript toFixed() 方法
2010/04/15 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
Vue DevTools调试工具的使用
2017/12/05 Javascript
详解VUE 数组更新
2017/12/16 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
Python自动连接ssh的方法
2015/03/07 Python
Python按行读取文件的简单实现方法
2016/06/22 Python
全面分析Python的优点和缺点
2018/02/07 Python
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
电子商务专业学生的学习自我评价
2013/10/27 职场文书
留学顾问岗位职责
2014/04/14 职场文书
报案材料怎么写
2015/05/25 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
mysql函数全面总结
2021/11/11 MySQL
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript