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

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

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

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

时间: 2024-10-12 22:04:18

好久不做轮播图一想到滑来滑去就头痛的相关文章

用 CSS 做轮播图

对于用 css 实现一个轮播图的缘由,是那时候刚开始接触前端,完全还不懂 js.但是有一个项目(就是一个用来应付面试的作品)需要做一个轮播的效果,当时第一反应就是用 css3 自定义动画 -webkit-animation.做出来的效果自己觉得还可以,唯一的不足就是鼠标点击切换 banner 图和指定到某个图.如果项目中不需要切换变换图片的需求,用 css3 做,何尝不是一种办法.不多说,先上代码: html 代码如下: <div class="test"> <a h

angular2----使用swiper做轮播图

步骤: 1.去官网下载最新的swiper的js和css 分别在index页面中导入 2.在需要做轮播的页面引入 3.然后我就打开swiper的API文档了,直接copy,初始化一个swiper 当然在angular2中不能这么写,于是变成了这样 在html中 在相关的ts中 emmm.... 本来我以为这样就好了 然后发现尼玛左右侧按钮和下面的分页按钮出不来! 于是又看了一个分页的API  发现需要把分页css也copy ,放进相应的css文件夹中的时候,以为ok了,运行,还是么有看到! 打开调

vue使用插件做轮播图

vue使用 vue-awesome-swiper制作轮播图. 1.访问github,搜索vue-awesome-swiper,查看用法. 第一个坑:github居然访问不了. 解决办法:参考别人 https://www.cnblogs.com/Owen-ET/p/10868620.html 其实访不访问都没关系,照着下面步骤来就可以了. 2.安装 vue-awesome-swiper指定版本 第二个坑:必须用这个版本,要不然后面很多bug了. npm i [email protected] --

网页常见之轮播图

在网上访问网页最常见到的应该是轮播图,一般会在首页,如访问量很高的淘宝,京东这些商城或不知道哪里弹出来的广告, 这些都可以看到图片都不断切换,图片比文字更有诱惑别人的能力,一张优美的图片,可以让人有点进出一睹的作用,而这就 已经是达到做这个的作用了,但图片占位一般都是不小的,小图很难让人关注到,哪怎么办了,难道就让图片全部平铺出来 吗?有点不好吧.难道图片多时也这样干,那这个站不是成了图片展示的网站了吗?客户体验也不好,所以轮播图的作用就 出来了,占一个图片的位置,展示了多张图片,还美化了网站,

iOS中 轮播图放哪最合适? 技术分享

我们知道,轮播图放在cell或collectionViewCell上会影响用户层级交互事件,并且实现起来比较麻烦,现在推出一个技术点:答题思路是:将UIScrollView放在UIView或UICollectionView或者UITableView上,将UIScrollView的y设为需要的大小,加载在你的现有图层上,然后改变偏移量即可,具体如下: 效果如下: 代码如下: 以UICollectionView为例 //表头可以做轮播图 UIScrollView *scrollView = [[UI

CSS3,3D效果轮播图

---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋转属性来完成3D效果的,然后配合原生js的显示隐藏,达到了3D旋转轮播图的效果: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/ht

传说中的轮播图

越发觉得笔记这种东西并不能代表全部,因为它很苍白,远不如图片的表述能力清楚. 学习了有关控制时间的函数: setInterval(控制的函数,时间(以毫秒为单位)): clearTime(停止时间函数): 但这个函数本身有一个缺陷,那就是它是从点开网页的那时起开始运行时间的,因此网页在打开的瞬间并不能弹出窗口,若想让网页出现的瞬间就弹出窗口,需要在此函数之前运行一次"say". 轮播图运用到了getElementBuId,它改变html的样式,而轮播图实际上就是在固定区域内显示不同的图

vue上的简单轮播图

好久没写轮播图了,今天在vue上写了个超简单的,效果还ok. .moveLeft{position:relative;right:ZOOMpx;transition:all 1s;} 原理是滚动时利用.moveLeft向左移动一个格子,造成滚动的假象,此时第二张图在第一个格子的位置: 这时候把第一个格子 li 的元素摘下接到 ul 末尾,并马上撤掉.moveLeft.每张图都在自己的格子上. 定时器循环该操作,一直轮播.可以用touch事件添加touchmove左右滑动效果和切换图片的功能,就不

各种各样的轮播图

轮播图 接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较. jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&