仿手机腾讯网jQuery幻灯图片插件

    仿手机腾讯网基于jQuery的幻灯大图片插件，带半透明的左右按钮，以及五个控制按钮。 1、在head引入my.css文件。

2、在body引入下面的代码：

<div id="main">
  <div id="picbox">
    <div id="pic1" class="pics"></div>
    <div id="pic2" class="pics"></div>
    <div id="pic3" class="pics"></div>
    <div id="pic4" class="pics"></div>
    <div id="pic5" class="pics"></div>
  </div>
  <div id="nav">
    <li id="navli1" class="anvli navnow" value="1"></li>
    <li id="navli2" class="anvli" value="2"></li>
    <li id="navli3" class="anvli" value="3"></li>
    <li id="navli4" class="anvli" value="4"></li>
    <li id="navli5" class="anvli" value="5"></li>
  </div>
  <div id="pre" class="hbut"></div>
  <div id="next" class="hbut"></div>
</div>
<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    var i=0;
    var m;
    $(".hbut").hide();
    $("#main").hover(function(){
        $(".hbut").show();    
},function(){
        $(".hbut").hide();
    });

    $(document).ready(function(){
        setInterval( function autodo(){
    i++;
    if(i>5){i=1}
    doit(i);
        
},2500);
$(".anvli").hover(function(){
             i = $(this).val();
             doit(i);        
});
$("#pre").click(function(){
             i--;
             if(i<0){i=5}
             doit(i);        
});
$("#next").click(function(){
             i++;
             if(i>5){i=1}
             doit(i);        
});
});
function doit(i){
         m = -960*(i-1);
         $(".anvli").removeClass("navnow");
         $("#navli"+i).addClass("navnow");
         $("#picbox").stop(true, true).animate({"left":m+"px"},700);
}
</script>

3、图片地址请在my.css里面修改：

#pic1{
    background:url(http://3gimg.qq.com/images/3gqq/ad_home.jpg);
}
#pic2{
    background:url(http://3gimg.qq.com/images/3gqq/ad_yuetu.jpg);
}
#pic3{
    background:url(http://3gimg.qq.com/images/3gqq/ad_nba.jpg);
}
#pic4{
    background:url(http://3gimg.qq.com/images/3gqq/ad_stock.jpg);
}
#pic5{
    background:url(http://3gimg.qq.com/images/3gqq/ad_auto.jpg);
}
#pic6{
    background:url(http://3gimg.qq.com/images/3gqq/ad_home.jpg);
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！