js效果banner全屏轮播

最新推荐文章于 2021-08-28 11:46:04 发布

易辰_

最新推荐文章于 2021-08-28 11:46:04 发布

阅读量3.6k

点赞数

分类专栏： Js

本文链接：https://blog.csdn.net/u013210620/article/details/81569333

版权

Js 专栏收录该内容

12 篇文章

订阅专栏

- - 修改自Swiper
  - 修改自SuperSlide

轮播图参考插件如下：
SuperSlide
http://www.superslide2.com/
Swiper
https://www.swiper.com.cn/
PageSwitch
https://github.com/qiqiboy/pageSwitch

今天我就从项目中抽出2个简单的示例
我只贴出来html的部分，另外的图片、样式、js文件去下载即可
戳这里下载戳这里下载

修改自Swiper

这里写图片描述

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="css/swiper.min.css">

    <!-- Demo styles -->
    <style>
        html, body {
        position: relative;
        height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 100%;
            /*height: 100%;*/
            height: 250px;

        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-wrapper img {
            width: 100%;
            height: 250px;
        }
    </style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container swiper-container-horizontal">
    <div class="swiper-wrapper" style="transform: translate3d(-0px, 0px, 0px); transition-duration: 0ms;">
        <div class="swiper-slide" style="width: 1279px; margin-right: 30px;"><img src="images/b-1.png"></div>
        <div class="swiper-slide" style="width: 1279px; margin-right: 30px;"><img src="images/b-2.png"></div>
        <div class="swiper-slide" style="width: 1279px; margin-right: 30px;"><img src="images/b-3.png"></div>
        <div class="swiper-slide" style="width: 1279px; margin-right: 30px;"><img src="images/b-1.png"></div>
        <div class="swiper-slide" style="width: 1279px; margin-right: 30px;"><img src="images/b-2.png"></div>
        <div class="swiper-slide swiper-slide-prev" style="width: 1279px; margin-right: 30px;"><img
                src="images/b-3.png"></div>
        <div class="swiper-slide swiper-slide-active" style="width: 1279px; margin-right: 30px;"><img
                src="images/b-1.png"></div>
        <div class="swiper-slide swiper-slide-next" style="width: 1279px; margin-right: 30px;"><img
                src="images/b-2.png"></div>
        <div class="swiper-slide" style="width: 1279px; margin-right: 30px;"><img src="images/b-3.png"></div>
        <div class="swiper-slide" style="width: 1279px; margin-right: 30px;"><img src="images/b-1.png"></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
        <span class="swiper-pagination-bullet"></span>
        <span class="swiper-pagination-bullet"></span>
        <span class="swiper-pagination-bullet"></span>
        <span class="swiper-pagination-bullet"></span>
        <span class="swiper-pagination-bullet"></span>
        <span class="swiper-pagination-bullet"></span>
        <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
        <span class="swiper-pagination-bullet"></span>
        <span class="swiper-pagination-bullet"></span>
        <span class="swiper-pagination-bullet"></span></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

<script src="js/swiper.min.js"></script>

<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: 2500,
        autoplayDisableOnInteraction: false,
        loop: true
    });
</script>

</body>
</html>

修改自SuperSlide

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <script type="text/javascript" src="js/jquery1.42.min.js"></script>
    <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>

    <style>

         /*css 重置*/
        *{margin:0; padding:0; list-style:none; }
        body{ background:#fff; font:normal 12px/22px 宋体;  }
        img{ border:0;  }
        a{ text-decoration:none; color:#333;  }

        /* 本例子css */
        .slideBox{ width:100%; height:300px; overflow:hidden; position:relative; border:1px solid #ddd;  }
        .slideBox .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; }
        .slideBox .hd ul{ overflow:hidden; zoom:1; float:left;  }
        .slideBox .hd ul li{ float:left; margin-right:2px;  width:15px; height:15px; line-height:14px; text-align:center; background:#fff; cursor:pointer; }
        .slideBox .hd ul li.on{ background:#f00; color:#fff; }
        .slideBox .bd{ position:relative; height:100%; z-index:0;   }
        .slideBox .bd li{ zoom:1; vertical-align:middle; }
        .slideBox .bd img{ width:100%; height:300px; display:block;  }

        /* 下面是前/后按钮代码，如果不需要删除即可 */
        .slideBox .prev,
        .slideBox .next{ position:absolute; left:3%; top:50%; margin-top:-25px;
        display:block; width:32px; height:40px; background:url(images/1.png) -110px 5px no-repeat;
        filter:alpha(opacity=50);opacity:0.5;   }
        .slideBox .next{ left:auto; right:3%; background-position:8px 5px; }
        .slideBox .prev:hover,
        .slideBox .next:hover{ filter:alpha(opacity=100);opacity:1;  }
        .slideBox .prevStop{ display:none;  }
        .slideBox .nextStop{ display:none;  }

    </style>
</head>
<body>


<div id="slideBox" class="slideBox">
<div class="hd">
<ul>
<li class="">1</li>
<li class="">2</li>
<li class="on">3</li></ul>
</div>
<div class="bd">
<ul>
<li style="display: none;"><a href="" target="_blank"><img src="images/b-1.png"></a></li>
<li style="display: none;"><a href="" target="_blank"><img src="images/b-2.png"></a></li>
<li style="display: list-item;"><a href="" target="_blank"><img src="images/b-3.png"></a></li>
</ul>
</div>

<!-- 下面是前/后按钮代码，如果不需要删除即可 -->
<a class="prev" href="javascript:void(0)"></a>
<a class="next" href="javascript:void(0)"></a>
</div>

<script>

     jQuery(".slideBox").slide({
            mainCell:".bd ul",
            autoPlay:true,
            delayTime:2000,
            interTime:4000
        });
</script>

</body>
</html>