三种方式实现banner图的轮播（jq实现淡入淡出、jq实现层级轮播、js面向对象实现无缝轮播）

最新推荐文章于 2021-11-15 23:04:33 发布

ZHANGJIN9546

最新推荐文章于 2021-11-15 23:04:33 发布

阅读量1.1k

点赞数 1

分类专栏：案例文章标签：三种方式实现banner图的轮播（jq实现淡入淡出、jq实现层级轮播、

本文链接：https://blog.csdn.net/ZHANGJIN9546/article/details/93997909

版权

本文介绍了三种实现Banner图轮播的方法：使用jQuery实现淡入淡出效果，利用jQuery实现层级轮播，以及用JavaScript实现无缝轮播。每种方法详细阐述了实现思路，包括设置定时器自动播放，以及通过小圆标控制鼠标悬停时的图片显示。

摘要由CSDN通过智能技术生成

三种方式实现banner图的轮播（jq实现淡入淡出、jq实现层级轮播、js实现无缝轮播）

//1、jq实现淡入淡出

思路：
a、使用JQ库里面的.fadeIn()\fadeOut()方法
**fadeIn()?*使用淡入效果来显示一个隐藏的元素
**fadeOut()?*使用淡出效果来隐藏一个元素
b、设置一个定时器，用于banner图的自动播放
c、对下面小圆标设置mouseenter、mouseout事件，当鼠标移入，计时器停止，图片显示区显示对应的图片

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        ul,ol{ list-style: none;}
        .wrapper{
            width: 670px;
            height: 240px;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }
        ul{
        	position:relative;
        }
        ul li{
        	position:absolute;
        	top:0;
        	left:0;
        }
        ol{
            position: absolute;
            right: 0;
            bottom: 10px;
            width: 190px;
        }
        ol li{
            float: left;
            width: 20px;
            height: 20px;
            margin: 0 5px;
            text-align: center;
            border-radius: 50%;
            cursor: default;
            background-color: #abc;
        }
        ol li.current{
            background-color: pink;
        }
    </style>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
    <div class="wrapper">
        <ul>
            <li style="z-index: 6;"><img src="images/1.jpg" alt=""/></li>
            <li style="z-index: 5;"><img src="images/2.jpg" alt=""/></li>
            <li style="z-index: 4;"><img src="images/3.jpg" alt=""/></li>
            <li style="z-index: 3;"><img src="images/4.jpg" alt=""/></li>
            <li style="z-index: 2;"><img src="images/5.jpg" alt=""/></li>
            <li style="z-index: 1;"><img src="images/6.jpg" alt=""/></li>

最低0.47元/天解锁文章

ZHANGJIN9546

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
三种方式实现banner图的轮播（jq实现淡入淡出、jq实现层级轮播、js面向对象实现无缝轮播）

三种方式实现banner图的轮播（jq实现淡入淡出、jq实现层级轮播、js实现无缝轮播）//1、jq实现淡入淡出思路：a、使用JQ库里面的.fadeIn()\fadeOut()方法**fadeIn()
复制链接

扫一扫

专栏目录