下面附下载地址。 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显示文字的更多相关文章

  1. ViewGroup可实现上下、各地跑马灯效果滚动

    先上效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGFuZ25lbmd3dQ==/font/5a6L5L2T/fontsize/400/fill ...

  2. c# ajax从后台获取数据list数组 $.each再显示数据

    后台代码 public JsonResult linkage(string Department) {//逻辑是:先从数据库查到表数据 再把表数据转换为LIST给AJAX HE_Department ...

  3. HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)

    一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应 ...

  4. 使用图片预加载,解决断网后无法从后台获取提示网络异常的logo图片的问题

    项目中有需求,断网后,显示小提示窗,里面包含网络异常提示语和异常小logo图片. 在实际操作时,遇到,断网后,无法从后台获取异常小logo图片. 我是才用图片预加载的方法解决这个问题的,解决方法如下: ...

  5. javascript实现图片滚动

    闲来无事捣鼓了一个原来的js图片滚动 首先看看 静态页的结构: <body> <a href="javascript: le()">向左</a> ...

  6. Android高级图片滚动控件,编写3D版的图片轮播器

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17482089 大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博 ...

  7. 使用 JS 实现文字左右跑马灯

    Ø  前言 其实,前面两篇已经基本上实现了图片.文字跑马灯,这里为什么还要学下文字左右跑马灯呢?因为,虽然基本一样,但实现起来还是有很大不同的,所以为了完整再补充一下.代码如下: 1.   首先定义 ...

  8. Android-TextView跑马灯效果

    要实现跑马灯还是比较简单的. 同时有几个需要注意的点,先上代码: public class MTView extends TextView { public MTView(Context contex ...

  9. Java如何根据主机名(域名)获取IP地址?

    在Java编程中,如何根据主机名(域名)获取IP地址? 以下示例显示了如何通过net.InetAddress类的InetAddress.getByName()方法将主机名更改为指定的IP地址. pac ...

随机推荐

  1. SpringBoot整合mongoDB

    MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的. 这一片文章介绍一个springboot整合mongodb,如果你了解整合mysql之类的 ...

  2. XamarinEssentials教程应用程序信息AppInfo

    XamarinEssentials教程应用程序信息AppInfo   很多应用程序都提供一个“关于”功能.该功能会向用户展示应用程序的基本信息,如版本号.应用程序名称等.这个功能可以通过Xamarin ...

  3. 生产者与消费者 代码实现 java

    首先,我利用忙测试写出了第一次版本的代码 package How; //自写代码 缺陷 无法完全实现pv操作线程处于忙测试状态 public class bin_1_1 { public static ...

  4. [AHOI2017/HNOI2017]大佬

    Description: 人们总是难免会碰到大佬.他们趾高气昂地谈论凡人不能理解的算法和数据结构,走到任何一个地方,大佬的气场就能让周围的人吓得瑟瑟发抖,不敢言语. 你作为一个 OIER,面对这样的事 ...

  5. CF 1033 D. Divisors

    D. Divisors http://codeforces.com/contest/1033/problem/D 题意: 给n个(n<=500)个数,($a_i <= 2 \times 1 ...

  6. Java 状态模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述状态(State)模式的:状态模式,又称状态对象模式(Pattern of Objects for States),状态模式是对象的行为模 ...

  7. delphi 响应鼠标进入控件消息

    procedure MSGEnter(var msg:TMessage);message CM_MOUSEENTER;//响应进入的消息 procedure MSGLeave(var msg: TMe ...

  8. jQuery鼠标悬停3d菜单展开动画

    效果体验:http://hovertree.com/texiao/jquery/93/ 竖直的主菜单贴着页面左侧,当光标移入菜单项时,以3D动画的方式弹出对应的二级菜单.采用jQuery和CSS3实现 ...

  9. HBuilder的扩展插件开发暴露了一个事实:其实不能实现写一次代码实现跨平台App生成

    HBuilder的扩展插件开发,原来并不能生成单独的插件jar,而是以源码 - 类的形式进行开发,这其实就要求必须使用离线打包. 事实上,开发顺序应该是:先弄好离线打包框架,然后在AS里进行扩展插件开 ...

  10. springboot获取properties文件的配置内容(转载)

    1.使用@Value注解读取读取properties配置文件时,默认读取的是application.properties. application.properties: demo.name=Name ...