jQuery轮播图代码

Html

Css

.wrapper {
	width:500px;
	height:300px;
	margin:0 auto;
	background:#ddd;
}
.item img {
	width:100%;
	height:100%;
}

.my-swiper-btn {
	font-family:'iconfont'; 
	width:25px;
	height:35px;
	position:absolute;
	top:50%;
	margin-top:-17px;
	background:rgba(0,0,0,.15);
	color:#fff;
	font-size:20px;
	font-weight:900;
	text-align:center;
	line-height:35px;
	cursor:pointer;font-family:"宋体";
}
.my-swiper-btn:hover {
	background:rgba(0,0,0,.4)
}
.my-swiper-lbtn {
	left:-3px;
	border-top-right-radius:17.5px;
	border-bottom-right-radius:17.5px;
}
.my-swiper-rbtn {
	border-top-left-radius:17.5px;
	border-bottom-left-radius:17.5px;
	right:-3px;
}
.my-swiper-wrapper {
	position:relative;
	overflow:hidden;
}
.my-swiper-wrapper> ul {
	padding:0;
	margin:0;
}
.my-swiper-wrapper > ul >li {
	padding:0;
	margin:0;
	list-style:none;
}
.my-swiper-animate .my-swiper-content::after {
	content:'';
	display:block;
	clear:both;
}
.my-swiper-animate .my-swiper-item {
	float:left;
}
.my-swiper-fade .my-swiper-content {
	position:relative;
}
.my-swiper-fade .my-swiper-item {
	position:absolute;
}
.my-swiper-spots {
	position:absolute;
	bottom:0;
	padding:10px 20px;
	left:0;
	right:0;
}
.my-swiper-spots span {
	display:inline-block;
	width:10px;
	height:10px;
	border-radius:50%;
	background:#eee;
	margin:0 5px;
}
.my-swiper-spots span.my-swiper-current {
	background:skyblue;
}
.my-swiper-content {
	position:absolute;
}

