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本身的特性更改成无限循环 ...
随机推荐
- 【NOIP2016提高A组8.12】奇袭
题目 由于各种原因,桐人现在被困在Under World(以下简称UW)中,而UW马上要迎来最终的压力测试--魔界入侵. 唯一一个神一般存在的Administrator被消灭了,靠原本的整合骑士的力量 ...
- 【NOIP2012模拟8.20】Memory
题目 话说某一天,CD在爬树的时候发现了树干上有一大串奇怪的符文,于是好奇的CD就从头到尾看了一遍.看完一遍以后CD觉得,最后一段文字好像很眼熟,好像在前面见过.对于CD来说,一开始看到的符文会印象特 ...
- java面向对象复习之一
目的: 复习如何实现代码的逻辑思路: 复习类的封装: 复习类和对象的创建使用和封装: 练习: 实现功能:人到超市买东西 抽出三个类: 人 超市 东西: 功能点: 买: 它们之间的联系:东西包含于超市 ...
- 快速掌握Eclipse Plugin / RCP开发思想
本文转载:https://my.oschina.net/drjones/blog/280337 引言 本文不是快速入门的文章,只面向有一定基础的开发人员,至少看这篇文章之前你应该了解什么是Eclips ...
- mysql CREATE TABLE语句 语法
mysql CREATE TABLE语句 语法 作用:创建数据库中的表. 大理石量具系列 语法:CREATE TABLE 表名称 (列名称1 数据类型,列名称2 数据类型,列名称3 数据类型,.... ...
- php下载文件夹目录下的文件
最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...
- FLASH位宽为8、16、32时，CPU与外设之间地址线的连接方法
转 http://blog.csdn.net/linweig/article/details/5556819 flash连接CPU时,根据不同的数据宽度,比如16位的NOR FLASH (A0-A19 ...
- 使用java操作elasticsearch之与es简历连接
Elasticsearch 的 Java 客户端非常强大:它可以建立一个嵌入式实例并在必要时运行管理任务. 运行一个 Java 应用程序和 Elasticsearch 时,有两种操作模式可供使用.该应 ...
- Broken pipe
出现broken pipe 的一种情况是向socket写数据,但是对端已经关闭socket连接,此时会触发SIGPIPE信号,该信号可以捕获. signal(SIGPIPE, SIG_IGN);
- 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_02 递归_1_递归概念&分类&注意事项
a方法里面调用自己,但是没有停止的条件 方法没有停止的条件. 栈内存溢出的异常. 只有栈,没有堆内存 先执行main方法压栈执行 main方法里面调用a方法.a方法就会压栈 改成20000