幻灯片slider

<script src="{$GetInstallDir}web/scripts/jquery-1.3.1.js"></script>

<style>
/*环保首页幻灯*/
.left_hd {width:980px; height: 240px; overflow:hidden;position: relative;}
ul.list_img {position: absolute; width: 3000px;}
ul ,li {list-style: none;}
.list_img li {width: 980px;font-size: 30px;height: 240px;/*~~如果横向切换设置float:left;~~*/}
.list_num { position: absolute; right: 0px; bottom: 0px;}
.list_num li {float: left; width: 20px; height: 20px; background: #eaeaea; list-style: none; text-align: center; cursor: pointer;margin: 2px;}
.list_num li.on {background: #FF0000;}
</style>
<script>
// 首页幻灯
function slideshow(){
  var index = 0;
  var len = $(".list_img li").length;
  //自动翻转 ~~~~~~~~~~~~~~~~~~~~~~~~~~~
  var MyTime = setInterval(function(){
  showimg(index);
  index++;
  if(index==len){index=0;}
  },3000);
  //数字跳转 ~~~~~~~~~~~~~~~~~~~~~~~~~~~
  $(".list_num li").mouseover(function(){
  index = $(".list_num li").index(this);
  showimg(index);
  });
  //鼠标悬停是不翻转 ~~~~~~~~~~~~~~~~~~~~~~~~~~~
  $('.left_hd').hover(function(){
  if(MyTime){
  clearInterval(MyTime);
  }
  },function(){
  MyTime = setInterval(function(){
  showimg(index)
  index++;
  if(index==len){index=0;}
  } , 4000);
  });
}
//翻转效果函数，stop用来解决鼠标滑动过快后多次执行的bug ~~~~~~~~~~~~~~~~~~~~~~~~~~~
function showimg(i){
  //渐变切换
  $(".list_img li").eq(i).stop(true,true).fadeIn("slow").siblings("li").hide();
  //横向切换
  //$(".list_img").stop(true,false).animate({left:-500*i},200);
  //竖向切换
  //$(".list_img").stop(true,false).animate({top:-200*i},200);
  $(".list_num li").eq(i).addClass("on").siblings().removeClass("on");
}
//
 $(document).ready(function() {
slideshow();
        $("#focus_hd a:first").css('display', 'block');
      });
</script>
    <div class="left_hd" id="focus_hd">
        <div style="width: 980px; height: 240px; position: relative;" class="focus_wrap list_img">
               <li>
                  <a target="_blank" href="" title="">
                    <img width="980" height="240" src="{$GetInstallDir}web/img/s2.jpg">
                  </a>
              </li>
<li>
                  <a target="_blank" href="" title="">
                    <img width="980" height="240" src="{$GetInstallDir}web/img/s4.jpg">
                  </a>
              </li>
                <li>
                  <a target="_blank" href="" title="">
                    <img width="980" height="240" src="{$GetInstallDir}web/img/s3.jpg">
                  </a>
              </li>
   
        </div>
               
               
        <div class="focus_page list_num">
          <li class="on">1</li>
          <li class="">2</li>
<li class="">3</li>
        </div>
    </div>

 

<style>
/*首页幻灯*/
.left_hd {width:960px; height: 240px; overflow:hidden;position: relative;}
ul.list_img {position: absolute; width: 3000px;}
ul ,li {list-style: none;}
.list_img li {width: 960px;font-size: 30px;height: 240px;/*~~如果横向切换设置float:left;~~*/}
.list_num { position: absolute; right: 0px; bottom: 0px;}
.list_num li {float: left; width: 20px; height: 20px; background: #eaeaea; list-style: none; text-align: center; cursor: pointer;margin: 2px;}
.list_num li.on {background: #FF0000;}
</style>
<script>

// 首页幻灯
function slideshow(){
  var index = 0;
  var len = $(".list_img li").length;
  //自动翻转 ~~~~~~~~~~~~~~~~~~~~~~~~~~~
  var MyTime = setInterval(function(){
  showimg(index);
  index++;
  if(index==len){index=0;}
  },3000);
  //数字跳转 ~~~~~~~~~~~~~~~~~~~~~~~~~~~
  $(".list_num li").mouseover(function(){
  index = $(".list_num li").index(this);
  showimg(index);
  });
  //鼠标悬停是不翻转 ~~~~~~~~~~~~~~~~~~~~~~~~~~~
  $('.left_hd').hover(function(){
  if(MyTime){
  clearInterval(MyTime);
  }
  },function(){
  MyTime = setInterval(function(){
  showimg(index)
  index++;
  if(index==len){index=0;}
  } , 4000);
  });
}
//翻转效果函数，stop用来解决鼠标滑动过快后多次执行的bug ~~~~~~~~~~~~~~~~~~~~~~~~~~~
function showimg(i){
  //渐变切换
  $(".list_img li").eq(i).stop(true,true).fadeIn("slow").siblings("li").hide();
  //横向切换
  //$(".list_img").stop(true,false).animate({left:-500*i},200);
  //竖向切换
  //$(".list_img").stop(true,false).animate({top:-200*i},200);
  $(".list_num li").eq(i).addClass("on").siblings().removeClass("on");
}
//
 $(document).ready(function() {
slideshow(); 
        $("#focus_hd a:first").css('display', 'block');
      }); 
</script>

    <div class="left_hd" id="focus_hd">
        <div style="width: 960px; height: 240px; position: relative;" class="focus_wrap list_img">
               <li>
                  <a target="_blank" href="" title="">
                    <img width="960" height="240" src="{$GetInstallDir}web/img/001.jpg">
                  </a>
              </li>
  <li>
                  <a target="_blank" href="" title="">
                    <img width="960" height="240" src="{$GetInstallDir}web/img/002.jpg">
                  </a>
              </li>
<li>
                  <a target="_blank" href="" title="">
                    <img width="960" height="240" src="{$GetInstallDir}web/img/003.jpg">
                  </a>
              </li>
<li>
                  <a target="_blank" href="" title="">
                    <img width="960" height="240" src="{$GetInstallDir}web/img/004.jpg">
                  </a>
              </li>
<li>
                  <a target="_blank" href="" title="">
                    <img width="960" height="240" src="{$GetInstallDir}web/img/005.jpg">
                  </a>
              </li>
<li>
                  <a target="_blank" href="" title="">
                    <img width="960" height="240" src="{$GetInstallDir}web/img/006.jpg">
                  </a>
              </li>
<li>
                  <a target="_blank" href="" title="">
                    <img width="960" height="240" src="{$GetInstallDir}web/img/007.jpg">
                  </a>
              </li>
                    
        </div>
               
               
        <div class="focus_page list_num">
          <li class="on">1</li>
          <li class="">2</li>
          <li class="">3</li>
<li class="">4</li>
<li class="">5</li>
<li class="">6</li>
<li class="">7</li>
        </div>
    </div>