文字和图片向左循环滚动

来源：互联网发布：linux chkconfig list 编辑：程序博客网时间：2024/06/04 23:04
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title>无标题页</title>    <style type="text/css" media="all">        body        {            background-color: #ccc;                      font-size: 12px;        }        .d1        {            margin: 0 auto;            width: 870px;            overflow: hidden;            white-space: nowrap; border-left:1px double #000;border-right:1px double #000;        }        .div2        {            float: left;        }        ul        {            margin: 0px;            padding: 0px;            list-style: none;        }        a:link, a:visited        {            color: #000000;            text-decoration: none;        }        a:hover        {            color: #000000;            text-decoration: underline;        }        .d{border: 1px double #000; height: 122px; width: 202px;}        .de ul li        {            display: inline;        }        .demo        {            float: left;            width: 90px;            height: 100px;        }        .demo ul li        {             display:block        }        .de1{float: right; width: 100px; height: 120px; border: 1px double #ccc;}    </style></head><body>    <form id="form1" runat="server">    <div class="d1" id="div1" onmouseover="clearInterval(timer)" onmouseout="timer=setInterval(mar,30)">        <div class="scroll" id="scroll">            <div class="div2" id="div2">                <ul>                    <li>                        <div class="de">                            <table>                                <tr>                                    <td>                                        <div class="d">                                            <div class="demo">                                                <ul>                                                    <li>1</li>                                                    <li>1</li>                                                    <li>1</li>                                                </ul>                                            </div>                                            <div class="de1">                                                <img src="http://list.image.baidu.com/t/image_category/galleryimg/womenstar/hk/sun_yan_zi.jpg" />                                            </div>                                        </div>                                    </td>                                    <td>                                        <div class="d">                                            <div class="demo">                                                <ul>                                                    <li>2</li>                                                    <li>2</li>                                                    <li>2</li>                                                </ul>                                            </div>                                            <div class="de1">                                                <img src="http://list.image.baidu.com/t/image_category/galleryimg/womenstar/hk/an_yi_xuan.jpg" />                                            </div>                                        </div>                                    </td>                                    <td>                                        <div class="d">                                            <div class="demo">                                                <ul>                                                    <li>3</li>                                                    <li>3</li>                                                    <li>3</li>                                                </ul>                                            </div>                                            <div class="de1">                                                <img src="http://list.image.baidu.com/t/image_category/galleryimg/womenstar/hk/wang_xin_ling.jpg" />                                            </div>                                        </div>                                    </td>                                    <td>                                        <div class="d">                                            <div class="demo">                                                <ul>                                                    <li>4</li>                                                    <li>4</li>                                                    <li>4</li>                                                </ul>                                            </div>                                            <div class="de1">                                                <img src="http://list.image.baidu.com/t/image_category/galleryimg/womenstar/hk/chen_hui_lin.jpg" />                                            </div>                                        </div>                                    </td>                                     <td>                                        <div class="d">                                            <div class="demo">                                                <ul>                                                    <li>5</li>                                                    <li>5</li>                                                    <li>5</li>                                                </ul>                                            </div>                                            <div class="de1">                                                <img src="http://list.image.baidu.com/t/image_category/galleryimg/womenstar/hk/ye_xuan.jpg" />                                            </div>                                        </div>                                    </td>                                     <td>                                        <div class="d">                                            <div class="demo">                                                <ul>                                                    <li>6</li>                                                    <li>6</li>                                                    <li>6</li>                                                </ul>                                            </div>                                            <div class="de1">                                                <img src="http://list.image.baidu.com/t/image_category/galleryimg/womenstar/hk/guan_zhi_lin.jpg" />                                            </div>                                        </div>                                    </td>                                     <td>                                        <div class="d">                                            <div class="demo">                                                <ul>                                                    <li>7</li>                                                    <li>7</li>                                                    <li>7</li>                                                </ul>                                            </div>                                            <div class="de1">                                                <img src="http://list.image.baidu.com/t/image_category/galleryimg/womenstar/hk/liu_ruo_ying.jpg" />                                            </div>                                        </div>                                    </td>                                     <td>                                        <div class="d">                                            <div class="demo">                                                <ul>                                                    <li>8</li>                                                    <li>8</li>                                                    <li>8</li>                                                </ul>                                            </div>                                            <div class="de1">                                                <img src="http://list.image.baidu.com/t/image_category/galleryimg/womenstar/hk/chen_qiao_en.jpg" />                                            </div>                                        </div>                                    </td>                                     <td>                                        <div class="d">                                            <div class="demo">                                                <ul>                                                    <li>9</li>                                                    <li>9</li>                                                    <li>9</li>                                                </ul>                                            </div>                                            <div class="de1">                                                <img src="http://list.image.baidu.com/t/image_category/galleryimg/womenstar/hk/zhang_man_yu.jpg" />                                            </div>                                        </div>                                    </td>                                     <td>                                        <div class="d">                                            <div class="demo">                                                <ul>                                                    <li>10</li>                                                    <li>10</li>                                                    <li>10</li>                                                </ul>                                            </div>                                            <div class="de1">                                                <img src="http://list.image.baidu.com/t/image_category/galleryimg/womenstar/hk/lin_xin_ru.jpg" />                                            </div>                                        </div>                                    </td>                                </tr>                            </table>                        </div>                    </li>                </ul>            </div>            <div id="div3" class="div2">            </div>        </div>    </div>    <script language="javascript" type="text/javascript">var s,s2,s3,s4,timer;function init(){s=getid("div1");s2=getid("div2");s3=getid("div3");s4=getid("scroll");s4.style.width=(s2.offsetWidth*2+100)+"px";s3.innerHTML=s2.innerHTML;timer=setInterval(mar,30)}function mar(){if(s2.offsetWidth<=s.scrollLeft){s.scrollLeft-=s2.offsetWidth;}else{s.scrollLeft++;}}function getid(id){return document.getElementById(id);}window.onload=init;    </script>    </form></body></html>