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版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jQuery tip提示插件(实例分享)
Apr 28 jQuery
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
jquery append与appendTo方法比较
May 24 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 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接口和抽象类使用示例详解
2014/03/02 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
PHP简单获取视频预览图的方法
2015/03/12 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
JavaScript 格式字符串的应用
2010/03/29 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
django解决跨域请求的问题详解
2019/01/20 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
linux面试题参考答案(9)
2016/01/29 面试题
农林环境专业求职信
2014/03/13 职场文书
人资专员岗位职责
2014/04/04 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js
java泛型通配符详解
2021/07/25 Java/Android
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python