轮播图-蒲公英云

轮播图

末蓝、 2021-06-10 20:38 730阅读 0赞

方案1
初始化插件：

slides是一款基于jQuery无缝轮播图插件,支持图内元素动画，可以自定义动画类型

html代码

<div class="fullSlide">
                    <div class="bd">
                        <ul>
                            <li>
                                <a href="javascript:void(0)" class="f_pic">
                                    <img src="imageRepository/a94c7cf5-747a-4321-a2a6-f352ba2c5e56.jpg"
                                         tppabs="http://www.jumpower.cn/imageRepository/a94c7cf5-747a-4321-a2a6-f352ba2c5e56.jpg"/>
                                </a>
                                <a href="javascript:void(0)" class="f_title">
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0)" class="f_pic">
                                    <img src="imageRepository/229ed7f5-8744-42c4-a8a4-94926a643707.jpg"
                                         tppabs="http://www.jumpower.cn/imageRepository/229ed7f5-8744-42c4-a8a4-94926a643707.jpg"/>
                                </a>
                                <a href="javascript:void(0)" class="f_title">
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="hd">
                        <ul></ul>
                    </div>
                    <span class="prev"></span>
                    <span class="next"></span>
                </div>

js代码

<script type="text/javascript">
                    $(".fullSlide").hover(function () {
                        //alert("牛逼哥，你现在悬浮");
                            $(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5)
                        },
                        function () {
                            $(this).find(".prev,.next").fadeOut()
                        });
                    $(".fullSlide").slide({
                        titCell: ".hd ul",
                        mainCell: ".bd ul",
                        effect: "fold",
                        autoPlay: true,//是否自动滚动
                        autoPage: true,
                        trigger: "click",
                        interTime: "5" * 1000,
                        startFun: function (i) {
                            var curLi = jQuery(".fullSlide .bd li").eq(i);
                            //console.log(curLi);
                           // curLi.attr("_src","imageRepository/a94c7cf5-747a-4321-a2a6-f352ba2c5e56.jpg")
                            if (!!curLi.attr("_src")) {
                                curLi.css("background-image", curLi.attr("_src")).removeAttr("_src")
                            }
                        }
                    });
                </script>

方案二使用Swiper

Swiper常用于移动端网站的内容触摸滑动
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
从官方中copy过来的Demo,有兴趣可以看看，里面包括了js和css 传送门

首先需要引入相应的css和Js

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">  
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">    
<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>  
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>

代码如下

<!DOCTYPE html>
<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="../package/swiper-bundle.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%;
    }
    .swiper-slide {
      background-position: center;
      background-size: cover;
    }
  </style>
</head>
<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-image:url(./images/nature-1.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(./images/nature-2.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(./images/nature-3.jpg)"></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination-white"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next swiper-button-white"></div>
    <div class="swiper-button-prev swiper-button-white"></div>
  </div>
  <!-- Swiper JS -->
  <script src="../package/swiper-bundle.min.js"></script>
  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      spaceBetween: 30,
      effect: 'fade',
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>
</body>
</html>