怎么做一个轮播图?(思路+代码)-创新互联

在页面中写好结构和样式(根据情况而定)

创新互联建站是一家集网站建设,石门企业网站建设,石门品牌网站建设,网站定制,石门网站建设报价,网络营销,网络优化,石门网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

外层用一个$(function(){})函数包裹起来,代表等页面的内容加载完成后再去执行jquery的功能代码。

获取到包裹ul,li的大盒子元素:const $div = $('#div');和包裹图片的ul元素:$ul = $div.children('ul');再获取到包裹图片的每个li元素:$imgs = $ul.children();再获取到li的所有长度,因为后面我们要clone第一张到最后一张,所以不用具体的数字,为:const len = $imgs.length;此外还需再获取到一个li的宽度,为:const width = $imgs.eq(0).outerwidth()

需要声明两个变量记录下一张和上一张的状态,var index = 0

var lastindex = 0

此外,为了防止后面用户点得太快,轮播图出现bug,需要声明一个变量来记录轮播图的运动状态

var ismove = false(运动状态默认为false)、

开始做之前,我们需要知道一件事,就是当我们点到第五张的时候,如果直接跳回第一张,肯定会给到用户不好的体验,所以,此时,我们应该把第一张clone,放到最后一张后面,让两张相同的图片来进行跳转,这样其实我们是使用了一个障眼法来迷惑了用户。

$imgs.eq(0).clone().appendTo($ul)

把第一张克隆放到最后一张后,我们就紧接着去计算所有的li的长度。因为这时的长度,才是真正我们想要的长度。

$ul.width((len+1)*width)

其实这两句完全可以写为一句。

$ul.append($imgs.eq(0).clone()).width((len+1)*width)

以上的准备工作做好了之后,我们要开始创建下面的小按钮

for(var i = 0; i

$('

  • ').html(i+1).addclass(i === 0 ? 'ac' : '').appendTo('#div ol')

    }

    因为在css中写好了样式,创建好了之后会到之前写好的位置当中,i+1的意思是按钮的内容,会按1,2,3,4,5…排列好,这也会让第一个小按钮默认为第一个,并具备ac这个样式。

    把li创建好,并插入到(''#div ol')中后,这时我们要获取这元素

    const $btns = $('#div ol li')

    获取完成之后,要给他添加一个点击事件,让他能够点击切换

    $btns.on('click',function(){

    })

    添加好之后我们要开始在里面写内容了,还记得上面的ismove =false吗,其实每个事件都要加上这个代码,不过要进行判断,如果在动的时候,就停止下面的代码运行,停止的时候,就为true,让代码动起来。

    $btns.on('click',function(){

    if(ismove)return;

    ismove = true;

    })

    做好上一步之后,我们还要用之前声明的index = 0,lastindex =0,来存储我们点击的时候的上一个和下一个的索引,这样就不用把五个事件都加进来清空了,

    $btns.on('click,function(){

    if(ismove) return;

    ismove =true;

    //可以把这一步理解为,把现任变成前任,

    //再给现任赋值他当前的索引

    lastindex = index;

    index = $(this).index()

    }')

    //接下来,我们要移出掉前任的“记忆”,把美好的“记忆”给现任

    $btns.on('click',function(){

    if(ismove) return

    ismove = true

    lastindex = index

    index = $(this).index()

    $btns.eq(lastindex).removeclass('ac')

    $btns.eq(index).addclass('ac')

    })

    接下来,我们既然已经控制好了点击的状态,不会让他“暴躁”,也获取了下一个和上一个li的索引,并给当前的li添加了’ac‘和上一个li移出’ac‘,那么接下来,就是让它动起来了!!!其实只需给它添加一个自定义动画函数即可~~~

    $btns.on('click',function(){

    if(ismove) return

    ismove = true

    lastindex = index

    index = $(this).index()

    $btns.eq(lastindex).removeclass('ac')

    $btns.eq(index).addclass('ac')

    $ul.animate({

    //这句代码表示,移动的距离是当前的索引值*width

    //因为是向左移动,所以,用-index,肯定有人问,为什么不在left前加符号,因为left是一个属性值

    left: -index * width

    },1000,function(){

    ismove = false

    //这个是回调函数,是运动结束之后要去执行的代码,ismove = false,让本次运动结束,如果运动结束之后没什么事干,就可以不用写回调函数

    })

    })

    到此,我们下面的小图标的运动轮播图的切换就算完成了!!!

    接下来,我们要写的是向右点击的大箭头切换。
    其实上面也说了一些思路,这里我直接写一点

    $('#goNext').on('click',function(){ //XM http://www.xmchinese.com/

    if(ismove)  return

    ismove = true

    lastindex = index

    index++

    })

    上面的开头,看起来其实很熟悉,对吧,接下来,其实我们要做的就是点击的时候,当点到了最后一张,不是出现空白,而是让他跳转到第一张,并且下面的小按钮也跟着改变。

    $('#goNext').on('click',function(){

    if (ismove) return

    ismove = true

    lastindex = index

    index++

    if(index === len){

    index = 0

    //本次动画的意义在于,当移动到最后一张时,下标为len,让ul瞬间回到0的位置

    $ul.stop().animate({

    left = -len*width

    },1000,function(){

    //用css('left',0)可以让它回到初始位置

    $ul.css('left',0)

    ismove = false

    })

    }else{

    $ul.stop().animate({

    left = -index*width;

    },1000,function(){

    ismove = false

    })

    }

    $btns.eq(lastindex).removeclass('ac')

    $btns.eq(index).addclass('ac')

    })

    接下来,我们需要做的是向左点击切换的大箭头
    其实向右点击,我们需要做的是,当点击到第一张之前时,要让它跳到最后一张:len - 1,

    $('#goPrev').on('click',function(){

    if(ismove = false)

    ismove  = true

    lastindex = index

    index--

    //当index小于0,即超出边界时,让index = len - 1

    if(index < 0){

    index = len - 1

    $ul.css('left',-len * width).animate({

    left = -index * width

    },1000,function(){

    ismove = false

    })

    }else{

    $ul.animate({

    left = -index*width

    },1000,function(){

    ismove = false

    })

    }

    $btns.eq(lastindex).removeclass('ac')

    $btns.eq(index).addclass('ac')

    })

    其实除了以上的东西,我们还要做的一个东西是,当鼠标移入时,这个轮播图停止,离开时继续自动播放。

    div1.hover(() => {

    clearInterval($div1.timer)

    }, (function auto () {

    $div1.timer = setInterval(() => {

    $('#goNext').trigger('click')

    }, 3000)

    return auto

    })())

    })

    到这里,我们的轮播图就算是完成了!!!

    另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


    分享名称:怎么做一个轮播图?(思路+代码)-创新互联
    地址分享:http://myzitong.com/article/dcjcch.html