基于JQuery的插件--简单轮播器

原创已于 2022-02-22 14:51:24 修改 · 812 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery插件 #图片轮播 #jquery

于 2017-09-28 17:01:32 首次发布

javascript 同时被 2 个专栏收录

9 篇文章

订阅专栏

CSS3+HTML5

3 篇文章

订阅专栏

本文介绍了一个基于JQuery的轮播插件实现方法，包括HTML结构定义、CSS样式设置及JQuery插件代码，该插件支持水平和垂直方向上的图片轮播，并通过导航点进行切换。

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

JQuery插件：在jquery的基础上封装的一个基于jquery的插件。

Html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播器1</title>
		<link rel="stylesheet" href="css/CarouselH.css" />
		<script type="text/javascript" src="js/jquery-3.2.0.js" ></script>		
                <script type="text/javascript" src="js/Carousel插件.js" ></script>
		<script type="text/javascript">
			$(function(){
				$("#icarousel").CarouselToH(); //调用插件
			});
		</script>
	</head>
	<body>	
			<div id="icarousel">
			    <ul class="content">
				    <li class="item"><img src="img/1.jpg"></li>
					<li class="item"><img src="img/2.jpg"></li>
					<li class="item"><img src="img/3.png"></li>
				</ul>
				<ul class="dot">
					<li class="hover"></li>
					<li></li>
					<li></li>
				</ul>
			</div>
	</body>
</html>

Css

 #icarousel>.content{
	position: relative;
	top:0px;
	list-style: none;
	width: 100%;
	height: 100%;
    background: green;
}  
#icarousel>.content>.item{
    width: 100%;
	height: 100%;
}
#icarousel>.content img{
	width: 100%;
	height: 100%;
}
/*轮播器提示点*/
#icarousel>.dot{
	position: absolute;
	bottom:10px;left: 50%;
	overflow: hidden;
	list-style: none;
   -webkit-transform: translate(-50%, -50%);/*盒子居中*/
   -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);	
}
#icarousel>.dot>li{
	float: left;
	display: block;
	margin: 0 5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(250,250,250,0.4);
}
li.hover{
	background: red !important; 
}
#icarousel>.left,#icarousel>.right{
	position: absolute;
	top: 50%;
	margin-top: -35px;
	font-size: 60px;
	line-height: 70px;
	color:rgba(160, 173, 160, 0.57);
	box-sizing: border-box;
}

Jquery插件代码

;(function($,window,document,undefined){
    $.fn.CarouselToH = function(options){
    	var height=this.height();
    	var defaults = {
            sel:'.content',
            selDot:'.dot>li',
            dotEvent:'click',
        }
        var options = $.extend(true,defaults,options);
        this.find(options.selDot).on(options.dotEvent,function(){
        	_this=$(this);
        	_this.addClass('hover').siblings().removeClass('hover');
        	_this.parent().prev().stop().animate({top:-_this.index()*height+"px"},500);
        });
    } 
    $.fn.CarouselToW = function(options){
    	var width=this.width();
    	var defaults = {
            sel:'.content',
            selDot:'.dot>li',
            dotEvent:'click',
        }
        var options = $.extend(true,defaults,options);
        this.find(options.selDot).on(options.dotEvent,function(){
        	_this=$(this);
        	_this.addClass('hover').siblings().removeClass('hover');
        	_this.parent().prev().stop().animate({left:-_this.index()*width+"px"},500);
        });
    }    
})(jQuery,window,document);

总结：如果项目是基于Jquery我们可以封装一些基于Jquery的插件，以便重复使用。

此外我们还可以写基于jquery的方法这个有类似C#里面的拓展方法。