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本身的特性更改成无限循环 ...
随机推荐
- 分布式事务 GTS 的价值和原理浅析
GTS 今年双 11 的成绩 今年 2684 亿的背后,有一个默默支撑,低调到几乎被遗忘的中间件云产品——GTS(全局事务服务,Global Transaction Service),稳稳地通过了自 ...
- Bugku 杂项 猜
猜 说flag是一个人名字的全拼,直接搜图片
- 【CF1237D】Balanced Playlist（set，二分，线段树）
题意:给定一个n首歌的播放列表,第i首的值为a[i],听完第i首会回到第1首 现在从每首开始往下,记录听过的最大值,如果当前听的值严格小于听过最大值的一半则停止 问从每首歌开始往下听能听几首,不会停止 ...
- http协议的深刻理解
https://www.cnblogs.com/mayite/p/9095986.html
- SpringCloud 教程 （六）断路器聚合监控(Hystrix Turbine)
一.Hystrix Turbine简介 看单个的Hystrix Dashboard的数据并没有什么多大的价值,要想看这个系统的Hystrix Dashboard数据就需要用到Hystrix Turbi ...
- XML的基础之一(概念和语法)
XML的基础(概念和语法) xml html 概念 异同 XML全称为extensible markup language,即可扩展标记语言,简单理解为可预定义标签的编程语言.它与HTML(超文本标 ...
- Window7 系统下重新建立一个新分区
为了方便使用,准备在原来分区上再分割出一个分区,步骤如下 首先右击计算机,选择管理打开计算机管理窗口,选择磁盘管理,当前窗口右侧会出现当前计算机所有已存在的分区列表. 选择要进行分区的磁盘,右击选择压 ...
- MySQL主从复制之异步模式
MySQL主从复制有异步模式.半同步模式.GTID模式以及多源复制模式,MySQL默认模式是异步模式.所谓异步模式,只MySQL 主服务器上I/O thread 线程将二进制日志写入binlog文件之 ...
- SpringBoot设置SORS的几种方式
1. 原生支持 Application 启动类添加以下代码: import org.springframework.context.annotation.Bean;import org.springf ...
- Maven的一些常用命令
将本项目的源码部署到本地仓库 mvn clean source:jar install 将本地jar包部署到本地仓库,首先将jar包放在当前目录下,然后执行,这样做比直接把jar包copy到本地仓库更 ...