asp.net Swiper 轮播动画
2024-10-07 11:00:50
原文: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 = ; var num = ; var arr1 = []; for (var i = ; i < Data.length; i++) { if (i % proportion == && i != ) { arr1.push(Data.slice(num, i)); num = i; } if ((i + ) == Data.length) { arr1.push(Data.slice(num, (i + ))); } } return arr1; } //console.log(FunData(obj.d)); var sumarr = FunData(obj.d); //console.log(sumarr); var singlearr; for (i = ; i < sumarr.length; i++) { singlearr = sumarr[i]; var k = ; var v = ; $.each(sumarr, function (k, v) { var imgUrl = singlearr[k]; var linkUrl = singlearr[v]; }) var t = "<div class='swiper-slide'><a href=" + singlearr[] + " > <img src=" + singlearr[] + " target='_blank' /></a></div>"; $('.swiper-wrapper').append(t) } var swiper = new Swiper('.swiper-container', { spaceBetween: , autoplay: { delay: , 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: %; max-width: %; height: auto; } .swiper-pagination { width: %; height: 14px; bottom: 20px; left: ; width: %; } </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>
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[]; string[,] strArr = new string[ds.Tables[].Rows.Count, ds.Tables[].Columns.Count]; for (int i = ; i < ds.Tables[].Rows.Count; i++) { for (int j = ; j < ds.Tables[].Columns.Count;j++ ) { strArr[i,j] = ds.Tables[].Rows[i][j].ToString(); } } return strArr; } catch(SqlException ex) { throw new Exception(ex.Message); } } }
最新文章
- JavaWeb的国际化
- 一个简单实用的css loading图标
- JS 日期格式化
- [No00004A]为什么你看了很多书,却依然没有洞见
- smartjs - DataManager API
- Union与union all区别
- SRAM与SDRAM的区别
- 在winform程序中实现按照不同的角色或用户展现不同的页面
- vnc server配置、启动、重启与连接,图形管理linux系统
- 于ubuntu-kylin14.10下一个,无法使用apt-get具( libc6-i386 : 赖: libc6 (= 2.15-0ubuntu10.5) 但 2.19-0ubuntu6 一个已)
- dom操作js
- 使用ichartjs生成图表
- BATCH+VBS脚本自动执行命令
- C# 控件
- 小数据池 id
- go语言之行--简介与环境搭建
- Bootstrap 各种进度条详解
- FFMpeg开发使用
- eclipse 关闭web项目无用校验
- Linux重启mysql Error getting authority: Error initializing authority: Could not connect: Resource temporarily unavailable (g-io-error-quark, 27)