C#跑马灯，图片滚动，后台获取图片地址。动态绑定图片，imag显示文字
下面附下载地址。 http://download.csdn.net/download/njxiaogui/10002058
1、跑马灯效果，图片连续循环滚动，图片下面并可附文字描述，图片是从数据库中获取的 ，亲自测试，保证好使。
Default.aspx 代码：
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title>jQuery&#;&#;&#;&#;&#;&#;&#;&#;&#; - &#;&#;&#;&#;</title>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script src="js/jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
<script>
$(function () {
var _scroll = {
delay: ,
easing: 'linear',
items: ,
duration: 0.07,
timeoutDuration: ,
pauseOnHover: 'immediate'
};
$('#ticker-1').carouFredSel({
width: ,
align: false,
items: {
width: 'variable', visible:
},
scroll: _scroll
}); $('#ticker-2').carouFredSel({
width: ,
align: false,
circular: false,
items: {
width: 'variable',
height: ,
visible:
},
scroll: _scroll
}); // set carousels to be 100% wide
$('.caroufredsel_wrapper').css('width', '100%'); // set a large width on the last DD so the ticker won't show the first item at the end
$('#ticker-2 dd:last').width();
});
</script>
<style type="text/css">
html, body {
height: %;
padding: ;
margin: ;
}
body {
min-height: 300px;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #;
line-height: 22px;
} #wrapper {
width: %;
margin: -100px ;
position: absolute;
left: ;
top: %;
}
#wrapper h3 {
font-size: 20px;
text-align: center;
} #wrapper > div.first {
border-bottom: none;
} #wrapper dl {
display: block;
margin: ;
}
#wrapper dt, #wrapper dd {
display: block;
float: left;
margin: 5px;/*--空间距--*/
padding: 0px 0px;/*--空间距--*/
}
#wrapper dt {
background-color: #f66;
color: #fff;
}
#wrapper dd {
color: #;
margin-right: 0px;/*--空间距--*/
} code {
font-style: italic;
} #donate-spacer {
height: %;
}
#donate {
border-top: 1px solid #;
width: 750px;
padding: 50px 75px;
margin: auto;
overflow: hidden;
}
#donate p, #donate form {
margin: ;
float: left;
}
#donate p {
width: 550px;
}
#donate form {
width: 100px;
} </style>
</head>
<body> <div id="wrapper"> <div class="first"> <dl id="ticker-1"> <asp:Literal ID="Literal2" runat="server"></asp:Literal> </dl> </div> </div> </body>
</html>
Default.aspx.cs代码：
if (!IsPostBack)
{
DataSet ds_lb = jlbll.GetList(" bz3 is not null");
if (ds_lb.Tables[].Rows.Count > )
{
for (int i = ; i < ds_lb.Tables[].Rows.Count; i++)
{
Literal2.Text += "<dd><li> <a href='Journalism_Read.aspx?id=" + ds_lb.Tables[].Rows[i]["bz3"].ToString() + "' title='" + ds_lb.Tables[].Rows[i]["username"].ToString() + "' target='_blank'>";
Literal2.Text += " <img src='images/" + ds_lb.Tables[].Rows[i]["bz3"].ToString() + "' width='200' height='200'></a><span style='display:block;text-align:center;' >fdffff</span>";
Literal2.Text += "</li></dd>";
}
}
}
跑马灯效果图：
2 、图片滑动效果，显示一个图片后在自动显示另一个图片，轮询播放图片
Default2.aspx代码：
<html>
<head>
<meta charset="utf-8"> <title>大庆环保局</title> <script type="text/javascript" src="js/jquery-1.8.0.js"></script> <%--左右轮播 新闻--%> <%--从右到左轮播 图片4个和一个图片的轮播--%>
<script src="js/jquery.bxslider.js"></script> <%--紧急通知--%> <script> jQuery(function ($) { $('#lb2').bxSlider({
slideWidth: ,
controls: false,
auto: true,
pager: false,
autoControls: false,
moveSlides: ,
minSlides: ,
maxSlides: ,
slideMargin:
}); }); </script> </head>
<body>
<form id="form1" runat="server"> <div id="lb2">
<a href="#" title="这里是测试标题一">
<img src="data:images/07_01_hbjc.png"></a>
<a href="#" title="这里是测试标题二">
<img src="data:images/07_02_ssjygk.png"></a>
<a href="http://www.dqdaily.com/ztxw/2014/node_38660.htm" title="唱响幸福谣 践行核心价值观">
<img src="data:images/07_03_wryhjjgxxgk.png"></a>
</div> </form> </body>
</html>
图片滑动效果图：
3、图片滑动效果，显示一个图片后在自动显示另一个图片，轮询播放图片，图片并附文字，从数据库中动态加载图片，并可任意切换显示的图片：
Default4.aspx
<html>
<head>
<meta charset="utf-8">
<title>大庆环保局</title>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<link href="js/jquery.slideBox.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.slideBox.js" type="text/javascript"></script>
<%--左右轮播 新闻--%>
<%--从右到左轮播 图片4个和一个图片的轮播--%>
<script src="js/jquery.bxslider.js"></script>
<%--紧急通知--%>
<script> jQuery(function ($) { $('#lb1').slideBox({
duration: 0.3, //滚动持续时间，单位：秒
easing: 'swing', //swing,linear//滚动特效
delay: , //滚动延迟时间，单位：秒
hideClickBar: false, //不自动隐藏点选按键
clickBarRadius:
}); }); </script>
</head>
<body>
<form id="form1" runat="server">
<div id="lb1" class="slideBox">
<ul class="items">
<asp:Literal ID="Literal2" runat="server"></asp:Literal>
</ul>
</div>
</form>
</body>
</html>
Default4.aspx.cs 代码：
if (!IsPostBack)
{
DataSet ds_lb = jlbll.GetList(" bz3 is not null");
if (ds_lb.Tables[].Rows.Count > )
{
for (int i = ; i < ds_lb.Tables[].Rows.Count; i++)
{
Literal2.Text += "<li><a href='Journalism_Read.aspx?id=" + ds_lb.Tables[].Rows[i]["bz3"].ToString() + "' title='" + ds_lb.Tables[].Rows[i]["username"].ToString() + "' target='_blank'>";
Literal2.Text += " <img src='images/" + ds_lb.Tables[].Rows[i]["bz3"].ToString() + "' width='380' height='292'></a>";
Literal2.Text += "</li>";
}
}
}
图片滑动+任意切换图片效果图：
C#跑马灯，图片滚动，后台获取图片地址。动态绑定图片，imag显示文字的更多相关文章
- ViewGroup可实现上下、各地跑马灯效果滚动
先上效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGFuZ25lbmd3dQ==/font/5a6L5L2T/fontsize/400/fill ...
- c# ajax从后台获取数据list数组 $.each再显示数据
后台代码 public JsonResult linkage(string Department) {//逻辑是:先从数据库查到表数据 再把表数据转换为LIST给AJAX HE_Department ...
- HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)
一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应 ...
- 使用图片预加载，解决断网后无法从后台获取提示网络异常的logo图片的问题
项目中有需求,断网后,显示小提示窗,里面包含网络异常提示语和异常小logo图片. 在实际操作时,遇到,断网后,无法从后台获取异常小logo图片. 我是才用图片预加载的方法解决这个问题的,解决方法如下: ...
- javascript实现图片滚动
闲来无事捣鼓了一个原来的js图片滚动 首先看看 静态页的结构: <body> <a href="javascript: le()">向左</a> ...
- Android高级图片滚动控件，编写3D版的图片轮播器
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17482089 大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博 ...
- 使用 JS 实现文字左右跑马灯
Ø 前言 其实,前面两篇已经基本上实现了图片.文字跑马灯,这里为什么还要学下文字左右跑马灯呢?因为,虽然基本一样,但实现起来还是有很大不同的,所以为了完整再补充一下.代码如下: 1. 首先定义 ...
- Android-TextView跑马灯效果
要实现跑马灯还是比较简单的. 同时有几个需要注意的点,先上代码: public class MTView extends TextView { public MTView(Context contex ...
- Java如何根据主机名（域名）获取IP地址？
在Java编程中,如何根据主机名(域名)获取IP地址? 以下示例显示了如何通过net.InetAddress类的InetAddress.getByName()方法将主机名更改为指定的IP地址. pac ...
随机推荐
- spring cloud 详解
https://www.cnblogs.com/qdhxhz/p/9601170.html SpringCloud(8)---zuul权限校验.接口限流 https://blog.csdn.net/c ...
- Alpha(5/10)
鐵鍋燉腯鱻 项目:小鱼记账 团队成员 项目燃尽图 冲刺情况描述 站立式会议照片 各成员情况 团队成员 学号 姓名 git地址 博客地址 031602240 许郁杨 (组长) https://githu ...
- mac上生成目录结构
brew又叫Homebrew,是Mac OSX上的软件包管理工具,能在Mac中方便的安装软件或者卸载软件. 一.安装brew ruby -e "$(curl -fsSL https://ra ...
- Codeforces Round #541 (Div. 2) (A~F)
目录 Codeforces 1131 A.Sea Battle B.Draw! C.Birthday D.Gourmet choice(拓扑排序) E.String Multiplication(思路 ...
- HDU.5765.Bonds(DP 高维前缀和)
题目链接 \(Description\) 给定一张\(n\)个点\(m\)条边的无向图.定义割集\(E\)为去掉\(E\)后使得图不连通的边集.定义一个bond为一个极小割集(即bond中边的任意一个 ...
- OpenCV3.2.0+VS2017环境配置与常见问题（巨细坑爹版）
目录 安装 常见问题 题外话:首先,配环境一定要有耐心... 本博客是本小白第一次装OpenCV成功后第一时间整理发布.用的是刚下载好的OpenCV3.2.0版,用x64编译器Debug运行(当然Re ...
- BZOJ5101 : [POI2018]Powód
求出Kruskal重构树,那么重构树上每个点的取值范围是定的. 考虑树形DP,则对于一个点,要么所有点水位相同,要么还未发生合并. 故$dp[x]=up[x]-down[x]+1+dp[l[x]]\t ...
- redis:string字符串类型的操作
1. string字符串类型的操作: 1.1. set 设置单个值 语法:set key value [EX seconds] [PX milliseconds] [NX|XX] 注: EX seco ...
- 怎么样从多列的DataTable里取需要的几列
方法一: 也是广为人知的一种: YourDataTable.Columns.Remove("列名"); 但是这种情况只适合于去掉很少列的情况. 如果有很多列我却只要一两列呢,那就得 ...
- React组件通信技巧
效果图 communication.gif 点击查看Github完整源码 1.父向子通信 直接标签中插入参数即可 //number只是个例子 let _number = this.state.numb ...