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 ...
随机推荐
- 在UnrealEngine中用Custom节点实现马赛克效果
参考这位大神的Shaderhttp://blog.csdn.net/noahzuo/article/details/51316015 //input BaseUV 屏幕UV //intput Tili ...
- 潭州课堂25班：Ph201805201 爬虫高级 第十课 Scrapy-redis分布 (课堂笔记)
利用 redis 数据库,做 request 队列,去重,多台数据共享, scrapy 调度 基于文件每户,默认只能在单机运行, scrapy-redis 默认把数据放到 redis 中,实现数据共享 ...
- 给json对象去除重复的值
给数组去除重复值 Array.prototype.distinct = function() { var arr = this, result = [], i, j, len = arr.length ...
- C++ Primer 与“类”有关的注意事项总结
C++ 与"类"有关的注意事项总结(一) 1. 除了静态 static 数据成员外,数据成员不能在类体中被显式地初始化. 例如 : class First { int memi = ...
- CodeForce VKcup C 树形dp
题意: 给出一棵树,一个人可以在树上跳,每次最多跳k(1≤k≤5)个点定义f(s,t)为从顶点ss跳到顶点tt最少需要跳多少次求∑(s<t)f(s,t) 链接: 点我 dp[i][j]表示以i点 ...
- C#编程 - 交通灯模拟
程序写的有点繁杂,但大体功能出来的! 效果图: using System; using System.Collections.Generic; using System.Linq; using Sys ...
- fastjson 使用教程
fastjson 是阿里的开源项目,具网上的说法 fastjson 的解析速度是 Gson 的6倍,体积小,而且开源. 项目地址: https://github.com/alibaba/fastjso ...
- yii创建控制台命令
创建控制台命令程序1.控制台命令继承自 yii\console\Controller控制器类2.在控制器类中,定义一个或多个动作,动作与控制台子命令相对应3.在动作方法中实现业务需求的代码 运行控制台 ...
- JsonServer服务环境搭建
在前后端分离的这种工作模式下,分工明确,各司其职.前端负责展示数据,后端提供数据.然而,在这种过程中对于接口的规范 需要提前制定好.例如根据规范提前模拟数据,这个时候就比较麻烦的.JsonServer ...
- c# js 删除table原行数据
function addtreetotable(obj){ var table1 = document.getElementById("Table1"); var hang = ...