js 轮播图封装

最新推荐文章于 2022-06-13 18:42:25 发布

原创最新推荐文章于 2022-06-13 18:42:25 发布 · 391 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#轮播图 #封装

js 专栏收录该内容

26 篇文章

订阅专栏

博客主要围绕轮播图的封装展开，涉及到HTML部分搭建结构，JS部分实现交互功能，以及CSS样式进行美化，是前端开发中关于轮播图实现的相关内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播</title>
		<link rel="stylesheet" type="text/css" href="style.css"/>
		<script type="text/javascript" src="jq2.0.js"></script>
		<script type="text/javascript" src="banner.js"></script>
		
	</head>
	<body>
		<!-- 轮播 -->
		<div class="banner" id="J_bg_ban">
		　　<ul>
		　　　　<li><a href="#"><img src="https://zsqosos.github.io/component_library/img/banner_01.jpg" alt="广告图"/></a></li>
		　　　　<li><a href="#"><img src="https://zsqosos.github.io/component_library/img/banner_02.jpg" alt="广告图"/></a></li>
		　　　　<li><a href="#"><img src="https://zsqosos.github.io/component_library/img/banner_03.jpg" alt="广告图"/></a></li>
		　　　　<li><a href="#"><img src="https://zsqosos.github.io/component_library/img/banner_04.jpg" alt="广告图"/></a></li>
		　　　　<li><a href="#"><img src="https://zsqosos.github.io/component_library/img/banner_05.jpg" alt="广告图"/></a></li>
		　　</ul>
		　　<div class="indicator" id="J_bg_indicator"></div>
		　　<div class="ban-btn clearfloat" id="J_bg_btn">
		　　　　<a class="next-btn fr" href="javascript:">&gt;</a><a class="prev-btn fl" href="javascript:">&lt;</a>
		　　</div>
		<script type="text/javascript">
			$(document).ready(function(){
				var banner1 = new Carousel('#J_bg_ban', '#J_bg_indicator', '#J_bg_btn');
			})
		</script>
	</body>
</html>

js部分

// 构造函数加原型形式

    /**
     * 构造函数初始化及开始轮播
     * @param bannnerBox string 包含整个轮播图盒子的id或class
     * @param aBox  string 包含指示器的盒子的id或class
     * @param btnBox string 包含前后按钮的盒子的id或class
     */
    function Carousel(bannnerBox, aBox, btnBox) {
        this.now = 0; //当前显示的图片索引
        this.hasStarted = false; //是否开始轮播
        this.interval = null; //定时器
        this.liItems = null; //要轮播的li元素集合
        this.len = 0; //liItems的长度
		
		this.bannnerBox = null; //包含指示器的dom对象
        this.aBox = null; //包含指示器的dom对象
        this.bBox = null; //包含前后按钮的dom对象

        //初始化函数
        this.init = function () {
            //初始化对象参数
            var that = this;
            this.liItems = $(bannnerBox).find('ul').find('li');
            this.len = this.liItems.length;
            this.aBox = $(bannnerBox).find(aBox);
            this.bBox = $(bannnerBox).find(btnBox);
            //让第一张图片显示，根据轮播图数量动态创建指示器，并让第一个指示器处于激活状态，隐藏前后按钮
            this.liItems.first('li').css({
                'opacity': 1,
                'z-index': 1
            }).siblings('li').css({
                'opacity': 0,
                'z-index': 0
            });
            var aDom = '';
            for (var i = 0; i < this.len; i++) {
                aDom += '<a></a>';
            }
            $(aDom).appendTo(this.aBox);
            this.aBox.find('a:first').addClass("indicator-active");
            this.bBox.hide();
            //鼠标移入banner图时，停止轮播并显示前后按钮，移出时开始轮播并隐藏前后按钮
            $(bannnerBox).hover(function () {
                that.stop();
                that.bBox.fadeIn(200);
            }, function () {
                that.start();
                that.bBox.fadeOut(200);
            });
            //鼠标移入指示器时，显示对应图片，移出时继续播放
            this.aBox.find('a').hover(function () {
                that.stop();
                var out = that.aBox.find('a').filter('.indicator-active').index();
                that.now = $(this).index();
                if (out != that.now) {
                    that.play(out, that.now)
                }
            }, function () {
                that.start();
            });
            //点击左右按钮时显示上一张或下一张
            $(btnBox).find('a:first').click(function () {
                that.next()
            });
            $(btnBox).find('a:last').click(function () {
                that.prev()
            });
        }
        //初始化
        this.init();
        //开始轮播
        this.start();
    }


    /**
     * 播放函数
     * @param out number 要消失的图片的索引值
     * @param now number 接下来要轮播的图的索引值
     */
    Carousel.prototype.play = function (out, now) {
        this.liItems.eq(out).stop().animate({
            opacity: 0,
            'z-index': 0
        }, 500).end().eq(now).stop().animate({
            opacity: 1,
            'z-index': 1
        }, 500);
        this.aBox.find('a').removeClass('indicator-active').eq(now).addClass('indicator-active');
    }

    //前一张函数
    Carousel.prototype.prev = function () {
        var out = this.now;
        this.now = (--this.now + this.len) % this.len;
        this.play(out, this.now)
    }

    //后一张函数
    Carousel.prototype.next = function () {
        var out = this.now;
        this.now = ++this.now % this.len;
        this.play(out, this.now);
    }

    //开始函数
    Carousel.prototype.start = function () {
        if (!this.hasStarted) {
            this.hasStarted = true;
            var that = this;
            this.interval = setInterval(function () {
                that.next();
            }, 2000);
        }
    }
    //停止函数
    Carousel.prototype.stop = function () {
        clearInterval(this.interval);
        this.hasStarted = false;
    }
	// window.Carousel = Carousel;

css样式

.banner {
    height: 325px;
    width: 812px;
    position: relative;
    overflow: hidden;
}
.banner ul{
    padding: 0;
    margin: 0;
}
.banner ul li{
    top: 0;
    left: 0;
    list-style: none;
    position: absolute;
}
.banner ul li img{
    height: 325px;
    width: 812px;
    display: block;
}
.ban-btn{
    width: 100%;
    position: absolute;
    top: 136px;
    z-index: 2;
}
.ban-btn a{
    display: inline-block;
    height: 60px;
    width: 35px;
    background: rgba(180,180,180,0.5);
    font-size: 25px;
    text-align: center;
    line-height: 60px;
    color: #fff;
    text-decoration: none;
}
.next-btn{
    float: right;
}
.prev-btn{
    float: left;
}
.ban-btn a:hover{
    background: rgba(100,100,100,0.5);
}
.indicator{
    width: 100%;
    position: absolute;
    text-align: center;
    bottom: 15px;
    z-index: 2;
}
.indicator a{
    display: inline-block;
    width: 20px;
    height: 5px;
    margin:0 3px;
    background: #fff;
}
.indicator-active{
    background: #FF8C00!important;
}