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本身的特性更改成无限循环 ...
随机推荐
- sqlserver数据库脱机和分离的区别
脱机和分离的区别: 分离和脱机都可以使数据库不能再被使用,但是分离后需要附加才能使用,而脱机后只需联机就可以用了. 附加数据库报错: 无法打开物理文件 XXX.mdf".操作系统错误 5:& ...
- 6398. 【NOIP2018模拟10.30】Generator（树状数组区间修改）
题目描述 Description Input Output 输出 q 行,第 i 行表示数据 Di 的答案. Sample Input 4 3 2 1 1 2 4 2 1 2 1 1 3 5 2 2 ...
- 微信小程序支付功能讲解
前言:虽然小程序做过很多,但是一直觉得微信支付功能很是神秘,现在终于有机会接触心里还是有点小激动的,经过一番折腾发现支付也不过如此,在此记录下支付功能的实现过程 小程序的官方文档介绍到发起微信支付即调 ...
- codevs 4064 组合 x
很久之前发过啦~不过删掉了...再发一下 4064 组合 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 组合就 ...
- 详解HASH(字符串哈希)
HASH意为(散列),是OI的常用算法. 我们常用哈希的原因是,hash可以快速(一般来说是O(段长))的求出一个子段的hash值,然后就可以快速的判断两个串是否相同. 今天先讲string类的has ...
- Java实体类之间的映射（多对多关系）
多对对的映射,可以用学生和课程进行演示.一个学生可以选择多个课程,一个课程又对应了多个学生 定义学生类 class Stu{ private String name; private String n ...
- TreeSet 源码分析
TreeSet 1)底层由 TreeMap 支持的 Set 接口实现,Set 中的元素按照自然顺序或指定的比较器排序. 创建实例 /** * 支持此 Set 的底层的 TreeMap 对象 */ pr ...
- django中自定义404错误页面
自定义404页面,如下5个步骤:1)使用自定义的404页面,必须在setting文件修改DEBUG = False(即关闭debug调试模式)2)必须在setting文件修改ALLOWED_HOSTS ...
- @TableLogic表逻辑处理注解（逻辑删除）
在字段上加上这个注解再执行BaseMapper的删除方法时,删除方法会变成修改 例: 实体类: @TableLogic private Integer del; service层: 调用Ba ...
- 008-elasticsearch5.4.3【二】ES使用、ES客户端、索引操作【增加、删除】、文档操作【crud】
一.ES使用,以及客户端 1.pom引用 <dependency> <groupId>org.elasticsearch.client</groupId> < ...