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 06 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jquery实现简单拖拽效果
Jul 20 jQuery
jQuery实现查看图片功能
Dec 01 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
php db类库进行数据库操作
2009/03/19 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
python 捕获shell脚本的输出结果实例
2017/01/04 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
外贸公司实习自我鉴定
2013/09/24 职场文书
工作疏忽检讨书
2014/01/25 职场文书
会计系毕业求职信
2014/08/07 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
幼师个人总结范文
2015/02/28 职场文书
大学生自我评价范文
2015/03/03 职场文书
教师节主题班会方案
2015/08/17 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
python中%格式表达式实例用法
2021/06/18 Python
Elasticsearch 配置详解
2022/04/19 Java/Android