这个案例是我自己根据《锋利的jQUery》一书中水平滚动的案例改变的,里面的jQUery代码简单,div机构清晰,适合新手学习,只要耐下心来,仔细研究,自己写出一个应该没有问题的。
这个案例我没有用到图片,全部用的颜色。
上下两个箭头是黑色的,点击可移动相关的图片,
下面我简单的介绍下这个案例:
<div class="prev"></div>
<div class="con">
<div class="con_list">
<ul>
<li class="one"></li>
<li class="two"></li>
<li class="three"></li>
<li class="three"></li>
<li class="one"></li>
<li class="two"></li>
<li class="one"></li>
<li class="two"></li>
<li class="one"></li>
<li class="one"></li>
</ul>
</div>
</div>
<div class="next"></div>
这个是div结构。
可以看到这个结构很简单的,上面的是向上的按钮,下面的是向下的按钮,中间的就是图片的展示区域。
下面的是css代码:
* {margin:0;padding:0}
.prev,.next {width:100px;height:20px;background:#333;cursor:pointer}
.con {width:100px;height:300px;overflow:hidden;position:relative}
.con_list {position:relative}
.con li {height:100px}
.one {background:#F90}
.two {background:#69C}
.three {background:#633}
注意红色的代码,这些属性是关键,overflow:hidden把超出的部分隐藏;
由于jQuery中我用的是animate()方法,该方法必须在设置了position后才可以生效。因为div的position默认的属性是static,固定的,不可以移动。
以下是jQuery代码:
$(function() {
var page = 1;
var i = 3;
var conheight = $('.con').height();
var lilen = $('li').length;
var len = Math.ceil( lilen / i );
$('.next').click(function() {
if( page == len ) {
$('.con_list').animate({top:0},'slow');
page = 1;
}else{
$('.con_list').animate({top:'-=' + conheight},'slow');
page++;
}
});
$('.prev').click(function() {
if( page == 1 ) {
$('.con_list').animate({top:'-=' + conheight*(len - 1)},'slow');
page = len;
}else{
$('.con_list').animate({top:'+=' + conheight},'slow');
page--;
}
});
})
可以看的,代码是非常少的,而且,这个代码逻辑性通顺,很容易理解的。
读者可以自己研究,我只想说一点。
上面定义的page变量是作为一个桥梁,通过它来判断相关图片的位置的。
下面是完整的代码实例,有需要的可以下载:
分享到:
相关推荐
jquery 图片滚动 xslider 插件制作图片自动左右滚动与上下滚动,这个图片滚动xslider插件不复制整个容器里面的内容,直接用按钮控制滚动,直到滚动图片内容到最后一个,适用在图片展示滚动和新
jQuery实现上下滚动和类似垂直手风琴风格的滑动图片展示效果.zip
仿淘宝上下翻滚的jquery图片切换特效,纯JS代码,无flash,方便大小的修改
jQuery制作鼠标悬浮图片上下滚动切换展示效果
jquery hover鼠标滑过图片列表上下滚动显示图片详细内容 jquery hover鼠标滑过图片列表上下滚动显示图片详细内容 jquery hover鼠标滑过图片列表上下滚动显示图片详细内容
jquery实现鼠标在图片上悬停时可上下滑动展示描述信息
87. 分享多款jQuery图片预加载切换效果(上下滚动、淡入淡出渐变等) 88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件下载 89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果...
jquery实现鼠标在图片上悬停时可上下滑动展示描述信息.zip
jquery实现的超酷鼠标悬停图片上下左右滑动展示效果.zip
87. 分享多款jQuery图片预加载切换效果(上下滚动、淡入淡出渐变等) 88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件下载 89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果...
<li class="cur"><b class="zhanl"><p><img />展览展示</p></b><span class="zhanl"><p>... 一款jQuery滑动门选项卡上下滚动切换特效,鼠标悬停选项卡图标导航自动切换到相应内容,鼠标经过图片显示加号特效。
87. 分享多款jQuery图片预加载切换效果(上下滚动、淡入淡出渐变等) 88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件下载 89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果...
jquery画廊-图库图片展示-带有动态切换效果,也就是动画效果,更加生动的图片展示,左侧用来显示缩略图,可以上下滑动,自动响应鼠标而滑动图片,单击缩略图图片后右侧显示大图片,挺大气的一种图库特效。
jQuery选项卡切换图片异步加载代码是一款精简的异步加载图片代码,展示图片的网页必备的功能。
87. 分享多款jQuery图片预加载切换效果(上下滚动、淡入淡出渐变等) 88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件下载 89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果...
10.jquery仿LightBox图片盒子单击逐渐放大的图片展示的插件下载 11.jquery仿Lightbox的插件jQuery UI.ariaLightbox点击图片放大显示插件下载 12.jQuery仿动感flash自动滚动图片切换广告插件 13.jQuery仿新浪...