首页

源码搜藏网

首页 > 网页特效 > 焦点图 >

jquery slide图片滚动展示代码

创建时间:2014-08-26 08:35  

jquery slide图片滚动展示代码
jquery slide图片滚动展示代码
效果预览 立即下载

jquery slide图片滚动展示代码是一款适用于产品图片的展示特效代码。jquery图片滚动左右按钮产品展示 所属专题:图片代码

<script type="text/javascript">
$(function(){ 


var page=1;
var i=3;
var $p_Div=$(".pic_content");
var $picDiv=$(".pic_lists");
var picNum=$picDiv.children("ul").children("li").length;
var page_count=Math.ceil(picNum/3);
var $pDiv_w=$p_Div.width()+12;


$(".right_btn").click(function(){
if(page_count>page){
$picDiv.animate({left:'-'+page*$pDiv_w+"px"},"normal");
page++;
$(".left_btn").css({'background':'url(images/leftstart.jpg) no-repeat'});
if(page>=page_count){
$(this).css({'background':'url(images/rightstop.jpg) no-repeat'});
}else{
$(this).css({'background':'url(images/rightstart.jpg) no-repeat'});
}

$(this).siblings(".highlight_tip").find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
});

$(".left_btn").click(function(){
if(page>1){
$picDiv.animate({left:"+="+$pDiv_w+'px'},"normal");
page--;
$(".right_btn").css({'background':'url(images/rightstart.jpg) no-repeat'});
if(page<=1){
$(this).css({'background':'url(images/leftstop.jpg) no-repeat'});  
}else{
$(this).css({'background':'url(images/leftstart.jpg) no-repeat'});
}
}
$(this).siblings(".highlight_tip").find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
});

$(".pic_lists>ul>li").hover(function(){
$(this).children("p").show();
},function(){
$(this).children("p").hide();
});

})
</script>

上一篇:JQ酷狗首页带文字说明焦点图
下一篇:jquery大图左右按钮点击切换

相关内容

热门推荐