jquery實現圖片的向左和向右切換一組圖片
阿新 • • 發佈：2019-01-25
/*切換圖片*/
$(function(){
var $width=$("#div3").width();
var $div=$(".prolist_content");
var $page=1;
//求出總的圖片數
var $img=$(".prolist_content ul li").length;
var $pagesize=4;
var $page_count=Math.ceil($img/$pagesize);
//向左移動
$(".goLeft").click(function(){
if($page==$page_count){
$div.stop(true,true).animate({'left':0+'px'},600);
$page=1;
}else{
$div.stop(true,false).animate({'left':"-="+$width+'px'},600);
$page++;
}
})
$(".goRight").click(function(){
if($page==1){
$div.stop(true,false).animate({'left':"-="+$width*($page_count-1)+"px"},600);
$page=$page_count;
}else{
$div.animate({'left':"+="+$width+'px'},600);
$page--;
}
})
})
$(function(){
var $width=$("#div3").width();
var $div=$(".prolist_content");
var $page=1;
//求出總的圖片數
var $img=$(".prolist_content ul li").length;
var $pagesize=4;
var $page_count=Math.ceil($img/$pagesize);
//向左移動
$(".goLeft").click(function(){
if($page==$page_count){
$div.stop(true,true).animate({'left':0+'px'},600);
$page=1;
}else{
$div.stop(true,false).animate({'left':"-="+$width+'px'},600);
$page++;
}
})
$(".goRight").click(function(){
if($page==1){
$div.stop(true,false).animate({'left':"-="+$width*($page_count-1)+"px"},600);
$page=$page_count;
}else{
$div.animate({'left':"+="+$width+'px'},600);
$page--;
}
})
})