js制作简单的轮播图

14 篇文章 0 订阅
10 篇文章 0 订阅
本文介绍了如何使用JavaScript实现一个简单的轮播图。首先通过HTML布局设置图片容器,然后利用CSS样式控制显示,接着用JavaScript定义轮播函数,通过全局变量控制图片切换,并设置点击按钮触发指定图片显示。在按钮点击事件中,注意清除自动轮播定时器以避免冲突。
摘要由CSDN通过智能技术生成
实现原理
首先定义一个div,设置width和height,然后在这个div里面再定义一个div2,该div的宽度为父div的宽度的n倍,其中n表示图片的张数,在这个div2里面放置需要进行轮播的所有图片,设置每张图片的宽度为一个最外层父类div的宽度,高度都是相同的


然后使用js定义一个轮播的函数,每指定时间执行一次轮播函数,通过使用js提供的时间片来实现。轮播函数的思路为:在js外部定义一个全局变量remain,初始化值为0,即表示当前的图片的索引,然后在轮播函数里面对remain变量进行自增,再通过remain来设置要到达的图片的left偏移量,在这里需要对remain进行溢出判断


最后在最外层div元素里面再次定义一个与div2同级的div21,用于定义点击的圆形按钮。并设置点击事件,为了点击方便,在每个圆形按钮标签中定义一个data-index属性,指定所点击对应的图片的索引位置。在这里,圆心按钮标签我们使用span标签,然后通过设置它的border和border-radius来画出圆形按钮,在按钮事件函数中,同样是通过remain来设置要到达的图片的left偏移量,不过不是自增,而是修改成对应的data-index的值,同时需要注意的是:在按钮点击事件中,我们应该要清除自动轮播的时间片,以防止发生碰撞,影响视觉体验和效果



代码实现


页面布局
<div class="carousel">
    <div class="list">
        <img src="images/carousel/car1.jpg" />
        <img src="images/carousel/car2.jpg" />
        <img src="images/carousel/car3.jpg" />
        <img src="images/carousel/car4.jpg" />
    </div>
    <div id="buttons">
        <span data-index="0" class="on"></span>
        <span data-index="1"></span>
        <span data-index="2"></span>
        <span data-index="3"></span>
    </div>
</div>


css样式设置
.carousel{
    position: relative;
    top: 51.4px;
    width: 1348px;
    height: 500px;
    overflow: hidden;
    opacity: 0;
    transition: opacity .7s linear;
}
.carousel .list{
    width: 5392px;
    height: 500px;
    position: absolute;
    left: 0px;
    transition: all .5s ease-out;
}
.carousel .list img{
    float: left;
    width: 1348px;
    height: 500px;
}
#buttons {
     position: absolute;
     left: 660px;
     bottom: 20px;
     z-index: 2;
     height: 10px;
     width: 100px;
}        
#buttons span {
     float: left;
     margin-right: 5px;
     width: 15px;
     height: 15px;
     border: 1px solid #fff;
     border-radius: 50%;
     background: #333;
     cursor: pointer;
}     
#buttons .on {
    background: orangered;
}


js核心代码
$(function(){

    /**
     * 指定点击进入对应图片轮播页面
     */
    $.fn.clickpic = function(){
        window.clearInterval(lunbo);
        var index = $(this).data("index");
        curindex = index;
        var curleft = curindex * -1345;
        $(".list").css("left",curleft+"px");
        lunbo = window.setInterval($.fn.carousel, 2500);
        $(".carousel div#buttons span.on").removeClass("on");
        $(this).addClass("on");
    };
    $(document).on("click",".carousel div#buttons span",$.fn.clickpic);

    /**
     * 每三秒轮播一次
     */
    var curindex = 0;
    $.fn.carousel = function(){
        curindex++;
        if(curindex == 4){
            curindex = 0;
        }
        var curleft = curindex * -1345;
        $(".carousel div#buttons span.on").removeClass("on");
        $(".carousel div#buttons span[data-index='"+curindex+"']").addClass("on");
        $(".list").css("left",curleft+"px");
    };
    var lunbo = window.setInterval($.fn.carousel, 2500);
});
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值