求一段jquery幻灯效果源码

求一段jquery幻灯效果源码，可以自动轮换播放，并且可以点击缩略图查看，最好不要用插件的，我在网上搜的几乎都是用插件

解决方案 »

  1.   


    <!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" />
    <title>JavaScript 图片切换展示效果-by CssRain.cn</title>
    </head>
    <body>
    <style type="text/css"> 
    .container, .container *{margin:0; padding:0;}.container{width:408px; height:168px; overflow:hidden;position:relative;}.slider{position:absolute;}
    .slider li{ list-style:none;display:inline;}
    .slider img{ width:408px; height:168px; display:block;}.slider2{width:2000px;}
    .slider2 li{float:left;}.num{ position:absolute; right:5px; bottom:5px;}
    .num li{
    float: left;
    color: #FF7300;
    text-align: center;
    line-height: 16px;
    width: 16px;
    height: 16px;
    font-family: Arial;
    font-size: 12px;
    cursor: pointer;
    overflow: hidden;
    margin: 3px 1px;
    border: 1px solid #FF7300;
    background-color: #fff;
    }
    .num li.on{
    color: #fff;
    line-height: 21px;
    width: 21px;
    height: 21px;
    font-size: 16px;
    margin: 0 1px;
    border: 0;
    background-color: #FF7300;
    font-weight: bold;
    }
    </style>
    <script src="http://www.cssrain.cn/demo/1/SildeTab/jquery-1.2.6.pack.js" type="text/javascript"></script>
    <script language="javascript" >
    //Demo1:
    $(function(){
         var len  = $("#idNum > li").length;
     var index = 0;
     $("#idNum li").mouseover(function(){
    index  =   $("#idNum li").index(this);
    showImg(index);
    });
     //滑入 停止动画，滑出开始动画.
     $('#idTransformView').hover(function(){
      if(MyTime){
     clearInterval(MyTime);
      }
     },function(){
      MyTime = setInterval(function(){
        showImg(index)
    index++;
    if(index==len){index=0;}
      } , 2000);
     });
     //自动开始
     var MyTime = setInterval(function(){
    showImg(index)
    index++;
    if(index==len){index=0;}
     } , 2000);
    })
    // Demo1 : 关键函数：通过控制top ，来显示不通的幻灯片
    function showImg(i){
    $("#idSlider").stop(true,false).animate({top : -168*i},800);
     $("#idNum li")
    .eq(i).addClass("on")
    .siblings().removeClass("on");
    }
    //Demo2:
    $(function(){
         var len2  = $("#idNum2 > li").length;
     var index2 = 0;
     $("#idNum2 li").mouseover(function(){
    index2  =   $("#idNum2 li").index(this);
    showImg2(index2);
    });
     //滑入 停止动画，滑出开始动画.
     $('#idTransformView2').hover(function(){
      if(MyTime2){
     clearInterval(MyTime2);
      }
     },function(){
      MyTime2 = setInterval(function(){
        showImg2(index2)
    index2++;
    if(index2==len2){index2=0;}
      } , 2000);
     });
     //自动开始
     var MyTime2 = setInterval(function(){
    showImg2(index2)
    index2++;
    if(index2==len2){index2=0;}
     } , 2000);
    })
    // Demo2 : 关键函数：通过控制left ，来显示不通的幻灯片
    function showImg2(i){
    $("#idSlider2").stop(true,false).animate({left : -408*i},800);
     $("#idNum2 li")
    .eq(i).addClass("on")
    .siblings().removeClass("on");
    }
    </script><div class="container" id="idTransformView">
      <ul class="slider" id="idSlider">
        <li><img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_1.jpg"/></li>
        <li><img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_2.jpg"/></li>
        <li><img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_3.gif"/></li>
      </ul>
      <ul class="num" id="idNum">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div><br/><br/><br/><br/><br/><br/><br/><br/>
    <div class="container" id="idTransformView2">
      <ul class="slider slider2" id="idSlider2">
        <li><img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_1.jpg" alt=""/> </li>
    <li><img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_2.jpg" alt=""/> </li>
    <li><img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_3.gif" alt=""/> </li>
      </ul>
      <ul class="num" id="idNum2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div></body>
    </html>
    图片可以换成你自己的路径