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: 1000,
easing: 'linear',
items: 1,
duration: 0.07,
timeoutDuration: 0,
pauseOnHover: 'immediate'
};
$('#ticker-1').carouFredSel({
width: 1000,
align: false,
items: {
width: 'variable',
visible: 1
},
scroll: _scroll
});
$('#ticker-2').carouFredSel({
width: 1000,
align: false,
circular: false,
items: {
width: 'variable',
height: 35,
visible: 2
},
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(2000);
});
</script>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
min-height: 300px;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper {
width: 100%;
margin: -100px 0 0 0;
position: absolute;
left: 0;
top: 50%;
}
#wrapper h3 {
font-size: 20px;
text-align: center;
}
#wrapper > div.first {
border-bottom: none;
}
#wrapper dl {
display: block;
margin: 0;
}
#wrapper dt, #wrapper dd {
display: block;
float: left;
margin: 0 5px;/*--空间距--*/
padding: 0px 0px;/*--空间距--*/
}
#wrapper dt {
background-color: #f66;
color: #fff;
}
#wrapper dd {
color: #333;
margin-right: 0px;/*--空间距--*/
}
code {
font-style: italic;
}
#donate-spacer {
height: 100%;
}
#donate {
border-top: 1px solid #999;
width: 750px;
padding: 50px 75px;
margin: 0 auto;
overflow: hidden;
}
#donate p, #donate form {
margin: 0;
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[0].Rows.Count > 0) { for (int i = 0; i < ds_lb.Tables[0].Rows.Count; i++) { Literal2.Text += "<dd><li> <a href='Journalism_Read.aspx?id=" + ds_lb.Tables[0].Rows[i]["bz3"].ToString() + "' title='" + ds_lb.Tables[0].Rows[i]["username"].ToString() + "' target='_blank'>"; Literal2.Text += " <img src='images/" + ds_lb.Tables[0].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: 250,
controls: false,
auto: true,
pager: false,
autoControls: false,
moveSlides: 1,
minSlides: 1,
maxSlides: 1,
slideMargin: 0
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="lb2">
<a href="#" title="这里是测试标题一">
<img src="images/07_01_hbjc.png"></a>
<a href="#" title="这里是测试标题二">
<img src="images/07_02_ssjygk.png"></a>
<a href="http://www.dqdaily.com/ztxw/2014/node_38660.htm" title="唱响幸福谣 践行核心价值观">
<img src="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: 5, //滚动延迟时间，单位：秒
hideClickBar: false, //不自动隐藏点选按键
clickBarRadius: 10
});
});
</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[0].Rows.Count > 0) { for (int i = 0; i < ds_lb.Tables[0].Rows.Count; i++) { Literal2.Text += "<li><a href='Journalism_Read.aspx?id=" + ds_lb.Tables[0].Rows[i]["bz3"].ToString() + "' title='" + ds_lb.Tables[0].Rows[i]["username"].ToString() + "' target='_blank'>"; Literal2.Text += " <img src='images/" + ds_lb.Tables[0].Rows[i]["bz3"].ToString() + "' width='380' height='292'></a>"; Literal2.Text += "</li>"; } } }
图片滑动+任意切换图片效果图：
