一个左右滚动的图片展示,有左右按钮,可以点击。
这个案例是我参考《锋利的jQuery》一书中的案例,代码少,适合新手提升,代码里有详细的注释。
这个案例有个缺点,就是不能自动切换,不过对于掌握了jQuery基本语法的初学者,想提高自己的技能,这是个很好的案例。
下面是css样式:
[color=blue]body {font-size:12px;color:#000;font-family:Verdana, Geneva, sans-serif;background:#FFF}
* {margin:0;padding:0;}
div,ul,li,ol,dt,dd,dl,p {overflow:hidden;margin:0;padding:0;font-size:12px}
ul,li {list-style:none;}
img {border:none}
a {text-decoration:none;color:#000}
a:hover {text-decoration:underline}
.v_show {width:320px;margin-left:200px;margin-top:100px;border:red solid 1px}
.v_caption {height:30px}
h2 {float:left}
.highlight_tip {float:left}
.change_btn {float:left;margin-left:20px}
.change_btn span {cursor:pointer}
.current {color:#00F}
.v_content {width:320px;height:60px;overflow:hidden;position:relative}
.v_content_list {width:800px;position:relative}
.v_content_list ul {float:left}
.v_content_list li {float:left;width:80px}[/color]
这里面应该注意overflow:hidden ,position:relative 这两个属性,overflow:hidden把多出这个区域的部分给隐藏;对于animate()这个自定义动画的方法,必须给相关的div一个position属性才可能使div移动,因为div默认的是static,这个是固定的,不可移动的。
var page = 1;
var i = 4; //每版放4个图片
//向后 按钮
$("span.next").click(function(){ //绑定click事件
var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
var v_width = $v_content.width() ;
var len = $v_show.find("li").length;
var page_count = Math.ceil(len / i) ; //只要不是整数,就往大的方向取最小的整数
if( !$v_show.is(":animated") ){ //判断“视频内容展示区域”是否正在处于动画
if( page == page_count ){ //已经到最后一个版面了,如果再向后,必须跳转到第一个版面。
$v_show.animate({ left : '0px'}, "slow"); //通过改变left值,跳转到第一个版面
page = 1;
}else{
$v_show.animate({ left : '-='+v_width }, "slow"); //通过改变left值,达到每次换一个版面
page++;
}
}
$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
});
上面的是向后按钮的代码。
代码定义了一个page变量作为中间媒介,用它来判断相关图片的位置;
下面的是向前按钮的代码,跟向后的按钮代码相似:
$("span.prev").click(function(){
var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
var v_width = $v_content.width();
var len = $v_show.find("li").length;
var page_count = Math.ceil(len / i) ; //只要不是整数,就往大的方向取最小的整数
if( !$v_show.is(":animated") ){ //判断“视频内容展示区域”是否正在处于动画
if( page == 1 ){ //已经到第一个版面了,如果再向前,必须跳转到最后一个版面。
$v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow");
page = page_count;
}else{
$v_show.animate({ left : '+='+v_width }, "slow");
page--;
}
}
$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
});
这个案例只要仔细研究,一般的话都可以看懂的。研究懂了会对你对jQuery的认识更加深入。
下面的是整个案例的代码下载地址:
分享到:
相关推荐
轮播图特效,迅雷动漫jQuery左右滚动焦点图代码,放在网页当中让网页变的更加美观,php中文网推荐下载!
jQuery左右滚动轮播图插件是一款可灵活设置每页显示个数、默认滚动时间、点击按钮滚动时间、自动播放滚动时间的jQuery插件。
jQuery插件,实现左右滚动并带停顿效果
这是一款实用的jQuery左右滚动切换时间轴代码,左右箭头按钮控制时间轴年份切换,内容可图文混排。
jquery左右滚动切换.zip
jQuery左右滚动式图片幻灯片特效下载,看上去非常大气的幻灯片,下边的小圆点有两个作用,1、指示当前图片的位置,2、控制切换图片,当然除了手动控制,本幻灯片还支持自动播放,打开后就自动循环切换图片,以左右...
很好用的jQuery左右滚动焦点图,还有缩略图同时跟随滚动,附带样式文件
jQuery左右滚动banner代码是一款乐视网首页jquery焦点图,自动播放,带缩略图,有左右箭头控制翻页,共10屏,点击缩略图切换大图,左右滑动切换,带文字描述和标题,鼠标滑入播放按钮会散开,如图所示的4个漂亮的按钮...
jquery左右滚动图片切换效果类似手机腾讯网.zip
基于jQuery的图片左右无缝滚动插件
html5 jQuery左右滚动焦点图切换,001 002 003文件夹分别是3个幻灯的图片包,注意图片名称不要改,若名称有1个不对,则当前幻灯图将无法点击控制。 文字若使用中文,默认宋体会不好看,但可以通过导入相应字体...
带放大效果jquery左右滚动图片代码是一款点击小图出现大图特效代码。
jQuery左右滚动支持图片放大缩略图图片轮播代码(附demo,可直接用)
Jquery是继prototype之后又一个优秀的Javascript框架。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使...
jquery 实现幻灯片效果 左右 回滚 上一个 下一个
jquery模拟腾讯网左右图片焦点图切换代码,简洁透明的效果,支持焦点切换与left、right切换,支持手机网页和PC端网页制作的图片自动切换。热爱jquery切换效果的你可不要错了哈,希望本例对你有所帮助
jquery 左右滚动 jqury导航栏 jqury特效
唯美图片切换 jquery左右滚动图片轮显,看上去十分简洁唯美的图片特效,虽然只有左右两侧可控制图片切换,不过这种效果带来的视觉感受很不一样,图片上还加入了阴影效果,更具立体感,搭配白色的网页背景,我想是最...