您的位置：首页 > 编程语言 > C#

C#跑马灯，图片滚动，后台获取图片地址。动态绑定图片，imag显示文字

2017-09-29 16:03 591 查看

下面附下载地址。 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>";
}
}
}

图片滑动+任意切换图片效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航