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

  • 相关阅读:
    BOOST 信号与槽,获取槽函数返回值,使用占位参数传递信号携带的参数
    单例模式,reorder详解,线程安全,双检查锁
    编程源自生活:抽象 -> 生活中的洗头问题
    前置声明透彻理解,以及和直接头文件包含的区别,注意事项
    三种工厂模式详解
    个人作品1
    Python基本汇总问题
    Json字符串转换成Json对象
    html div可以进行编辑
    父页面访问iframe页面的js
  • 原文地址:https://www.cnblogs.com/zerogo/p/2209096.html
Copyright © 2011-2022 走看看