(function() {
    // 储存轮播图的构造函数，主要用来储存信息
    function Switch(options, self) {
        // 显示区域的大小
        this.width = options.width || self.parend().offsetWidth;
        this.height = options.height || self.parend().offsetHeight;
        // 轮播的内容
        this.list = options.list || [];
        // 轮播图的个数
        this.len = this.list.length;
        // 自动轮播的时间
        this.times = this.times || 2000;
        // 是否显示 小圆点 默认为显示 
        this.showSpots = options.showSpots ? true : false;
        // 轮播效果 animate从左到右  fade 透明轮播
        this.type = options.type || 'fade';
        // 是否自动轮播
        this.isAuto = options.isAuto ? true : false;
        // 左右按钮的状态
        this.changeBtnStatus = options.changeBtnStatus || 'always';
        // 小圆点的位置
        this.spotsPosition = options.spotsPosition || 'left';
        // 添加轮播图的位置---父级
        this.wrap = self;
        // 当前图片的图片的索引值
        this.nowIndex = 0;
        // 节流
        this.isPlaying = false;
        // 自动
        this.timer = null;
    }

// 初始化轮播图
    Switch.prototype.init = function() {
        // 创建结构
        this.createDom()
        // 初始化样式
        this.initStyle()
        // 添加轮播功能
        this.bindEvent()
        // 是否需要自动轮播
        if (this.isAuto) {
            this.autoChange();
        }
        this.change()
    }

// 创建轮播图结构
    Switch.prototype.createDom = function() {
        var swiperWrapper = $('<div class="my-swiper-wrapper"></div>')
        var swiperContent = $('<ul class="my-swiper-content"></ul>')
        var swiperSptos = $('<div class="my-swiper-spots"></div>')
        for (var i = 0; i < this.len; i++) {
            $('<li class="my-swiper-item"></li>').html(this.list[i])
                .appendTo(swiperContent)

$('<span></span>').appendTo(swiperSptos)
        }
        if (this.type === 'animate') {
            $('<li class="my-swiper-item"></li>').html($(this.list[0]).clone())
                .appendTo(swiperContent)
        }
        var leftBtn = $('<div class="my-swiper-btn my-swiper-lbtn"> < </div>')
        var rightBtn = $('<div class="my-swiper-btn my-swiper-rbtn"> > </div>')

swiperWrapper.append(swiperContent)
            .append(leftBtn)
            .append(rightBtn)
            .append(swiperSptos)
            .appendTo(this.wrap)
        swiperWrapper.addClass('my-swiper-' + this.type);

}

// 样式
    Switch.prototype.initStyle = function() {
        $('.my-swiper-wrapper', this.wrap).css({
            width: this.width,
            height: this.height,
        }).find('.my-swiper-content').css({
            width: this.type === 'animate' ? (this.len + 1) * this.width : this.width,
            height: this.height,
        }).find('.my-swiper-item').css({
            width: this.width,
            height: this.height,
        })
        $(this.wrap).find('.my-swiper-wrapper')
            .find('.my-swiper-spots').css({
                textAlign: this.spotsPosition,
            })
            .find('.my-swiper-spots span').eq(this.nowIndex).addClass('my-swiper-current');
        if (!this.showSpots) {
            $(this.wrap).find('.my-swiper-wrapper')
                .find('.my-swiper-spots').hide();
        }
        switch (this.changeBtnStatus) {
            case "hide":
                $(this.wrap).find('.my-swiper-wrapper')
                    .find('.my-swiper-btn').hide();
                break;
            case "hover":
                $(this.wrap).find('.my-swiper-wrapper')
                    .hover(function() {
                        $(this).find('.my-swiper-btn').fadeIn();
                    }, function() {
                        $(this).find('.my-swiper-btn').fadeOut()
                    })
                    .find('.my-swiper-btn').hide();
                break;
            default:
                break;
        }
    }

// 事件
    Switch.prototype.bindEvent = function() {
        var self = this;
        $(this.wrap).find('.my-swiper-wrapper')
            .mouseenter(function() {
                clearInterval(self.timer)
            })
            .mouseleave(function() {
                self.autoChange()
            })
            .find('.my-swiper-lbtn')
            .click(function() {
                if (self.isplaying) {
                    return false
                }
                self.isplaying = true;
                if (self.type == 'animate') {
                    if (self.nowIndex == 0) {
                        $(self.wrap).find('.my-swiper-wrapper')
                            .find('.my-swiper-content').css({
                                left: -self.width * self.len
                            })
                        self.nowIndex = self.len - 1;
                    } else {
                        self.nowIndex--;
                    }

} else if (self.type == 'fade') {
                    if (self.nowIndex == 0) {
                        self.nowIndex = self.len - 1;
                    } else {
                        self.nowIndex--;
                    }
                }
                // 调用切换方法
                self.change()
            })
            .end()
            .find('.my-swiper-rbtn')
            .click(function() {
                if (self.isplaying) {
                    return false
                }
                self.isplaying = true;
                if (self.type == 'animate') {
                    if (self.nowIndex == self.len) {
                        $(self.wrap).find('.my-swiper-wrapper')
                            .find('.my-swiper-content').css({
                                left: 0
                            })
                        self.nowIndex = 1
                    } else {
                        self.nowIndex++;
                    }
                } else if (self.type == 'fade') {
                    if (self.nowIndex == self.len - 1) {
                        self.nowIndex = 0
                    } else {
                        self.nowIndex++;
                    }
                }
                // 调用切换方法
                self.change()
            })
            .end()
            .find('.my-swiper-spots > span')
            .mouseenter(function() {
                if (self.isplaying) {
                    return false
                }
                var index = $(this).index();
                self.nowIndex = index;
                self.change()
            })
    }

// 切换效果
    Switch.prototype.change = function() {
        var self = this;
        if (this.type == 'fade') {
            $(this.wrap).find('.my-swiper-wrapper')
                .find('.my-swiper-item')
                .eq(this.nowIndex).fadeIn(function() {
                    self.isplaying = false;
                })
                .siblings().fadeOut()
        } else if (this.type == 'animate') {
            $(this.wrap).find('.my-swiper-wrapper')
                .find('.my-swiper-content')
                .animate({
                    left: -this.nowIndex * this.width,
                }, function() {
                    self.isplaying = false;
                })
        }
        $(this.wrap).find('.my-swiper-wrapper > .my-swiper-spots')
            .find('span').eq(self.nowIndex % self.len).addClass('my-swiper-current')
            .siblings().removeClass('my-swiper-current')
    }

// 自动轮播
    Switch.prototype.autoChange = function() {
        var self = this;
        this.timer = setInterval(function() {
            $(self.wrap).find('.my-swiper-wrapper').find('.my-swiper-rbtn').click()
        }, this.times)
    }
    // 
    $.fn.extend({
        swiper: function(options) {
            var obj = new Switch(options, this);
            obj.init()
        }
    })
}())

$('.wrapper').swiper({
    width: 500,
    height: 300,
    list: $('.item'),
    times: 3000,
    showSpots: true,
    type: 'fade',
    isAuto: true,
    changeBtnStatus: 'always',
    spotsPosition: 'center'

})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.0.0

立即下载

jQuery轮播图代码



代码描述：jQuery轮播图代码，可选轮播类型

更新时间：2021-04-06 15:41:22
$('.wrapper').swiper({ // 定义父元素，元素就会添加到该元素内 width: 500, // 定义宽度 height: 400, // 定义高度 list: $('.item'), // 定义子元素，该元素会被添加到父元素内 times: 3000, // 定义轮播时间 showspots: true, // 轮播类型 fade淡入淡出/animate从左到右 type: 'fade', // 是否自动轮播，true/false isauto: true, // 左右按钮的状态 changebtnstatus: 'always', // 按钮是否显示 always默认显示/hide没有按钮/hover鼠标移入显示按钮 spotsposition: 'center' // 定义小圆点位置 left左边/center中间/right右边 })

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

?年

相关代码

jQuery轮播图代码

最新