自定义图片轮播插件

最新推荐文章于 2024-05-30 09:45:37 发布

奋斗的菜鸟.com

最新推荐文章于 2024-05-30 09:45:37 发布

阅读量354

点赞数 2

分类专栏：插件 js 文章标签： javascript jquery

本文链接：https://blog.csdn.net/CodePrincess/article/details/124615106

版权

js 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

插件

3 篇文章 0 订阅

订阅专栏

图片和小圆点对应显示，点左边按钮，可显示上一张图片，右边按钮，显示下一张，有第一张和最后一张两个零界点，点击小圆点也可显示相应的图片，不做任何点击时，图片是从左往右自动播放的，一旦手动触发了轮播，定时器自动播放结束
以下是完整的代码

img_change页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,
		minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--引入CSS代码-->
		<link rel="stylesheet" type="text/css" href="./index.css"/>
		<!--引入Js代码-->
       
		<title>Js实现轮播图</title>
	</head>
	<body>
		<div class="lunbo">
			<div class="content">
			<ul id="item">
				<li class="item active">
					<a href="#"><img src="../img/bg0.jpg" ></a>
				</li>
				<li class="item">
					<a href="#"><img src="../img/bg1.jpg" ></a>
				</li>
				<li class="item">
					<a href="#"><img src="../img/bg2.jpg" ></a>
				</li>
				<li class="item">
					<a href="#"><img src="../img/bg3.jpg" ></a>
				</li>
				<li class="item">
					<a href="#"><img src="../img/bg4.jpg" ></a>
				</li>
			</ul>
			<div id="btn-left"><</div>
			<div id="btn-right">></div>
			<ul id="circle">
				
				<li class="circle white"></li>
				<li class="circle"></li>
				<li class="circle"></li>
				<li class="circle"></li>
				<li class="circle"></li>
			</ul>
			</div>
		</div>
	</body>
	<script src="../js/jQuery.min.js"></script>
	<script src="./index.js"></script>
	<script>
		$(".lunbo").lub({ cir_type:'click',timer:'1000'});
	</script>
</html>

index.css


*{
	margin: 0;
	padding: 0;
}
a{
	list-style: none;
}
li{
	list-style: none;
}
.lunbo{
	width: 100%;
}
.content{
	width: 800px;
	height: 300px;
	margin: 20px auto;
	position: relative;
}
#item{
	width: 100%;
	height: 100%;
	
}
.item{
	position: absolute;
	opacity: 0;
	transition: all 1s;
	
}
.item.active{
	opacity:1;
}
img{
	width: 800px;
	height: 298px;
}
#btn-left{
	width: 30px;
	height: 69px;
	font-size: 30px;
	color: white;
	background-color:rgba(0,0,0,0.4);
	line-height: 69px;
	padding-left:5px;
	z-index: 10;/*始终显示在图片的上层*/
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-60%);/*使按钮向上偏移居中对齐*/
	cursor: pointer;
	opacity: 0;
	/* 平时隐藏 */
}
.lunbo:hover #btn-left{
	/*鼠标滑入，显示图标*/
	opacity: 1;
}

#btn-right{
	width: 26px;
	height: 69px;
	font-size: 30px;
	color: white;
	background-color:rgba(0,0,0,0.4);
	line-height: 69px;
	padding-left: 5px;
	z-index: 10;
	position: absolute;
	right: 0;
	top: 50%;
	cursor: pointer;
	opacity: 0;
	transform: translateY(-60%);
}
.lunbo:hover #btn-right{
	opacity: 1;
}
#circle{
	height: 20px;
	display: flex;
	position: absolute;
	bottom: 35px;
	right: 25px;
}
.circle{
	width: 10px;
	height: 10px;
	border-radius: 10px;
	border: 2px solid white;
	background: rgba(0,0,0,0.4);
	cursor: pointer;
	margin: 5px;
}
.white{
	background-color: white;
}

index.js

普通写法

let $cirli = $("#circle li");
let $imgli = $("#item li");
$cirli.on("mouseover", function () {
    let index_ = $(this).index();
    $(this).addClass("white").siblings().removeClass("white");
    $imgli.eq(index_).addClass("active").siblings().removeClass("active");
    clearInterval(timmer);
})

