asp.net Swiper 轮播动画
原文:https://blog.csdn.net/qq_39656138/article/details/90451289
官网:https://www.swiper.com.cn/api/index.html
备注:动态数据一定需要先加载完数据再加载控件
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<%@ 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 { width: 518px; height: 116px; margin: 60px auto; } .swiper-slide { width: 518px; height: 116px; text-align: center; font-size: 18px; background: #fff; } .swiper-slide img { display: block; width: 100%; max-width: 100%; height: auto; } .swiper-pagination { width: 100%; height: 14px; bottom: 20px; left: 0; width: 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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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); } } }