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插件制作 自增长输入框实现代码
Aug 17 jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jQuery tip提示插件(实例分享)
Apr 28 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 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
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
javascript 精粹笔记
2010/05/09 Javascript
javascript preload&amp;lazy load
2010/05/13 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
使用ECharts实现状态区间图
2018/10/25 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
vue绑定class的三种方法
2020/12/24 Vue.js
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python的函数的一些高阶特性
2015/04/27 Python
Python中字符串List按照长度排序
2019/07/01 Python
python getpass实现密文实例详解
2019/09/24 Python
python爬虫添加请求头代码实例
2019/12/28 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
设备售后服务承诺书
2014/05/30 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
六年级情感作文之500字
2019/10/23 职场文书
对PyTorch中inplace字段的全面理解
2021/05/22 Python
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis