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 = ;
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);
}
}
}
asp.net Swiper 轮播动画的更多相关文章
- 微信小程序_(组件)swiper轮播图
微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...
- Swiper轮播手动后不动
最近项目首页轮播图用了Swiper轮播,今天突然发现轮播图动画初始正常但是手动换过之后就不动了,解决方法有两种,具体根据采用的情况为准: 1.autoplayDisableOnInteraction: ...
- jquery-自适应全屏背景轮播动画
实时自适应浏览器窗口大小的全屏背景轮播动画 <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...
- jquery-抖动图组轮播动画
JQ匀速抖动图组轮播动画 一.HTML+CSS <!DOCTYPE html> <html lang="en" xmlns="http://www.w3 ...
- 视频swiper轮播
关于本次文章的内容,实际上是咪咕阅读详情页中的一个前端需求要做的效果,不过比起原需求,此次案例已经被删减掉许多部分了.音频部分舍弃,调用客户端接口舍弃,并做一些整理.最后留下的是这个精简版的案例.方便 ...
- swiper轮播问题之一：轮播图内容为动态数据生成时轮播图无法自动轮播
本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助. 首先,new Swiper的初始化最 ...
- 使用Swiper轮播插件引起的探索
提到Swiper轮播插件,小伙伴们应该不会感到陌生.以前我主要在移动端上使用,PC端使用较少. 注:这里需要注意的是,在PC端和移动端使用Swiper是不同的 官方给的版本有三个,分别是Swiper2 ...
- swiper轮播在ie浏览器上遇到的显示问题探索
前言: 最近项目有一个需求,想要下图效果,鼠标指向头像图片,图片会放大同时上面的轮播会跟着切换: 鼠标移开头像图片,图片变回原来的大小 注:下图是我根据上面需求已经实现的效果,所以截图方便说明 思考: ...
- swiper轮播图（逆向自动切换类似于无限循环）
swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高, ,不过还是能够用swiper本身的特性更改成无限循环 ...
随机推荐
- python补充之进制转换、exec、eval、compile
目录 eval.exec和compile 1.eval函数 2.exec函数 eval()函数和exec()函数的区别 python中的进制转换 eval.exec和compile 1.eval函数 ...
- 【GDOI 2016 Day2】第一题 SigemaGO
题目 分析 拆点连边+spfa. 首先把图分成2lim+1层,也就是每个点拆成2lim+1个点. 如果a和b之间.b和c有一条有向边,那么连边(k,a)-->(k+1,b),(k+1,b)--& ...
- Day_02-Python的分支结构和循环结构
分支结构 应用场景 迄今为止,我们写的Python代码都是一条一条语句顺序执行,这种结构的代码我们称之为顺序结构.然而仅有顺序结构并不能解决所有的问题,比如我们设计一个游戏,游戏第一关的通关条件是玩家 ...
- [洛谷P5106]dkw的lcm：欧拉函数+容斥原理+扩展欧拉定理
分析 考虑使用欧拉函数的计算公式化简原式,因为有: \[lcm(i_1,i_2,...,i_k)=p_1^{q_{1\ max}} \times p_2^{q_{2\ max}} \times ... ...
- 笨办法学Python（learn python the hard way）--练习程序42
下面是练习42,基于python3 #ex42.py 1 class TheThing(object): 2 #__init__为class设置内部变量的方式,正常情况下函数内的变量与外部没有关联,但 ...
- Linux内核调试方法总结之栈帧
栈帧 栈帧和指针可以说是C语言的精髓.栈帧是一种特殊的数据结构,在C语言函数调用时,栈帧用来保存当前函数的父一级函数的栈底指针,当前函数的局部变量以及被调用函数返回后下一条汇编指令的地址.如下图所示: ...
- Tarjan算法整理
众所周知,tarjan是个非常nb的人,他发明了很多nb的算法,tarjan算法就是其中一个,它常用于求解强连通分量,割点和桥等.虽然具体实现的细节不太一样,但是大体思路是差不多的.先来说一下大体思路 ...
- MVC4:ajax Json 应用
1)Json基础 2)Json 字符串和Json对象 3)应用例子 4)JsonHelper 1)Json 基础 JSON中对象通过"{}"来标识,一个"{}" ...
- Oracle数据库文件导出为CSV格式的方法
1 安装PLSQL Developer,并连接Oracle数据库. 2 执行sql语句,将要导出的表格显示出来. select * from table名; 3 如下点击导出查询结果,选择数据格式,即 ...
- lazarus 2016 2月18 4:22:35 支持android开发了， 既ios,linux,macosx,window,web 后 囊括一切啦。 哈哈
Android Development Lazarus for Linux Lazarus for Mac OS X Lazarus for iOS Lazarus for Windows Lazar ...