一个原创的基于jquery的轮播插件

最新推荐文章于 2024-07-19 15:32:49 发布

置顶弹棉花的gg

最新推荐文章于 2024-07-19 15:32:49 发布

阅读量154

点赞数 2

分类专栏：插件文章标签： jqueru html css

本文链接：https://blog.csdn.net/qwe12378945/article/details/89225311

版权

插件专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这是本人的第一篇博文，说的不到之处忘批评指正。

码思绪：html------>css------>js,这个过程不用多说，虽然轮播是前端比较基础切必须掌握的东西，也不能说它简单，所以思路还是要有的。

1.让所有图片在一行；

2.让图片定时向一个方向运动；

3.点击让其向指定方向运动，切不自己运动；

5.循环运动。

代码如下，直接复制粘贴便可用(predefine.css，base.css见对应博文)：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播</title>
		<link rel="icon" type="image/x-icon" href="img/bitbug_favicon.ico" />
		<link rel="shortcut icon" type="image/x-icon" href="img/jh.png" />
		<link rel="stylesheet" type="text/css" href="css/predefine.css" />
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<style type="text/css">
			@font-face {
				font-family: 'iconfont';
				/* project id 1133431 */
				src: url('//at.alicdn.com/t/font_1133431_iceyvowdbk.eot');
				src: url('//at.alicdn.com/t/font_1133431_iceyvowdbk.eot?#iefix') format('embedded-opentype'),
					url('//at.alicdn.com/t/font_1133431_iceyvowdbk.woff2') format('woff2'),
					url('//at.alicdn.com/t/font_1133431_iceyvowdbk.woff') format('woff'),
					url('//at.alicdn.com/t/font_1133431_iceyvowdbk.ttf') format('truetype'),
					url('//at.alicdn.com/t/font_1133431_iceyvowdbk.svg#iconfont') format('svg');
			}

			.iconfont {
				font-family: "iconfont" !important;
				font-size: 20px;
				font-style: normal;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				color: #879CAD;
			}

			.iconfont:hover {
				color: #0078D7;
			}

			.box {
				width: 300px;
				height: 169px;
				overflow: hidden;
				position: relative;
				margin-left: auto;
				margin-right: auto;
			}

			.box>a {
				width: 20px;
				height: 21px;
				display: inline-block;
				position: absolute;
				line-height: 169px;
			}

			.box>a.prev {
				left: 0;
			}

			.box>a.next {
				right: 0;
			}

			.box>ul {
				width: 9999px;
				position: absolute;
				left: 0px;
				transition: left .2s;
			}

			.box>ul>li {
				float: left;
				position: relative;
				width: 300px;
				height: 169px;
				text-align: center;
				padding: 0;
				margin: 0;
			}

			.box>ul>li img {
				display: block;
				width: 100%;
				height: 100%;
			}

			.box>ul>li span {
				display: inline-block;
				width: 100%;
				line-height: 32px;
				background-color: #000000;
				opacity: 0.62;
				position: absolute;
				color: #FFFFFF;
				left: 0;
				bottom: 0;
				text-align: right;
				padding-right: 8px;
			}

			.box .box-nicon {
				width: 50%;
				height: 32px;
				position: absolute;
				bottom: 0;
				right: 0;
				padding: 13px 15px;
			}

			.box .box-nicon li {
				width: 8px;
				height: 8px;
				border-radius: 8px;
				background-color: #FFFFFF;
				/* 	float: right; */
				margin-left: 5px;
				cursor: pointer;
			}

			.box .box-nicon li.active {
				background-color: #0078D7;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul class="list-inline box-detail">
				<li><a href=""><img src="http://pic1.nipic.com/2008-08-14/2008814183939909_2.jpg"><span>00000000000</span></a></li>
				<li><img src="http://pic24.nipic.com/20120906/2786001_082828452000_2.jpg"><span>000000000001</span></li>
				<li><img src="http://pic1.win4000.com/wallpaper/9/5450ae2fdef8a.jpg"><span>000000000002</span></li>
				<li><img src="http://pic75.nipic.com/file/20150821/9448607_145742365000_2.jpg"><span>000000000003</span></li>
				<li><img src="http://pic31.nipic.com/20130804/7487939_090818211000_2.jpg"><span>000000000004</span></li>
			</ul>
			<ul class="list-inline box-nicon">
				<li class="active"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<a class="prev" href="javascript:void(0)"><i class="iconfont">&#xe65f;</i></a>
			<a class="next" href="javascript:void(0)"><i class="iconfont">&#xe615;</i></a>
		</div>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*Describe:轮播
			 *Author:kingmain318@163.com
			 *Time:2019-04-11
			 */
			var so = {
				//从第一张开始轮播
				num: 0,
				//轮播时间
				t: 4000
			};
			(
				function(so) {
					var num = so.num,
						id = $(".box>ul.box-detail>li").length,
						t = 4000;
					var selider = {
						mode: function(num) {
							$(".box>ul.box-detail").css("left", "-" + num * this.width() + "px");
							$(".box>ul.box-nicon li").eq(num).addClass("active").siblings().removeClass("active");
						},
						//轮播容器单位长度
						width: function() {
							var reg = new RegExp("px", "g");
							var str = $(".box>ul.box-detail>li").css("width").replace(reg, "");
							return Number(str);
						},
						next: function() {
							num++;
							if (num == id) {
								num = 0
							}
							this.mode(num)
						},
						prev: function() {
							if (num == 0) {
								num = id
							}
							num--;
							this.mode(num)
						},
						mter: function(num) {
							this.mode(num)
						}
					}
					$(".box>.prev").on("click", function() {
						selider.prev()
					});
					$(".box>.next").on("click", function() {
						selider.next()
					});
					//轮播
					var sit = setInterval(function() {
						selider.next();
					}, so.t);
					//移入停止  
					$(".box").mouseenter(function() {
						clearInterval(sit)
					});
					//移出继续
					$(".box").mouseleave(function() {
						sit = setInterval(function() {
							selider.next();
						}, so.t);
					});
					//跳跃
					$(".box>ul.box-nicon li").mouseenter(function() {
						selider.mter($(this).index());
						num = $(this).index();
					})
				}(so))
		</script>
	</body>
</html>

弹棉花的gg

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
一个原创的基于jquery的轮播插件

这是本人的第一篇博文，说的不到之处忘批评指正。码思绪：html------>css------>js,这个过程不用多说，虽然轮播是前端比较基础切必须掌握的东西，也不能说它简单，所以思路还是要有的。 1.让所有图片在一行； 2.让图片定时向一个方向运动； 3.点击让其向指定方向运动，切不自己运动； 5.循环运动。代码如下，直...
复制链接

扫一扫