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 ...
随机推荐
- datatables跳转自定义页面（后端分页）
在后端分页的情况下,怎么做到跳转自定义页面? 0x01 难点: 一. 怎么添加自定义代码? 前提:datatables在整个html加载完毕后,进行datatables数据的渲染,并且把右下角的 “上 ...
- 李宏毅机器学习笔记5：CNN卷积神经网络
李宏毅老师的机器学习课程和吴恩达老师的机器学习课程都是都是ML和DL非常好的入门资料,在YouTube.网易云课堂.B站都能观看到相应的课程视频,接下来这一系列的博客我都将记录老师上课的笔记以及自己对 ...
- EF Core中Fluent Api如何删除指定数据表中的行
这两天一直在研究在code first下如何删除数据表中的指定行,于是开始搜狗,后来百度,压根就找不到资料,后来一想可能我的搜索关键字有问题,而且ef core命令与ef的命令差不多,于是从这两个方面 ...
- SpringBoot的国际化使用
在项目中,很多时候需要国际化的支持,这篇文章要介绍一下springboot项目中国际化的使用. 在这个项目中前端页面使用的thymeleaf,另外加入了nekohtml去掉html严格校验,如果不了解 ...
- css美化滚动条
一.滚动条出现的地方1.浏览器边框,当页面内容超过浏览器视窗大小:2.textarea,内容过多时:3.iframe:4.div或任何block元素,当它们的被设定成overflow属性时. 二.cs ...
- 发布网站配置IIS（把网上找到的解决方法综合了一下）
1.由于权限不足而无法读取配置文件,无法访问请求的页面(参考网址:http://blog.csdn.net/yinjingjing198808/article/details/7185453) 2.处 ...
- RabbitMQ事物模式
Rabbit的消息确认机制(事务+confirm)在rabbmitmq中我们可以通过持久化数据解决rabbitmq服务器异常的数据丢失问题问题:生产者将消息发送出去之后消息到底有没有到达rabbitm ...
- VS Code编写Python3 insert 数据库插入无效也不报错的坑~.~
标题最近在开发中需要用到web端开发工具.需要用python工具.偶然发现微软的良心之作:Visual Studio Code,这个大小才几十兆的轻量级代码编辑器,功能却是重量级的,通过插件的方法,, ...
- mysql：general_log 日志、数据库线程查询、数据库慢查询
开启general log会将所有到达MySQL Server的SQL语句记录下来.一般不会开启开功能,因为log的量会非常庞大.但个别情况下可能会临时的开一会儿general log以供排障使用. ...
- java文件课后动手动脑
package 第九周作业1; import java.io.File; import java.io.FileInputStream; import java.io.IOException; imp ...