求图片自动切换效果，要用在ASP.NET(c#)里面

http://www.cnblogs.com/cloudgamer/archive/2008/07/06/SlideTrans.html  这个

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
            <title></title>
            <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
            <script type="text/javascript">
                //简化版
                $(function(){
                    var index = 0;
                    $("#btn span").mouseover(function(){
                        index = $("#btn span").index(this);
                        showImg(index);
                    });
                    //滑入 停止动画，滑出开始动画.
                    $('#imgnav').hover(function(){
                        if(MyTime){
                            clearInterval(MyTime);
                        }
                    },function(){
                        MyTime = setInterval(function(){
                            showImg(index)
                            index++;
                            if(index==5){index=0;}
                        } , 2000);
                    });
                    //自动开始
                    var MyTime = setInterval(function(){
                        showImg(index)
                        index++;
                        if(index==5){index=0;}
                    } , 2000);
                })            function showImg(i){
                    $("#img img").eq(i).show().parent().siblings().find("img").hide();
                    $("#msg li").eq(i).show().siblings().hide();
                    $("#btn span").eq(i).addClass("hov").siblings().removeClass("hov");
                }
            </script>
            <style>
                #Contents{
                    width:318px;
                    height:125px;
                    border-top:1px #d1d1d1 solid;
                    border-right:1px #d1d1d1 solid;
                    border-bottom:1px #d1d1d1 solid;
                    color:#d1d1d1;
                }
                .Tab_Off{
                    width:132px;
                    height:30px;
                    background-color:#ebebeb;
                    vertical-align:middle;
                    line-height:30px;
                    color:#373737;
                    border-bottom:1px #f6f6f6 solid;
                    border-top:1px #f6f6f6 solid;
                    border-left:1px #ededed solid;
                    border-right:1px #d1d1d1 solid;
                }
                .Tab_On{
                    width:132px;
                    height:30px;
                    background-color:#FFFFFF;
                    vertical-align:middle;
                    line-height:30px;
                    color:#696969;
                    border-top:1px #dbdbdb solid;
                    border-bottom:1px #dbdbdb solid;
                    border-left:1px #dbdbdb solid;
                    border-right:1px #FFFFFF solid;
                }
                *{ margin:0; padding:0;}
                body{ font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif; background:#f0f0f0;}
                li{ list-style:none;}
                a img{ border:none;}
                .cont{ text-align:left; width:950px; padding:10px; border:solid #ccc; border-width:0 1px; margin:0 auto; height:1100px; background:#fff;}
                .imgnav{ height:200px; background:#000; width:360px; overflow:hidden; border:1px solid #ccc; position:relative;}
                #img{ z-index:10;}
                #img img{ width:360px; height:200px; display:none;}
                .ctrl{ position:absolute; z-index:100; bottom:1px; left:1px; right:1px; width:360px; height:22px; overflow:hidden;}
                .ctrl ul{ float:left; line-height:22px; overflow:hidden; width:67%;filter: alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5;}
                .ctrl li{ display:block;height:22px; text-align:center; font-size:14px; font-weight:900;background:#000; color:#fff;}
                .ctrl span{ float:left; width:17%; height:20px; line-height:20px; cursor:pointer; margin-right:1px; border:1px solid #ccc; background:#b1c3d9; text-align:center;}
                .ctrl span.hov{ background:#ff9; border:1px solid #f60;}
                .ctrl div{ float:right; width:32%;}
            </style>
        </head>
        <div style="padding-top:10px;">
            <div id="MenuTabs" style="float:left;" align="left">
                <div id="MenuTab1" class="Tab_Off"> 内容一</div>
                <div id="MenuTab2" class="Tab_Off">内容二</div>
                <div id="MenuTab3" class="Tab_On"> 内容三</div>
                <div id="MenuTab4" class="Tab_Off">内容四</div>
            </div>
            <div id="Contents" style="float:left;color:red;">
                <div id="Content1" style="display:none;">
                    为了便于JQ选择 多用了几个ID 但是没有用ID 去控制样式。现在越来越少用ID 去控制样式了 样式 CSS：
                </div>
                <div id="Content2" style="display:none;">
                    本来想写成个通用的 直观改变最外框的大小即可 可惜没有那么长时间去测试各种宽度 所以还不是太完美
                </div>
                <div id="Content3" style="display:block;">
                    昨天公司的设计部群里发了几个JS的图片切换效果，看了一下 发现这些东西确实是
                </div>
                <div id="Content4" style="display:none;">
                    常用的 所以自己用JQ 实现了一个 。毕竟自己写的东西 自己比较了解，改也好改动 呵呵
                </div>
            </div>
        </div>
        <div class="imgnav" id="imgnav">
            <div id="ctrl" class="ctrl">
                <div id="btn"><span class="hov">1</span><span>2</span><span>3</span><span>4</span><span>5</span></div>
                <ul id="msg">
                    <li style="display:block;">Armin Van Buuren</li>
                    <li>Paul Van Dyk</li>
                    <li>Mike Old Field</li>
                    <li>Kyav vs Albert</li>
                    <li>Above &amp; Beyond</li>
                </ul>
            </div>
            <div id="img">
                <a href="#nogo"><img style="display:block;" src="images/1.jpg" alt="" /></a>
                <a href="#nogo"><img src="images/2.jpg" alt="" /></a>
                <a href="#nogo"><img src="images/3.jpg" alt="" /></a>
                <a href="#nogo"><img src="images/4.jpg" alt="" /></a>
                <a href="#nogo"><img src="images/0.jpg" alt="" /></a>
            </div>
        </div>
    </html>套用别人的。
      

  2.   


    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>新建网页 1</title>
    </head><body>
    <style>
    #imgnv{/*display:none;*/position:absolute;bottom:0;right:0;height:16px; }
    #imgnv div{float:left;margin-right:1px;}
    #imgnv div.on,#imgnv div.off{margin-bottom:1px;width:30px;height:15px;line-height:15px;font-size:10px;text-align:center;cursor:pointer;line-height:18px!important;}
    #imgnv div.on{background:#CE0609;color:#FFF;font-weight:bold}
    #imgnv div.off{background:#9a9a9a;color:#FFF;text-decoration:none}
    #titnv{margin-left:1px;margin-top:3px;color:#000;text-align:left;/*display:none;*/font-size:12px;line-height:16px!important;/*影响与图片的间隔高度*/}
    </style><script>
    var links = new Array();
    links[1] = "###";
    links[2] = "###";
    links[3] = "###";
    links[4] = "###";
    var imgs = new Array();
    for(var n = 1; n <= 5; n++) imgs[n] = new Image();
    imgs[1].src = "http://case.blueidea.com/files/2008/06/06/work_259410_6566_20080606_134454_7327576.jpg";
    imgs[2].src = "http://case.blueidea.com/files/2008/06/01/work_407358_6462_20080601_195006_5319824_m.jpg";
    imgs[3].src = "http://case.blueidea.com/files/2008/06/01/work_407358_6464_20080601_195231_4447937_m.jpg";
    imgs[4].src = "http://case.blueidea.com/files/2008/06/01/work_373092_6465_20080601_195704_4809265.jpg";
    var tits = new Array();
    tits[1] ="图片11";
    tits[2] = "图片22";
    tits[3] = "图片33";
    tits[4] = "图片44";
    var imgwidth = 550;//图片宽度
    var imgheight = 234;//图片高度
    var str = "";
    str += "<div style='position:absolute;background:#eee;'>";
    str += "<div style='padding:2px'><a id='dlink' href='" + links[1] + "' target='_blank'><img id='dimg' src='" + imgs[1].src + "' border='0' width='" + imgwidth + "' height='"+imgheight+"' style='filter:Alpha(opacity=100)' onmouseover='Pause(true)' onmouseout='Pause(false)'></a></div>";//修改点1：循环添加内层div内容以增加个数
    str += "<div id='imgnv'>";
    str += "<div id='it1' class='on' onmouseover='ImgSwitch(1, true)' onmouseout='Pause(false)'>1</div>";
    str += "<div id='it2' class='off' onmouseover='ImgSwitch(2, true)' onmouseout='Pause(false)'>2</div>";
    str += "<div id='it3' class='off' onmouseover='ImgSwitch(3, true)' onmouseout='Pause(false)'>3</div>";
    str += "<div id='it4' class='off' onmouseover='ImgSwitch(4, true)' onmouseout='Pause(false)'>4</div>";
    str += "</div>";str += "<div id='titnv'><b>" + tits[1] + "</b></div>";
    str += "</div>";
    document.write(str);
    var oi = document.getElementById("dimg");
    var pause = false;
    var curid = 1;
    var lastid = 1;
    var sw = 1;
    var opacity = 100;
    var speed = 15;
    var delay = (document.all)? 400:700;
    function SetAlpha(){
    if(document.all){
    if(oi.filters && oi.filters.Alpha) oi.filters.Alpha.opacity = opacity;
    }else{
    oi.style.MozOpacity = ((opacity >= 100)? 99:opacity) / 100;
    }
    }
    function ImgSwitch(id, p){
    if(p){
    pause = true;
    opacity = 100;
    SetAlpha();
    }
    oi.src = imgs[id].src;
    document.getElementById("dlink").href = links[id];
    document.getElementById("it" + lastid).className = "off";
    document.getElementById("it" + id).className = "on";
    document.getElementById("titnv").innerHTML = "<b>" + tits[id] + "</b>";
    curid = lastid = id;
    }
    function ScrollImg(){
    if(pause && opacity >= 100) return;
    if(sw == 0){
    opacity += 2;
    if(opacity > delay){ opacity = 100; sw = 1; }
    }
    if(sw == 1){
    opacity -= 3;
    if(opacity < 10){ opacity = 10; sw = 3; }
    }
    SetAlpha();
    if(sw != 3) return;
    sw = 0;
    curid++;
    //修改点2：这里的4也是个数
    if(curid > 4) curid = 1;
    ImgSwitch(curid, false);
    }
    function Pause(s){
    pause = s;
    }
    function StartScroll(){
    setInterval(ScrollImg, speed);
    }
    function CheckLoad(){
    if (imgs[1].complete == true && imgs[2].complete == true) {
    clearInterval(checkid);
    setTimeout(StartScroll, 2000);
    }
    }
    var checkid = setInterval(CheckLoad, 10);
    </script>
    </body></html>
      

  3.   

    ??csdn出错了(<pre>丢了)^_^能见效果,不见代码??<body>
    <style>
    #imgnv{/*display:none;*/position:absolute;bottom:0;right:0;height:16px; }
    #imgnv div{float:left;margin-right:1px;}
    #imgnv div.on,#imgnv div.off{margin-bottom:1px;width:30px;height:15px;line-height:15px;font-size:10px;text-align:center;cursor:pointer;line-height:18px!important;}
    #imgnv div.on{background:#CE0609;color:#FFF;font-weight:bold}
    #imgnv div.off{background:#9a9a9a;color:#FFF;text-decoration:none}
    #titnv{margin-left:1px;margin-top:3px;color:#000;text-align:left;/*display:none;*/font-size:12px;line-height:16px!important;/*影响与图片的间隔高度*/}
    </style><script>
    var links = new Array();
    links[1] = "###";
    links[2] = "###";
    links[3] = "###";
    links[4] = "###";
    var imgs = new Array();
    for(var n = 1; n <= 5; n++) imgs[n] = new Image();
    imgs[1].src = "http://case.blueidea.com/files/2008/06/06/work_259410_6566_20080606_134454_7327576.jpg";
    imgs[2].src = "http://case.blueidea.com/files/2008/06/01/work_407358_6462_20080601_195006_5319824_m.jpg";
    imgs[3].src = "http://case.blueidea.com/files/2008/06/01/work_407358_6464_20080601_195231_4447937_m.jpg";
    imgs[4].src = "http://case.blueidea.com/files/2008/06/01/work_373092_6465_20080601_195704_4809265.jpg";
    var tits = new Array();
    tits[1] ="图片11";
    tits[2] = "图片22";
    tits[3] = "图片33";
    tits[4] = "图片44";
    var imgwidth = 550;//图片宽度
    var imgheight = 234;//图片高度
    var str = "";
    str += "<div style='position:absolute;background:#eee;'>";
    str += "<div style='padding:2px'><a id='dlink' href='" + links[1] + "' target='_blank'><img id='dimg' src='" + imgs[1].src + "' border='0' width='" + imgwidth + "' height='"+imgheight+"' style='filter:Alpha(opacity=100)' onmouseover='Pause(true)' onmouseout='Pause(false)'></a></div>";//修改点1：循环添加内层div内容以增加个数
    str += "<div id='imgnv'>";
    str += "<div id='it1' class='on' onmouseover='ImgSwitch(1, true)' onmouseout='Pause(false)'>1</div>";
    str += "<div id='it2' class='off' onmouseover='ImgSwitch(2, true)' onmouseout='Pause(false)'>2</div>";
    str += "<div id='it3' class='off' onmouseover='ImgSwitch(3, true)' onmouseout='Pause(false)'>3</div>";
    str += "<div id='it4' class='off' onmouseover='ImgSwitch(4, true)' onmouseout='Pause(false)'>4</div>";
    str += "</div>";str += "<div id='titnv'><b>" + tits[1] + "</b></div>";
    str += "</div>";
    document.write(str);
    var oi = document.getElementById("dimg");
    var pause = false;
    var curid = 1;
    var lastid = 1;
    var sw = 1;
    var opacity = 100;
    var speed = 15;
    var delay = (document.all)? 400:700;
    function SetAlpha(){
    if(document.all){
    if(oi.filters && oi.filters.Alpha) oi.filters.Alpha.opacity = opacity;
    }else{
    oi.style.MozOpacity = ((opacity >= 100)? 99:opacity) / 100;
    }
    }
    function ImgSwitch(id, p){
    if(p){
    pause = true;
    opacity = 100;
    SetAlpha();
    }
    oi.src = imgs[id].src;
    document.getElementById("dlink").href = links[id];
    document.getElementById("it" + lastid).className = "off";
    document.getElementById("it" + id).className = "on";
    document.getElementById("titnv").innerHTML = "<b>" + tits[id] + "</b>";
    curid = lastid = id;
    }
    function ScrollImg(){
    if(pause && opacity >= 100) return;
    if(sw == 0){
    opacity += 2;
    if(opacity > delay){ opacity = 100; sw = 1; }
    }
    if(sw == 1){
    opacity -= 3;
    if(opacity < 10){ opacity = 10; sw = 3; }
    }
    SetAlpha();
    if(sw != 3) return;
    sw = 0;
    curid++;
    //修改点2：这里的4也是个数
    if(curid > 4) curid = 1;
    ImgSwitch(curid, false);
    }
    function Pause(s){
    pause = s;
    }
    function StartScroll(){
    setInterval(ScrollImg, speed);
    }
    function CheckLoad(){
    if (imgs[1].complete == true && imgs[2].complete == true) {
    clearInterval(checkid);
    setTimeout(StartScroll, 2000);
    }
    }
    var checkid = setInterval(CheckLoad, 10);
    </script>
    </body></html>
      

  4.   

    6楼的强大,可以考虑放点木马之类的,攻下csdn论坛