jquey写的简单图片轮转

详细展示地址:http://scnu.sinaapp.com,喜欢的可以直接用。

1、CSS格式如下

     #slider{
    width:100%;
    height:534px;
    background:url("http://scnu.sinaapp.com/Public/Images/slider_bg.jpg") repeat-x;
    border-top:1px solid #df0022;
    border-bottom:1px solid #df0022;
}
.main_body{
    position:relative;
    width:1170px;
    height:auto;
    margin:0 auto;
}

#pre{
    display:none;
    position:absolute;
    top:0px;
    left:-80px;
    width:100px;
    height:534px;
    background:url("http://scnu.sinaapp.com/Public/Images/pre.png") no-repeat center;
    z-index:2;
}
#next{
    display:none;
    position:absolute;
    top:0px;
    right:-80px;
    width:100px;
    height:534px;
    background:url("http://scnu.sinaapp.com/Public/Images/next.png") no-repeat center;
    z-index:2;
}
.slider{
    display:none;
    float:left;
    width:100%;
    position:absolute;
    left:0px;
    top:0px;
    z-index:1;
    
}
.left{
    float:left;
}
.right{
    float:right;
}
.slider_box{
    width:500px;
    height:365px;
    padding:84px 0px;
}
.slider_box h1{
    font-family:"MicroSoft YaHei","微软雅黑";
    font-size:40px;
    line-height:69px;
    height:69px;
    color:black;
    background:yellow;
    text-indent:1em;
    margin:10px 0;
}
.slider_box h2{
    font-family:"MicroSoft YaHei","微软雅黑";
    font-size:35px;
    color:white;
    background:#444444;
    text-indent:1em;
    height:69px;
    line-height:69px;
    margin:10px 0;
}


.slider_pic{
    height:534px;
    width:600px;
}
.slider_pic img{
    width:600px;
    height:534px;
}

2、HTML代码如下

<div id="slider">
  <div class="main_body">
   <div id="pre"></div>
   <div id="next"></div>
   <div class="slider">
      <div class="slider_box right">
       <h1>加入</h1>
       <h2>华师JQ轮滑协会</h2>
       <h2>叶大会长</h2>
       <h1>带你装逼，带你飞！！</h1>
      </div><!--end slider_box-->
      <div class="slider_pic left">
       <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://scnu.sinaapp.com/Public/Images/pic_02.png"/>
      </div><!--end slider_pic-->
  </div><!--end slider-->
   <div class="slider">
      <div class="slider_box left">
       <h1>三大基友协会</h1>
       <h2>华师JQ轮滑协会</h2>
       <h2>广技师FB轮滑协会</h2>
       <h1>广大RS轮滑协会</h1>
      </div><!--end slider_box-->
      <div class="slider_pic right">
       <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://scnu.sinaapp.com/Public/Images/pic_02.png"/>
      </div><!--end slider_pic-->
  </div><!--end slider-->
  <div class="slider">
      <div class="slider_box right">
       <h1>玩轮滑</h1>
       <h2>那家强</h2>
       <h2>华师大正门</h2>
       <h1>约吗？</h1>
      </div><!--end slider_box-->
      <div class="slider_pic left">
       <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://scnu.sinaapp.com/Public/Images/pic_02.png"/>
      </div><!--end slider_pic-->
  </div><!--end slider-->
   <div class="slider">
      <div class="slider_box left">
       <h1>生命</h1>
       <h2>不止。。</h2>
       <h2>轮滑</h2>
       <h1>不止。。。</h1>
      </div><!--end slider_box-->
      <div class="slider_pic right">
       <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://scnu.sinaapp.com/Public/Images/pic_02.png"/>
      </div><!--end slider_pic-->
  </div><!--end slider-->      
  </div><!--end main_body-->
 </div><!--end slider-->

3、JS代码如下：（PS：请记得提前Jquery)

$(document).ready(function(){
  //首页幻灯片轮转
  var len=$("#slider .slider").length;
  var index=0;
  $("#slider .slider").eq(0).show("slow");
   //幻灯片自动轮转
  var timer=setInterval(slider_fn,2500);
 
  $("#slider").hover(function(){
            clearInterval(timer);
            $("#pre").show("slow");
            $("#next").show("slow");
  },function(){
            var index=$(this).index();
            timer=setInterval(slider_fn,2500);
            $("#pre").hide("slow");
            $("#next").hide("slow");
  });
  $("#pre").click(function(){
    index--;
    if(index<0)
    {
     index=len-1;
    }
    $("#slider .slider").eq(index).show("slow").siblings("#slider .slider").hide("slow");
  });
  $("#next").click(function(){
    index++;
    if(index==len)
    {
        index=0;
    }
    $("#slider .slider").eq(index).show("slow").siblings("#slider .slider").hide("slow");
  });

  //自动轮滑函数
  function slider(obj){
    obj.eq(index).show("slow").siblings("#slider .slider").hide("slow");
  }
  function slider_fn(){
  if(index==len)
   {
    index=0;
   }
    slider($("#slider .slider"));
    index++;
  }  
});