zoukankan      html  css  js  c++  java
  • JS banner 切换,幻灯片,支持所有浏览器

     <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <link href="slide/index_ne.css" rel="stylesheet" type="text/css" />
    <link href="slide/common00.css" rel="stylesheet" type="text/css" />
    <script src="slide/jquery00.js"></script>


    </head>

    <body>

    <!--content-->
    <div class="content">
    <!--首页大图轮播-->
    <div class="SlidePlayer">
    <ul class="SlidePlayer-List">
    <li class="selected"><a href=""><img src="slide/1.jpg" /></a></li>
    <li ><a href=""><img src="slide/2.jpg" /></a></li>
    <li ><a href=""><img src="slide/3.jpg" /></a></li>
    <li ><a href=""><img src="slide/4.jpg" /></a></li>
    <li ><a href=""><img src="slide/5.jpg" /></a></li>
    </ul>
    <ul class="SlidePlayer-Trigger">
    <li class="selected"><a href=""><img src="slide/12566657.jpg" /></a></li>
    <li ><a href=""><img src="slide/12559857.jpg" /></a></li>
    <li ><a href=""><img src="slide/12559856.jpg" /></a></li>
    <li ><a href=""><img src="slide/12566658.jpg" /></a></li>
    <li ><a href=""><img src="slide/12571226.jpg" /></a></li>
    </ul>
    </div>
    <script>
    (function($) {
    var slide;
    var index=0;
    var count=0;
    var time=3000; //
    var done=true;
    $.fn.SlidePlayer=function() {

    count=$('.SlidePlayer-List li',this[0]).length;

    startSlide($('.SlidePlayer-List li',this[0])[0]);
    $('.SlidePlayer-Trigger li').bind('mousemove',function() {
    if(done&&!$(this).is('.selected')) {

    Slide($(this).parent().find('>').index(this),this);
    }
    });
    };
    //
    function Slide(ix,obj) {
    if(ix>=0) index=ix;
    else index++;

    if(index>count-1) index=0;


    stopSlide();
    done=false;
    var father=$(obj).parents('.SlidePlayer:eq(0)');
    var list=$('.SlidePlayer-List',father);
    var trigger=$('.SlidePlayer-Trigger',father);
    var old=$('>.selected',list);
    if(old.length>0) {
    old.css('z-index',10);
    $('>:eq('+index+')',list).addClass('selected').show();
    old.fadeOut(300,function() { //
    $(this).css('z-index',1).removeClass('selected');
    done=true;
    startSlide(obj);
    });
    trigger.find('li.selected').removeClass('selected');
    $('>:eq('+index+')',trigger).addClass('selected');
    }
    }
    //
    function stopSlide(){
    clearTimeout(slide);
    }
    //
    function startSlide(obj){
    slide=setTimeout(function() {Slide(-1,obj)},time);
    }
    })(jQuery);
    </script>
    <script>
    $(function() {
    $('.SlidePlayer').SlidePlayer();
    });
    </script>
    </div>

    </body>
    </html>

    http://www.corange.cn//uploadfiles/20091103_38806.jpg


    JS和css文件,图片文件
    http://www.corange.cn//uploadfiles/slide_45027.rar

    原文地址:http://www.corange.cn/archives/2009/11/3486.html

  • 相关阅读:
    POJ 3268 Silver Cow Party (Dijkstra)
    怒学三算法 POJ 2387 Til the Cows Come Home (Bellman_Ford || Dijkstra || SPFA)
    CF Amr and Music (贪心)
    CF Amr and Pins (数学)
    POJ 3253 Fence Repair (贪心)
    POJ 3069 Saruman's Army(贪心)
    POJ 3617 Best Cow Line (贪心)
    CF Anya and Ghosts (贪心)
    CF Fox And Names (拓扑排序)
    mysql8.0的新特性
  • 原文地址:https://www.cnblogs.com/zerogo/p/2209096.html
Copyright © 2011-2022 走看看