$("#btn-right").click(function () {//显示下一个，临界点是最后一个，当前是最后一张图片，这时找下一个，索引又变成第一个
    let index_ = $("#item li.active").index();
    let index = index_ + 1;
    if (index == $("#item li").length) {
        index = 0;
    }
    $("#item li").eq(index).addClass("active").siblings().removeClass("active");
    $cirli.eq(index).addClass("white").siblings().removeClass("white");
    clearInterval(timmer);
})
$("#btn-left").click(function () {  //显示前一个，临界点是第一个，当前是第一张图片，这时找上一个，索引又变成最后一个
    let index_ = $("#item li.active").index();
    let index = index_ - 1;
    if (index == -1) {
        index = $("#item li").length - 1;
    }
    $("#item li").eq(index).addClass("active").siblings().removeClass("active");
    $cirli.eq(index).addClass("white").siblings().removeClass("white");
    clearInterval(timmer);

})
var timmer = setInterval(function () {

    let index_ = $("#item li.active").index();
    let index = index_ + 1;
    if (index == $("#item li").length) {
        index = 0;
    }
    $("#item li").eq(index).addClass("active").siblings().removeClass("active");
    $cirli.eq(index).addClass("white").siblings().removeClass("white");

}, 2000)

优化成插件写法

关于定时器

点击左右按钮和小圆点时，阻止自动播放，需清除定时器
每一个定时器有一个id 即这里的timer
执行了清除代码，后面的代码依然会执行，只是下一轮定时器函数不会执行
timer是调用setInterval函数之后生成的定时器未完待续…

(function($){
    let defaults={
        l_btn:'#btn-left',
        r_btn:'#btn-right',
        cir_cli:'#circle li',
        imgli:'#item li',
        cir_type:'mouseover', 
        //圆点的鼠标悬浮事件触发，可以手动配置成click  在imgchange.html页面$(".lunbo").lub({ cir_type:'click',timer:'1000'}); 改变了圆点的触发事件和自动播放间隔
        lbtn_type:'click', 
        rbtn_type:'click',
        cur_img_class:'active',
        cur_point_class:'white',
        timer:'2000' //自动播放间隔
    }
    
    $.fn.lub = function (options_) {
        let options = $.extend(defaults, options_); //结合默认设置和手动配置

        $(options.cir_cli).on(options.cir_type, function () {
            let index_ = $(this).index();
            $(this).addClass(options.cur_point_class).siblings().removeClass(options.cur_point_class);
            $(options.imgli).eq(index_).addClass(options.cur_img_class).siblings().removeClass(options.cur_img_class);
            clearInterval(timmer);
        })

        $(options.r_btn).on(options.rbtn_type, function () { //显示下一个，临界点是最后一个，当前是最后一张图片，这时找下一个，索引又变成第一个
            lub_change.auto_change();
            clearInterval(timmer);
        })
        $(options.l_btn).on(options.lbtn_type, function () { //显示前一个，临界点是第一个，当前是第一张图片，这时找上一个，索引又变成最后一个
            let index_ = $(options.imgli + '.' + options.cur_img_class).index();
            let index = index_ - 1;
            if (index == -1) {
                index = $(options.imgli).length - 1;
            }
            lub_change.active_img_point(index);
            clearInterval(timmer);

        })
        let lub_change = {
            auto_change: function () {
                let index_ = $(options.imgli + '.' + options.cur_img_class).index();
                let index = index_ + 1;
                if (index == $(options.imgli).length) {
                    index = 0;
                }
                lub_change.active_img_point(index);
            },
            active_img_point: function (index) {
                $(options.imgli).eq(index).addClass(options.cur_img_class).siblings().removeClass(options.cur_img_class);
                $(options.cir_cli).eq(index).addClass(options.cur_point_class).siblings().removeClass(options.cur_point_class);
            }
        }
        var timmer = setInterval(function () {
            lub_change.auto_change();
        }, options.timer);
    }
})(jQuery)