超级简单的无缝轮播

浏览：676次- 评论：0次- 发布时间：2019-03-29

Html

Css

var $slide = $('.slide');
var $slide_ul = $slide.find('ul');
var $slide_li = $slide.find('li');
var $slide_l = $slide.find('.b_l');
var $slide_r = $slide.find('.b_r');
var $a = $('.dots a');

var firstLi = $slide_li.first().clone();
$slide_ul.append(firstLi) // 拷贝 第一个 li dom 放到ul里面

$slide_ul.width(($slide_li.length + 1) * $slide_li.width()) // 给ul 添加宽度
// console.log($slide_ul.width())
var imgW = $slide_li.width();
var i = 0;
var $length = $slide_li.length + 1;
// console.log($length)

$slide_r.click(function() {
    i++;
    // console.log(i)
    if (i == $length - 1) {
        $slide_ul.stop().animate({ //判断是最后一个li时，无缝连接到第一个
            left: -i * imgW + 'px'
        }, function() {
            $slide_ul.css({
                left: 0
            })
        })
        i = 0;
    } else {
        $slide_ul.stop().animate({
            left: -i * imgW + 'px'
        })
    }
    $a.eq(i).addClass('current').siblings().removeClass('current');

})
$slide_l.click(function() {
    i--;
    // console.log(i)
    if (i < 0) {
        $slide_ul.css({
            left: -($length - 1) * imgW + 'px' //判断是第一个li时，无缝连接到最后一个
        })
        $slide_ul.stop().animate({
            left: -($length - 2) * imgW + 'px'
        })
        i = $length - 2;
    } else {
        $slide_ul.stop().animate({
            left: -i * imgW + 'px'
        })
    }
    $a.eq(i).addClass('current').siblings().removeClass('current');

})

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：一个为新手讲解的超级简单无缝轮播图

每一个新手都会遇到一些有banner 轮播的项目，，一次次从网上扒，不如自己写一个轮播使用，这是一个超级超级简单的轮播插件，不如自己动手试试？

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取