asp.net Swiper 轮播动画

原文：https://blog.csdn.net/qq_39656138/article/details/90451289

官网：https://www.swiper.com.cn/api/index.html

备注：动态数据一定需要先加载完数据再加载控件

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="lunbo.aspx.cs" Inherits="Default3" %>

 

<!DOCTYPE html>

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <title></title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>

    <script src="jquery-1.8.3/jquery.min.js"></script>

    <script>

        $.ajax({

            type: "post",

            dataType: 'json',

            url: 'lunbo.aspx/getImgUrl',

            data: '',

            dataType: "json",

            contentType: "application/json",

            success: function (obj) {

                function FunData(Data) {

                    var proportion = 7;

                    var num = 0;

                    var arr1 = [];

                    for (var i = 0; i < Data.length; i++) {

                        if (i % proportion == 0 && i != 0) {

                            arr1.push(Data.slice(num, i));

                            num = i;

                        }

                        if ((i + 1) == Data.length) {

                            arr1.push(Data.slice(num, (i + 1)));

                        }

                    }

                    return arr1;

                }

                //console.log(FunData(obj.d));

                var sumarr = FunData(obj.d);

                //console.log(sumarr);

                var singlearr;

                for (i = 0; i < sumarr.length; i++) {

 

                     singlearr = sumarr[i];

                     var k = 2;

                     var v = 3;

                     $.each(sumarr, function (k, v) {

                         var imgUrl = singlearr[k];

                         var linkUrl = singlearr[v];

 

                    })

                     var t = "<div class='swiper-slide'><a href=" + singlearr[3] + " > <img src=" +

                     singlearr[2] + " target='_blank'  /></a></div>";

                     $('.swiper-wrapper').append(t)

 

                }

                var swiper = new Swiper('.swiper-container', {

                    spaceBetween: 30,

                    autoplay: {

                        delay: 3000,

                        disableOnInteraction: false,

                    },

                    loop: true,

                    paginationType: 'custom',

                    pagination: {

                        el: '.swiper-pagination',

                        clickable: true,

 

                    }

 

                });

                swiper.el.onmouseover = function () { //鼠标放上暂停轮播

                    swiper.autoplay.stop();

                }

                swiper.el.onmouseleave = function () {

                    swiper.autoplay.start();

                }

             

 

 

            },

            error: function () {

                alert("頁面信息有誤！！！");

            }

 

        })

    </script>

    <style>

        .swiper-container {

             518px;

            height: 116px;

            margin: 60px auto;

        }

 

        .swiper-slide {

             518px;

            height: 116px;

            text-align: center;

            font-size: 18px;

            background: #fff;

        }

 

            .swiper-slide img {

                display: block;

                 100%;

                max- 100%;

                height: auto;

            }

 

        .swiper-pagination {

             100%;

            height: 14px;

            bottom: 20px;

            left: 0;

             100%;

        }

    </style>

</head>

<body>

 

    <div class="swiper-container">

        <div class="swiper-wrapper">

           <%-- <div class="swiper-slide">

                <img src="img/shouban1.jpg" />

            </div>

            <div class="swiper-slide">

                <img src="img/shhouban2.jpg" />

            </div>

            <div class="swiper-slide">

                <img src="img/shouban3.jpg" />

            </div>

            <div class="swiper-slide">

                <img src="img/shouban4.jpg" />

            </div>

            <div class="swiper-slide">

                <img src="img/renwu5.jpg" />

            </div>

 

            <div class="swiper-slide"><a href="#">

                <img src="" /></a></div>

--%>

 

 

        </div>

        <!-- Add Pagination -->

        <div class="swiper-pagination"></div>

    </div>

</body>

</html>

View Code

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Data.SqlClient;

using System.Web.Services;

 

public partial class Default3 : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {



    }

//    [WebMethod]

//    public static object getImgUrl()

//    {

//        SqlConnection conn = new SqlConnection(@"server=sh-db-16;database=Web;uid=DB04DTSLink;pwd=db04dts#1234;");

//        conn.Open();

//        SqlCommand cmd = new SqlCommand(@"SELECT TOP (5) pid, imgname, picurl, linkurl, indate, enddate, frequency 

//                FROM dbo.pic  WHERE     (enddate >= GETDATE()) AND (indate <= GETDATE()) ORDER BY indate DESC;", conn);

//        object obj = cmd.ExecuteScalar();

 

//        return obj;

//    }

 

    [WebMethod]

    public static object getImgUrl()

    {

        SqlConnection conn = new SqlConnection(@"server=sh-db-16;database=Web;uid=DB04DTSLink;pwd=db04dts#1234;");

        conn.Open();

        string sql = @"SELECT TOP (5) pid, imgname, picurl, linkurl, indate, enddate, frequency 

            FROM dbo.pic  WHERE     (enddate >= GETDATE()) AND (indate <= GETDATE()) ORDER BY indate DESC";

        try { 

             SqlDataAdapter sdr = new SqlDataAdapter(sql, conn);

             DataSet ds = new DataSet();

             sdr.Fill(ds, "ds");

             DataTable dt = ds.Tables[0];



             string[,] strArr = new string[ds.Tables[0].Rows.Count, ds.Tables[0].Columns.Count];

             for (int i = 0; i < ds.Tables[0].Rows.Count; i++)

             {

                 for (int j = 0; j < ds.Tables[0].Columns.Count;j++ ) { 

                 

                  strArr[i,j] = ds.Tables[0].Rows[i][j].ToString();

                 }

             }

            

             return strArr;

            

        }

        catch(SqlException ex) {

            throw new Exception(ex.Message);

        }

       

    }

 

 

}

View Code