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本身的特性更改成无限循环 ...
随机推荐
- 6389. 【NOIP2019模拟2019.10.26】小w学图论
题目描述 题解 之前做过一次 假设图建好了,设g[i]表示i->j(i<j)的个数 那么ans=∏(n-g[i]),因为连出去的必定会构成一个完全图,颜色互不相同 从n~1染色,点i的方案 ...
- Django模板自定义标签和过滤器，模板继承（extend），Django的模型层
上回精彩回顾 视图函数: request对象 request.path 请求路径 request.GET GET请求数据 QueryDict {} request.POST POST请求数据 Quer ...
- layer.confirm
layer.confirm('确定不选择花车?', { title: false, btn: ['确定','取消'] //按钮 }, function(ind){ layer.close(ind); ...
- 最短路（模板）【CodeChef CLIQUED，洛谷P3371】
自TG滚粗后咕咕咕了这么久,最近重新开始学OI,也会慢慢开始更博了.... 最短路算法经典的就是SPFA(Bellman-Ford),Dijkstra,Floyd: 本期先讲两个经典的单源最短路算法: ...
- 【bzoj3998】[TJOI2015]弦论
题目描述: 对于一个给定长度为N的字符串,求它的第K小子串是什么. 样例输入: aabc 0 3 样例输出: aab 题解: 构造后缀自动机,然后在后缀自动机上跑dfs 代码: #include &l ...
- 小程序封装wx.request，以及调用
1.新建一个api目录,与pages同级 2.在api目录下新建一个api.js文件 3.编写代码 const host = 'http://test.test.cn' const wxRequest ...
- 年薪100万的人都是怎么玩Excel的？
年薪100万的人都是怎么玩Excel的? 2017-12-21 13:42美国 作者:珍妮Jenny 来源:一周进步(ID:weekweekup) 本文已获原作者转载授权,如需转载请联系原公号 本文重 ...
- MySQL高可用方案 MHA之四 keepalived 半同步复制
主从架构(开启5.7的增强半同步模式)master: 10.150.20.90 ed3jrdba90slave: 10.150.20.97 ed3jrdba97 10.150.20.132 ...
- wow64 32位进程中切换64位模式,取回64位寄存器值
32位dbg中编辑的: 7711E9D3 | 6A | | 7711E9D5 | E8 | 7711E9DA | | | 7711E9DE | CB | ret far | 6A E8 CB 64位d ...
- 我的常用的Linux命令
环境:centos7 主要应用Linux命令是为了搭建环境,所以记录一下我的常用的Liunx命令 一.常用目录.文件操作命令 1.显示目录列表命令 ls 显示当前目录下的可见文件 ls - ...