摘要:本篇jQuery将讲解图片滚动的3种方法,看完这篇文章会让你对图片滚动的3种方法有更加清晰的理解和运用。
本篇jQuery将讲解图片滚动的3种方法,看完这篇文章会让你对图片滚动的3种方法有更加清晰的理解和运用。
1.左右滚动
思路分析:使用相对定位,最外层的一个盒子使用相对定位,要滚动的盒子使用绝对定位。
CSS
.banner{width:592px; height:160px; position:relative; overflow:hidden;} .bannerCon{position:absolute; left:0; top:0; width:2500px;} .bannerCon li{float:left; margin:10px 2px 0; padding:8px; display:inline;}
jQuery
jquery代码类似于这样子,就是通过控制滚动的时候定位到另外一屏要显示的位置,这时我们改动的就是left的值了。
我们可以求出外围。
var width=$(".banner").width(); var index;
由触发的动作可以求出index的变化值。通过jQuery的animate。
var index=1; var num =4; if(index==num){$(".bannerCon").animate({left:0});index=1;}else{ $(".bannerCon").animate({left:'-='+width}); index++;}
通过这个动作来改变内层盒子的左边位置,实现了动画的滚动,当然因为我们首先定位的内层盒子的left:0;所以在右边的内容向左滚动就是负值了。相信学过css的童鞋都懂的。
2.上下滚动
原理同上面,只不过,现在我们要求算的值不是外层盒子的宽度,而是它的高度。通过设置外层盒子的top:0;那么现在的盒子滚动的jQuery代码类似于
var index=1; var num =4; if(index==num){$(".bannerCon").animate({left:0});index=1;}else{ $(".bannerCon").animate({top:'-='+height;}); index++;}
3.淡入淡出滚动
这种使用的代码我认识有两种。一种是图片替换法,一种则是使用jQuery的另外一个动画slideUp和slideDown了。
第一种思路:这个是一个技巧来的,其实就是通过切换动画的时候改变图片的地址了。其实就是改变数字。图片的地址通常会这样子写,images/banner1.jpg,images/banner2.jpg.看懂了没,就是通过动画滚动的时候改变数字,不过这种方法比较有局限,不适合所有的类型,比如如果要添加的动画不止一个图片,还有其他文字和多个图片排列在一起也是不行的。
第二种思路:这种也是常用的,可能是切换的不会太突然吧。这种通常是切换动画的时候,把所有的内容slideUp,然后把需要出现的内容slideDown.
jQuery代码可以是这样
var index; var num=4; if(index==num){ $(".inner").slideUp; $(".inner >ul:first").slideDown; }else{ $(".inner").slideUp; $(".inner > ul").eq(index).slideDown; index++; }
希望这篇文章可以帮助到你。总之,同学们,你想要的职坐标IT频道都能找到!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号