您的位置:首页 > 其它

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

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

<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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: