C#跑馬燈，圖片滾動，後臺獲取圖片地址。動態綁定圖片，imag顯示文字

時間 2019-11-06

標籤 c# 馬燈圖片滾動後臺獲取地址動態綁定 imag 顯示文字欄目 C# 简体版

原文原文鏈接

下面附下載地址。 http://download.csdn.net/download/njxiaogui/10002058javascript

一、跑馬燈效果，圖片連續循環滾動，圖片下面並可附文字描述，圖片是從數據庫中獲取的，親自測試，保證好使。css

Default.aspx 代碼：html

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
        <title>jQuery&#26032;&#38395;&#28378;&#21160;&#36305;&#39532;&#28783;&#25928;&#26524; - &#31449;&#38271;&#32032;&#26448;</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代碼：java

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>";
                }
            }
        }

跑馬燈效果圖：node

2 、圖片滑動效果，顯示一個圖片後在自動顯示另外一個圖片，輪詢播放圖片jquery

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>

圖片滑動效果圖：app

三、圖片滑動效果，顯示一個圖片後在自動顯示另外一個圖片，輪詢播放圖片，圖片並附文字，從數據庫中動態加載圖片，並可任意切換顯示的圖片：ide

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>";
                }
            }
        }

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。