仿网易云轮播图，jq+boot轮播

最新推荐文章于 2022-04-03 11:28:46 发布

双下巴大圆脸

最新推荐文章于 2022-04-03 11:28:46 发布

阅读量2.2k

点赞数 1

分类专栏：随手记论文

本文链接：https://blog.csdn.net/yummry/article/details/81463662

版权

随手记论文专栏收录该内容

32 篇文章 2 订阅

订阅专栏

下了班，放松时间听歌时，发现网易云的轮播图挺好玩，挺简单的一个轮播图，很久之前自己尝试着写过，但是没有成功。今天把坑补上吧。原效果图：
代码效果图：
思路
刚开始对轮播的了解就是一个ul列表，里边的轮播内容并列展示，然后通过控制ul的left来让他偏移：

如上图所示，每次便宜一个图片的宽度，如果left小于总的图片宽度，直接将left归0，这种特别的麻烦，而且效果也不好，归0的时候中间会有错误效果；这是我最开始了解轮播的思路。看了看网易云的这个，发现应该不是这样，应该是上边有3个图片，别的图片都在下边隐藏。然后通过控制当前展示的图片还有上一个豫下一个，来实现轮播的效果,结构如下：

这样的话每次只要找到当前的图片他的上一个和下一个就能找到了。

问题：

图片拖动：
轮播的图片可以被拖动，img默认是能被拖动的，百度了方法，在鼠标事件中阻止他的默认行为就行了.

$(“img”).on(“mousedown”,(e)=>{
e.preventDefault();
})
缩略图的展示
想在鼠标放到圆点的时候增加一个缩略图展示，本来是想手写一个，后台再boot上发现有现成的样式popover，于是看了看文档决定使用，本来是想给圆点一个mouseenter事件，然后直接弹出popover弹出框：

然而，发现第一次hover并没有出现，再次hover是出现了，研究了文档，发现要先初始化对应DOM，然后按照他的初始化的触发方式去触发。只能在拼接DOM的时候先初始化了。不知道有没有别的解决办法，暂时先这样了。

4.贴上核心js代码，要demo的话下边有地址：

