好久不做轮播图一想到滑来滑去就头痛
2016-10-13 16:27
169 查看
维护庞大杂乱的老项目,插件不适宜,最后看需求没说一定要滑,整了个淡入淡出:
说说抄的谁吧。。。
就是这种赤裸裸老式代码,不过人家算法尤在,还引用了一个什么jquery.SuperSlide.2.1.1根本没用到,纯属障眼法。
最搞的是上传到服务器以后,$(this).index()始终是-1,本地就是好的,也许是服务器上jquery版本太乱,最后只好自定义attr
<script type="text/javascript"> $(document).ready(function() { var reviewed_id = 0; //图片标识 var reviewed_img_num = $(".img_ul").children("span").length; //图片个数 $(".img_ul span").hide(); //初始化图片 play(); var reviewdIn = setInterval(reviewed_autoPlay, 5000); function reviewed_autoPlay() { if (reviewed_id > 4) { reviewed_id = 0; play(); } else if (reviewed_id < 0) { reviewed_id = 4; play(); } else { reviewed_id++; play(); } }; $(".img_hd a").bind("click", function() { reviewed_id = Number($(this).attr("data-id")); clearInterval(reviewdIn); play(); reviewdIn = setInterval(reviewed_autoPlay, 5000); }); $(".img_pt a").bind("click", function() { reviewed_id = Number($(this).attr("data-id")); clearInterval(reviewdIn); play(); reviewdIn = setInterval(reviewed_autoPlay, 5000); }); $(".prev_a").click(function() { if (reviewed_id < 1) { reviewed_id = 5; } reviewed_id--; play(); }); $(".next_a").click(function() { reviewed_id++; if (reviewed_id > 4) { reviewed_id = 0; } play(); }); function play() { //动画移动 var img = new Image(); //图片预加载 img_load(img, $(".img_ul").children("span").eq(reviewed_id).find("img")); $(".img_hd").children("a").eq(reviewed_id).addClass("on").siblings().removeClass("on"); $(".img_pt").children("a").eq(reviewed_id).addClass("on").siblings().removeClass("on"); if (reviewed_id < reviewed_img_num - 2) { //前2个(就是当前选中第2张的时候翻页,这个分支往右) $(".img_hd").animate({ "marginLeft": (-($(".img_hd a").outerWidth() + 10) * (reviewed_id - 4 < 0 ? 0 : (reviewed_id - 4))) }); } else if (reviewed_id >= reviewed_img_num - 2) { //后2个(往左翻页)后来改8张图也只有这里改了4到第8张返回 $(".img_hd").animate({ "marginLeft": (-($(".img_hd a").outerWidth() + 10) * (reviewed_img_num - 4))//翻一页的距离 }); } } function img_load(img_id, now_imgid) { //大图片加载设置 (img_id 新建的img,now_imgid当前图片) $(".img_ul").children("span").eq(reviewed_id).fadeIn('fast').siblings("span").hide(); //大小确定后进行显示 } }); </script>
说说抄的谁吧。。。
var i=0; //图片标识 var img_num=$(".img_ul").children("li").length; //图片个数 $(".img_ul li").hide(); //初始化图片 play(); $(function(){ $(".img_hd ul").css("width",($(".img_hd ul li").outerWidth(true))*img_num); //设置ul的长度 $(".bottom_a").css("opacity",0.7); //初始化底部a透明度 //$("#play").css("height",$("#play .img_ul").height()); if (!window.XMLHttpRequest) {//对ie6设置a的位置 $(".change_a").css("height",$(".change_a").parent().height());} $(".change_a").focus( function() { this.blur(); } ); $(".bottom_a").hover(function(){//底部a经过事件 $(this).css("opacity",1); },function(){ $(this).css("opacity",0.7); }); $(".change_a").hover(function(){//箭头显示事件 $(this).children("span").show(); },function(){ $(this).children("span").hide(); }); $(".img_hd ul li").click(function(){ i=$(this).index(); play(); }); $(".prev_a").click(function(){ //i+=img_num; i--; //i=i%img_num; i=(i<0?0:i); play(); }); $(".next_a").click(function(){ i++; //i=i%img_num; i=(i>(img_num-1)?(img_num-1):i); play(); }); }); function play(){//动画移动 var img=new Image(); //图片预加载 img.onload=function(){img_load(img,$(".img_ul").children("li").eq(i).find("img"))}; img.src=$(".img_ul").children("li").eq(i).find("img").attr("src"); //$(".img_ul").children("li").eq(i).find("img").(img_load($(".img_ul").children("li").eq(i).find("img"))); $(".img_hd ul").children("li").eq(i).addClass("on").siblings().removeClass("on"); if(img_num>7){//大于7个的时候进行移动 if(i<img_num-3){ //前3个(往右翻) $(".img_hd ul").animate({"marginLeft":(-($(".img_hd ul li").outerWidth()+4)*(i-3<0?0:(i-3)))}); } else if(i>=img_num-3){//后3个(往左翻) $(".img_hd ul").animate({"marginLeft":(-($(".img_hd ul li").outerWidth()+4)*(img_num-7))}); } } if (!window.XMLHttpRequest) {//对ie6设置a的位置 $(".change_a").css("height",$(".change_a").parent().height());} } function img_load(img_id,now_imgid){//大图片加载设置 (img_id 新建的img,now_imgid当前图片) if(img_id.width/img_id.height>1) { if(img_id.width >=$("#play").width()) $(now_imgid).width($("#play").width()); } else { if(img_id.height>=500) $(now_imgid).height(500); } $(".img_ul").children("li").eq(i).show().siblings("li").hide(); //大小确定后进行显示 } function imgs_load(img_id){//小图片加载设置,这里他在html上加onload 属性来执行的,汗 if(img_id.width >=$(".img_hd ul li").width()){img_id.width = 80}; //if(img_id.height>=$(".img_hd ul li").height()) {img_id.height=$(".img_hd ul li").height();} }
就是这种赤裸裸老式代码,不过人家算法尤在,还引用了一个什么jquery.SuperSlide.2.1.1根本没用到,纯属障眼法。
最搞的是上传到服务器以后,$(this).index()始终是-1,本地就是好的,也许是服务器上jquery版本太乱,最后只好自定义attr
相关文章推荐
- 好久不做开发了,最近使用vs2008遇到了不能添加多个项目的问题,在此标记一下
- BCB中的TComboBox如何显示用户选择名称所对应的映射值?------尝试好久终于想到利用定时器来间接实现
- 好久不做asp了,现在做个小站,把开发过程中的要点记录下来
- 一行代码写一个轮播,想了好久,感觉这样可以。
- 好久不做实验,手生了
- 从按按钮什么也不做想到的
- 好久不做ACM 做起来手生的很。。
- 好久不做cf感到难受
- 亲爱的博客,好久没来了
- Angular2组件与指令的小实践——实现一个图片轮播组件
- 想到一道考察C功底的笔试题
- Android广告图片轮播控件之banner
- 由字体不够和两种内码所想到的
- 图像轮播-jquery
- 实现一个3D图片轮播插件 —— 更新版
- 好久没有写DELPHI程序了
- iOS开发UI篇—无限轮播(功能完善)
- 原生js实现轮播图
- 好久没上了
- 图片轮播