當前位置：首頁 > 编程语言 > C# >内容正文

C#

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

發布時間：2025/7/14 C# 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 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>";}}}

圖片滑動+任意切換圖片效果圖：

轉載于:https://www.cnblogs.com/smile-wei/p/7611466.html

總結

以上是生活随笔為你收集整理的C#跑马灯，图片滚动，后台获取图片地址。动态绑定图片，imag显示文字的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：深入理解JavaScript模拟私有成员
下一篇： validator API文档