html上下滚动图片代码,Jquery实现图片竖直上下滚动代码

Jquery实现图片竖直上下滚动代码_网页代码站(www.webdm.cn)

$(function(){

var page = 1; //当前第几页

var i = 3; //图片个数

var $content = $("#f_litimg");//寻找到内容展示区

var $content_w = $("#g_fushil").height();//内容展示区外围div宽度

var $len = $("#f_litimg ul li").length;//拿到li的个数

var page_count = Math.ceil($len/i); //只要不是整数，就往大的方向取最小的整数

$("#fu_top").click(function(){

if( !$content.is(":animated") ){

if( page == page_count ){

$content.animate({top:'0px'},"slow");

page=1;

}else{

$content.animate({top:'-='+$content_w},"normal");//改变left值，每次换一个版

page++;

}

}

})

$("#fu_down").click(function(){

if( !$content.is(":animated") ){ //判断"视频内容展示区域"是否正在处于动画

if( page == 1 ){ //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。

$content.animate({ top : '-='+$content_w*(page_count-1) }, "slow");

page = page_count;

}else{

$content.animate({ top : '+='+$content_w }, "slow");//改变left值，每次换一个版

page--;

}

}

})

$("#f_litimg li img").click(function(){

$("#g_fushic").empty();

$(this).clone().prependTo("#g_fushic")

.animate({height:'210px',width:'180px'},"slow");

$('#g_fushic').attr('href',$(this).attr('link'));

});

});

#g_fskuang {

height: 220px;

width: 250px;

}

#tini {

height: 220px;

width: 65px;

float: left;

}

#g_fushil {

height: 180px;

width: 65px;

float: left;

overflow: hidden;

position: relative;

}

#g_fushic {

height: 210px;

width: 180px;

float: right;

padding: 0px;

margin-top: 5px;

margin-right: 0px;

margin-bottom: 0px;

margin-left: 0px;

}

#f_litimg {

height: 540px;

width: 65px;

margin: 0px;

padding: 0px;

overflow: hidden;

position: absolute;

}

#f_litimg ul {

list-style-type: none;

margin: 0px;

padding: 0px;

}

#f_litimg ul li {

height: 55px;

text-align: center;

margin: 0px;

padding-top: 5px;

padding-right: 0px;

padding-bottom: 0px;

padding-left: 0px;

cursor:pointer;

}

#fu_top{

cursor:pointer;

width: 65px;

float: left;

height: 20px;

}

#fu_down{

padding: 0px;

cursor:pointer;

float: left;

width: 65px;

margin: 0px;

height: 20px;

}

上

• 
• 
• 
• 
• 
• 
• 
• 
• 

下

网页代码站 - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！