码迷,mamicode.com
首页 > 其他好文 > 详细

好久不做轮播图一想到滑来滑去就头痛

时间:2016-10-13 16:53:48      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:

维护庞大杂乱的老项目,插件不适宜,最后看需求没说一定要滑,整了个淡入淡出:

<script type="text/javascript">
var reviewed_id = 0; //图片标识
var reviewed_img_num = $(".img_ul").children("span").length; //图片个数
$(".img_ul span").hide(); //初始化图片 
play();
setInterval(function() {
    if (reviewed_id > 4) {
        reviewed_id = 0;
        reviewed_id--;
        play();

    } else if (reviewed_id < 0) {
        reviewed_id = 0;
        reviewed_id++;
        play();
    } else {
        reviewed_id++;
        play();
    }
}, 5000);

$(function() {
    $(".img_hd a,.img_pt a").click(function() {
        reviewed_id = $(this).index();
        play();
    });
    $(".prev_a").click(function() {
        reviewed_id--;
        reviewed_id = (reviewed_id < 0 ? 0 : reviewed_id);
        play();
    });
    $(".next_a").click(function() {
        reviewed_id++;
        reviewed_id = (reviewed_id > (reviewed_img_num - 1) ? (reviewed_img_num - 1) : reviewed_id);
        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个
        $(".img_hd").animate({
            "marginLeft": (-($(".img_hd a").outerWidth() + 2) * (reviewed_id - 4 < 0 ? 0 : (reviewed_id - 4)))
        });
    } else if (reviewed_id >= reviewed_img_num - 2) { //后2个
        $(".img_hd").animate({
            "marginLeft": (-($(".img_hd a").outerWidth() + 2))
        });
    }
}

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,纯属障眼法。。

不过人家算法尤在阿,我还降级写死了个数,应付了事。

好久不做轮播图一想到滑来滑去就头痛

标签:

原文地址:http://www.cnblogs.com/haimingpro/p/5956933.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!