复习用jQuery写轮播图
2020-07-13 04:51
344 查看
有一段时间没有用jQuery写轮播图 今天写一下 当做复习
只是来回顾学习内容 个人记录 大神勿喷
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>猫咪博客</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--手动引入bootstra.min.css文件--> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 --> <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 --> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> 用来兼容ie8 <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]--> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) --> <script src="js/jquery-1.11.1.min.js"></script> <!--引入jquery.js文件--> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="js/bootstrap.min.js"></script> <!--引入bootstrap.js文件--> <style> /*去掉默认浏览器样式*/ *{ margin: 0; padding: 0; } /*去掉li标签默认样式*/ li{ list-style: none; } /*最外层盒子样式处理: 1.设置与轮播图高宽一致 2.设置纵向距顶部50px,水平居中 3.设置自己为固定位置 */ .outer{ height: 470px; width: 590px; margin: 50px auto; position:relative; } /*轮播图片集合处理: 1.将其设置为脱离文档流 2.设置距顶部和左侧都为0 */ .img li{ position: absolute; top: 0; left: 0; } /*顺序按钮区域处理: 1.设置脱离文档流 2.通过设置text-align、width使其整体水平居中 3.设置距离底部20px */ .num{ position: absolute; text-align: center; width: 100%; bottom: 20px; } /*顺序按钮处理: 1.将其设置为行级及块级兼容显示 2.设置其宽高 3.设置背景色及字体颜色 4.设置字体水平居中 5.通过设置line-height与height一致,使其字体纵向居中 6.设置其样式为圆形 7.增加按钮左右间距 */ .num li{ display: inline-block; width: 20px; height: 20px; background-color: darkgray; color: white; text-align: center; line-height: 20px; border-radius: 50%; margin: 0 20px; } /*左、右按钮相同部分处理: 1.设置其脱离文档流 2.设置其宽高 3.设置背景色及字体颜色 4.设置字体水平居中 5.通过设置line-height与height一致,使其字体纵向居中 6.通过设置top、margin-top使其整体纵向居中 7.默认不显示 */ .btn{ position: absolute; width: 20px; height: 50px; background-color: darkgray; color: white; text-align: center; line-height: 50px; top: 50%; margin-top: -25px; display: none; } /*左侧按钮处理: 设置左侧为0 */ .left_btn{ left: 0; } /*右侧按钮处理: 设置右侧为0 */ .right_btn{ right: 0; } /*鼠标悬浮至轮播图区域时左、右按钮处理: 1.设置左右按钮显示样式为行级块级兼容 2.设置鼠标放置在左右按钮时样式为小手 */ .outer:hover .btn{ display: inline-block; cursor: pointer; } /*设置顺序按钮初始按钮样式: 设置为红色(由于样式级别问题会导致设置无效,可通过两种方式解决: 1.后面加上!important 2.将css定位写详细,比如:.outer .num .current{…… ) */ .current{ background-color: red!important; } </style> </head> <body> <div class="outer"> <ul class="img"> <li><a><img src="./img/q.jpg" class="img-responsive" alt="Responsive image"></a></li> <li><a><img src="./img/w.jpg" class="img-responsive" alt="Responsive image"></a></li> <li><a><img src="./img/e.jpg" class="img-responsive" alt="Responsive image"></a></li> <li><a><img src="./img/r.jpg" class="img-responsive" alt="Responsive image"></a></li> </ul> <ul class="num"> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <div class="left_btn btn"><</div> <div class="right_btn btn">></div> </div> <script src="./js/jquery-1.11.1.min.js"></script> <script> /*定义位置:由于图片个数与下侧顺序按钮数量一致,可通过位置进行关联*/ var index=0; /*当鼠标放到顺序按钮上时: 1.将当前这个顺序按钮增加样式为红色背景 2.移除周围其他同级元素红色背景样式 3.获取当前顺序按钮的index 4.通过index获取该位置图片 5.一秒钟渐入该图片 6.一秒钟渐出其他相邻图片 7.防止移动过快导致的效果闪现,使用stop方法 */ $(".num li").mousemove(function () { $(this).addClass("current").siblings().removeClass("current"); index=$(this).index(); $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000); }); /*设置每一秒钟自动轮播: 1.获取当前位置序号:自加操作;当超过图片最大序号时序号设置为0 2.设置下侧顺序按钮及轮播图显示 */ var time=setInterval(move,1000); function move() { index++; if (index==4){ index=0 } $(".num li").eq(index).addClass("current").siblings().removeClass("current"); $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000); }; /*当鼠标划入、划出轮播图区域时: 1.划入时停止自动轮播 2.划出时继续自动轮播 */ $(".outer").hover(function () { clearInterval(time); }, function () { time=setInterval(move,1000); }); /*点击右侧按钮时执行*/ $(".right_btn").click(function () { move(); }); /*点击左侧按钮时执行*/ function moveL() { index--; if (index==-1){ index=3 } $(".num li").eq(index).addClass("current").siblings().removeClass("current"); $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000); } $(".left_btn").click(function () { moveL(); }); </script>
相关文章推荐
- web前端复习(一):jquery实现轮播
- 用jQuery实现圆点图片轮播效果
- 基于jquery的图片轮播 tab切换组件
- jquery实现简单的图片轮播
- 纯jQuery实现网页轮播图
- jQuery轻量级响应式图片轮播插件ResponsiveSlides.js(仅1kb)
- jquery轮播图带左右箭头
- 第一篇博文:用jQuery实现商城页面自动轮播图的开发
- 用jquery动画实现的简单的图片轮播
- BOM模型;循环定时器;轮播图;jQuery语法及选择器 Day_04
- jQuery滚动轮播插件onepage-scroll
- 复习jquery 笔记 版本1.2.1,jquery in action 总结细节
- JQuery【图片轮播2】
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
- 常见的轮播图(jQuery)
- jQuery手动点击实现图片轮播特效
- 最最最简单的轮播图(JQuery)
- jQuery实现轮播效果(一) - 基础
- jQuery文字轮播特效
- 使用Jquery实现图片轮播效果