仿手机腾讯网jQuery幻灯图片插件
- 作者：网页模板
- 大小：0.256MB
- 点击次数：
- 发布时间：2014-07-01 11:48
特效介绍
仿手机腾讯网基于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);
}
- 本文标签：
- 手机幻灯图片插件
