jquery实现淡入淡出轮播图效果


Posted in jQuery onDecember 13, 2020

本文实例为大家分享了jquery实现淡入淡出轮播图的具体代码,供大家参考,具体内容如下

如题所述,直接上代码

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<style>
 * {
 padding: 0px;
 margin: 0px;
 }

 /* 盒子 */
 .box {
 position: relative;
 }

 /* banner图 */
 .box,
 .banner {
 width: 1000px;
 height: 500px;
 margin: 50px auto;
 }

 .box .banner {
 position: relative;
 list-style: none;
 }

 .banner li {
 display: none;
 }

 .box ul li img {
 position: absolute;
 }

 .banner .b1 {
 display: block;
 }

 span {
 background: rgb(0, 0, 0, 0.5);
 width: 40px;
 height: 50px;
 display: block;
 position: absolute;
 left: 0px;
 top: 50%;
 z-index: 3;
 line-height: 50px;
 text-align: center;
 cursor: pointer;
 font-family: "宋体";
 font-size: 20px;
 color: white;
 }

 .right {
 left: auto;
 right: 0px;
 }

 .bottom {
 position: absolute;
 bottom: 10px;
 left: 50%;
 transform: translateX(-50%);
 list-style: none;
 }

 .bottom li {

 width: 10px;
 height: 10px;
 background: rgb(255, 255, 255);
 float: left;
 border-radius: 50%;
 margin: 0px 5px;
 /* 重影 */
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
 cursor: pointer;
 }

 .bottom .on {
 background: rgb(255, 153, 0);
 }
</style>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

<body>
 <div class="box">
 <!-- 轮播图 -->
 <ul class="banner">
  <li class="b1">
  <img src="../img/timg.jpg" alt="">
  </li>
  <li>
  <img src="../img/timg1.jpg" alt="">
  </li>
  <li>
  <img src="../img/timg2.jpg" alt="">
  </li>
  <li>
  <img src="../img/timg3.jpg" alt="">
  </li>
  <li>
  <img src="../img/timg4.jpg" alt="">
  </li>
 </ul>
 <!-- 左右切换 -->
 <span class="left">
  < </span> <span class="right">>
 </span>
 <!-- 底部按钮 -->
 <ol class="bottom">
  <li class="on"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </ol>
 </div>
</body>
<script>
 var $box = $(".box");
 var $bli = $(".box ul li");
 var $bleft = $(".box .left");
 var $bright = $(".box .right");
 var $dot = $(".box .bottom li");
 var timer = null;
 var num = 0;
 // 因为几行代码一样 所以进行代码封装
 function play() {
 num = num % $bli.length;
 $bli.eq(num).stop().fadeIn(800).siblings().fadeOut(800);
 $dot.eq(num).addClass("on").siblings().removeClass("on");
 }

 function autoplay() {
 timer = setInterval(function () {
  num++;
  play();
 }, 2000);
 };
 autoplay();
 // 当鼠标放上去的时候 计时器停止 移除的时候计时器工作
 // $box.hover(function() {
 // clearInterval(timer); 
 // },function() {
 // autoplay(); 
 // });
 // 下面是同样的效果 另一种写法
 $box.mouseover(function () {
 clearInterval(timer);
 });
 $box.mouseout(function () {
 autoplay();
 });
 $bleft.click(function () {
 num--;
 play();
 });
 $bright.click(function () {
 num++;
 play();
 });
 $dot.click(function (event) {
 var index = $(this).index();
 num = index;
 $bli.eq(num).stop().fadeIn(800).siblings().fadeOut(800);
 $dot.eq(num).addClass("on").siblings().removeClass();
 });
</script>

</html>

其实淡入淡出轮播图的核心思想就是获取到当前的索引,根据索引找出图片的索引然后更改索引达到一个图片显示 其他图片消失 然后轮流交替进行的。最主要的核心思想在上面sibinling()中 通过这个方法让当前元素进行淡入操作但是让其他元素进行淡出操作,所以效果上就形成了,一张张图盘轮流出来的效果。

更多关于轮播的精彩文章,请点击《jquery图片轮播》进行学习

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

jQuery 相关文章推荐
jQuery实现的简单在线计算器功能
May 11 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
jquery实现拖拽小方块效果
Dec 10 #jQuery
jQuery实现简单弹幕制作
Dec 10 #jQuery
JQuery绑定事件四种实现方法解析
Dec 02 #jQuery
jquery实现拖拽添加元素功能
Dec 01 #jQuery
jQuery实现可以扩展的日历
Dec 01 #jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 #jQuery
jQuery实现查看图片功能
Dec 01 #jQuery
You might like
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
DIY实用性框形天线
2021/03/02 无线电
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
JS获取父节点方法
2009/08/20 Javascript
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
JavaScript OOP类与继承
2009/11/15 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
视觉直观感受若干常用排序算法
2017/04/13 Python
答题辅助python代码实现
2018/01/16 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
专科毕业生就业推荐信
2013/11/01 职场文书
婚前财产公证书
2014/04/10 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
医者仁心观后感
2015/06/17 职场文书
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript