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 ...
随机推荐
- RabbitMQ实战经验分享
前言 最近在忙一个高考项目,看着系统顺利完成了这次高考,终于可以松口气了.看到那些即将参加高考的学生,也想起当年高三的自己. 下面分享下RabbitMQ实战经验,希望对大家有所帮助: 一.生产消息 关 ...
- RFC2616-HTTP1.1-Header Field Definitions(头字段规定部分—译文)
part of Hypertext Transfer Protocol -- HTTP/1.1 RFC 2616 Fielding, et al. 14 头字段规定 该章节定义了HTTP1.1标准所包 ...
- XamarinSQLite教程添加测试数据
XamarinSQLite教程添加测试数据 此时创建的Students表中是没有任何数据,也就是一个空表.为了方便测试App,开发者需要为表添加一些数据.操作步骤如下. (1)右击创建的Student ...
- 南阳171----聪明的kk
//简单的dp #include<cstdio> #define Max(a,b) ((a)>(b)?(a):(b)) ]; int main() { int i,j,n,m,x,t ...
- 在Node.js使用Promise的方式操作Mysql（续）
在之后的开发中,为了做一些事务开发,我把mysql的连接代码从之前的query函数中分离出来了,直接使用原生的方法进行操作,但发现还是有点问题 原因是原生的node-mysql采用了回调函数的方式,同 ...
- Linux服务部署--Java（二）
八.Maven安装配置 1. 下载 wget http://mirrors.cnnic.cn/apache/maven/maven-3/3.3.9/binaries/apache-maven-3.3. ...
- mongoose根据_id更新，且如果数组中没有元素就添加
await model.photo.update({ _id: { $in: photoIdsParam } }, { $addToSet: { customerIds: { code: custCo ...
- 01-HTML
**今日任务** 网站信息页面案例 网站图片信息页面案例 网站友情链接页面案例 网站首页案例 网站注册页面案例 网站后台页面案例 教学导航 - 了解什么是标记语言 - 了解HTML主要特性,主要变化以 ...
- vim设置一个tab为4个空格，设置行号
这我就再当前用户下,不是root权限.本身是没有.vimrc这个文件的 vim ~/.vimrc 新建了这个文件 然后在其中输入 保存. 这样设置完就一个tab是4个空格,并且就有行号了.重新打开v ...
- tk.mybatis通用插件updateByPrimaryKeySelective无法自动更新ON UPDATE CURRENT_TIMESTAMP列的解决办法
tk.mybatis是一个很好用的通用插件,把CRUD这些基本的数据操作全都用动态SQL语句自动生成了,mapper和xml里十分清爽,但是昨天发现有一个小坑,记录在此: 有一张表,结构如下(已经简化 ...