/*
    option{
    DOM : 对应元素
    animaterTimer 动画过度时间
    intervalTime 图片切换时间
    imgList : [img1,img2]
    aroundBtn 左右按钮
    bottomBtn 下边按钮
}
*/
class imgLunbo{
constructor(DOM,option){
    this.option = $.extend({
        "animaterTimer" : 1000,
        "intervalTime" : 2000,
        "aroundBtn" : true,
        "bottomBtn" : true,
    },option)
    this.DOM = DOM;
    this.init();
    this.timer;
}
init () {
    //拼接html
    this.joinDom();
    //绑定事件
    this.bindEvent();
    //定时轮播
    this.interval_img();
}
joinDom () {
    let that = this,
        _html = "",
        btn_circleHtml='';
    //左按钮
    if(that.option.aroundBtn){
        _html += `
            <div class="left" >
                <i class="iconfont icon-07jiantouxiangzuofill"></i>
            </div>
        `;
    }
    //主体图片部分
    _html += `<div class="content"><ul class="imgList">`;
    $.each(that.option.imgList,(i,v)=>{
        if(i == that.option.imgList.length-1){
            _html += `<li class="prev"><img src="${v}" alt=""></li>`;
        }else if(i == 0){
            _html += `<li class="now"><img src="${v}" alt=""></li>`;
        }else if(i == 1){
            _html += `<li class="next"><img src="${v}" alt=""></li>`;
        }else{
            _html += `<li><img src="${v}" alt=""></li>`;
        }
        btn_circleHtml += `<li class="${i==0?'active':''}" data-img="${v}"></li>`
    })
    _html +=`</ul><ul class="btn_circle">${btn_circleHtml}</ul></div>`;
    //右按钮
    if(that.option.aroundBtn){
        _html += `
            <div class="right">
            <i class="iconfont icon-07jiantouxiangyoufill"></i>
        </div>
        `;
    }
    $(that.DOM).html(_html);
}
bindEvent(){
    let that = this;
    //初始化popover
    $(".btn_circle li").each((i,v)=>{
        $(v).popover({
            trigger:'hover', //触发方式
            placement:'top',
            html: true, // 为true的话，data-content里就能放html代码了
            content:`<div class="thumbnail">
                    <img src="${$(v).attr('data-img')}" alt="">
                </div>`,//这里可以直接写字符串，也可以 是一个函数，该函数返回一个字符串；
        })
    })
    //左右移动
    $(".left,.right").click(function(){
        eval(`that.to${$(this).attr("class")}()`);
    })
    //点击下边圆球
    $(".btn_circle li").click(function(){
        that.start($(".imgList li").eq($(this).index()));
    })
    //绑定对应点击事件 点击图片
    $(".imgList li").on({
        'click':function(){
            that.start($(this));
        },
        'mouseenter':function(){
            clearInterval(that.timer)
        },
        'mouseleave':function(){
            that.interval_img();
        },
    })
    $(".btn_circle li").on({
        'click' : function(){
            clearInterval(that.timer)
            that.start($(".imgList li").eq($(this).index()));
            that.interval_img();
        }
    })
}
interval_img(){
    let that = this;
    that.timer = setInterval(()=>{
        that.start(that.nextDom($('.now')));
    },that.option.intervalTime)
}
start($dom){
    let num = $dom.index();
    //图片状态改变
    if(!$dom.hasClass("now")){
        $dom.parent().children('.now,.next,.prev').removeClass("now next prev");
        //对应元素添加class
        this.prevDom($dom).addClass("prev");
        $dom.addClass("now");
        this.nextDom($dom).addClass("next");
    }
    //圆点状态改变
    if(!$(".btn_circle li").eq(num).hasClass("active")){
        $(".btn_circle li").eq(num).addClass('active').siblings(".active").removeClass('active');
    }
}
prevDom($dom){
    //获取上一个元素
    if($dom.index() == 0) return $dom.parent().children(":last-child");
    return $dom.prev();
}
nextDom($dom){
    //获取下一个元素
    if($dom.index() == $dom.siblings().length) return $dom.parent().children(":first-child")
    return $dom.next();
}
toleft(){
    this.start(this.prevDom($(".now")))
}
toright(){
    this.start(this.nextDom($(".now")))
}
}
function slideShow(option){
return this.each(function(){
    let $this = $(this),
        slideData = $this.data("slideData");
    if(!slideData){
        $this.data("slideData",(slideData = new imgLunbo(this,option)))
    }
    //调用对应事件
    if(typeof option == 'string'){
        slideData[option] && slideData[option].apply(slideData);
    }
})
}
$.fn.slideShow = slideShow;
//禁止图片的拖动
$("img").on("mousedown",(e)=>{
e.preventDefault();
})

现在的并不满意，好几个功能还没有做出来，比如：轮播间隔再小圆点上可以用类似圆形进度条的方式展现出来，DOM结构的话也是比较死板，理想的DOM结构应该是模块化，轮播主题，左右箭头这些都应该是可以调整位置，需要什么拼接什么的，只是项目最近时间比较赶，等过了这段时间再完善吧！源代码已上传到github：点击去下载

双下巴大圆脸

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
仿网易云轮播图，jq+boot轮播

下了班，放松时间听歌时，发现网易云的轮播图挺好玩，挺简单的一个轮播图，很久之前自己尝试着写过，但是没有成功。今天把坑补上吧。原效果图：直接上代码吧：/* option{ DOM : 对应元素 animaterTimer 动画过度时间 intervalTime 图片切换时间 imgList : [img1,img2] aroundBtn 左右按...
复制链接

扫一扫

专栏目录