JavaScript基础（十四）淘宝banner、京东banner、弹窗组件

最新推荐文章于 2022-02-08 14:47:40 发布
最新推荐文章于 2022-02-08 14:47:40 发布
阅读量172 收藏
点赞数
分类专栏： HTML/CSS/JavaScrript 文章标签： 无缝Banner
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangwei234/article/details/85226039
版权

淘宝banner、京东banner、弹窗组件

淘宝无缝Banner

*{padding:0;margin: 0;}
body{background:gray;}
ul li{list-style: none;}
#banner{width: 520px;height: 280px;margin: 50px auto;position: relative;overflow: hidden;box-shadow: 0 0 1em pink;}
#banner:hover .btn div{display: block;}
/*图片*/
#banner .pic ul{width: 1000%;margin-left: -520px;}
#banner .pic li{float: left;}
#banner .pic li img{cursor: pointer;}
/*图片切换按钮*/
#banner .tab ul{width: 72px;height: 14px;background: rgba(255, 255, 255, .3);position: absolute;bottom: 10px;left: 50%;margin-left: -36px;border-radius: 7px;}
#banner .tab li{float: left;width: 10px;height: 10px;background: #ccc;border-radius: 50%;margin: 2px;cursor: pointer;}
#banner .tab li.on{background: #f60;}
/*左右按钮*/
#banner .btn div{width: 24px;height: 36px;background: rgba(0,0,0,.3);position: absolute;font-size: 24px;color: #e5e5e5;font-weight: bold;text-align: center;line-height: 36px;top:50%;margin-top: -18px;cursor: pointer;display: none;}
#banner .btn div:hover{background: rgba(0, 0, 0, .6);}
#banner .btn .left-btn{left: 0}
#banner .btn .right-btn{right: 0}

<div id="banner">
	<div class="pic">
		<ul>
			<li><img src="img/taobao/5.jpg"/></li>
			<li><img src="img/taobao/1.jpg"/></li>
			<li><img src="img/taobao/2.jpg"/></li>
			<li><img src="img/taobao/3.jpg"/></li>
			<li><img src="img/taobao/4.jpg"/></li>
			<li><img src="img/taobao/5.jpg"/></li>
			<li><img src="img/taobao/1.jpg"/></li>
		</ul>
	</div>
	<div class="tab">
		<ul><li class="on"></li><li></li><li></li><li></li><li></li></ul>
	</div>
	<div class="btn">
		<div class="left-btn">&lt;</div>
		<div class="right-btn">&gt;</div>
	</div>
</div>

$(function(){
	var $banner = $('#banner');
	var $tabLis = $('#banner .tab li');
	var imgWidth = $('#banner .pic li').width();
	var imgConut = $tabLis.length;
	var $imgUl = $('#banner .pic ul');
	var $btnDiv = $('#banner .btn div');
	var imgIndex = 0;
	var timer;
	var nowTime = 0;
	// 图片切换 
	$tabLis.click(function(){
		var index = $(this).index();
		imgIndex = index;		
		$(this).addClass('on').siblings().removeClass('on');
		$imgUl.animate({marginLeft: -imgWidth*(imgIndex+1)}, 500);
	});
	// 左右按钮切换
	$btnDiv.click(function(){
		if(new Date().getTime() - nowTime > 600){
			nowTime = new Date().getTime();
			var index = $(this).index();
			if(index == 0){ // 左边按钮
				imgIndex--;
			}else{ // 右边按钮
				imgIndex++;
			}
			fn();
		}
	}).mousedown(function(){
		return false;
	});
	$banner.hover(function(){
		clearInterval(timer);
	},function(){
		auto();
	});
	auto();
	// 自动轮播
	function auto(){
		timer = setInterval(function(){
			imgIndex++;
			fn();
		}, 1000);
	}
	// 轮播切换
	function fn(){
		var tmpIndex = imgIndex;
		if(tmpIndex == imgConut){
			tmpIndex = 0;
		}
		if(tmpIndex < 0){
			tmpIndex = imgConut-1;
		}
		$tabLis.eq(tmpIndex).addClass('on').siblings().removeClass('on');
		$imgUl.animate({marginLeft: -imgWidth*(imgIndex+1)}, 500, function(){
			if(imgIndex == imgConut){
				$imgUl.css({marginLeft: -imgWidth});
				imgIndex = 0;
			}
			if(imgIndex < 0){
				$imgUl.css({marginLeft: -imgWidth*imgConut});
				imgIndex = imgConut - 1;
			}
		});
	}
});

京东淡入淡出Banner

*{padding:0;margin: 0;}
body{background:gray;}
ul li{list-style: none;}
#banner{width: 730px;height: 454px;margin: 50px auto;position: relative;box-shadow: 0 0 1em pink;}
#banner:hover .btn div{display: block;}
/*图片*/
#banner .pic li{position: absolute;display: none;}
#banner .pic li img{cursor: pointer;}
/*图片切换按钮*/
#banner .tab ul{width: 132px;height: 22px;position: absolute;bottom: 10px;left: 50%;margin-left: -66px;}
#banner .tab li{width: 18px;height: 18px;background: #666;border-radius: 50%;margin: 2px;text-align: center;line-height: 18px;cursor: pointer;color: #e5e5e5;float: left;font-weight: bold;}
#banner .tab li.on{background: #b61b1f;}
/*左右按钮*/
#banner .btn div{width: 28px;height: 62px;background: rgba(0, 0, 0, .3);text-align: center;line-height: 62px;position: absolute;top: 50%;margin-top: -31px;font-size: 26px;color: #fff;display: none;cursor: pointer;}
#banner .btn .left-btn{left: 10px;}
#banner .btn .right-btn{right: 10px;}

<div id="banner">
	<div class="pic">
		<ul>
			<li style="display: block;"><img src="img/jd/1.jpg"/></li>
			<li><img src="img/jd/2.jpg"/></li>
			<li><img src="img/jd/3.jpg"/></li>
			<li><img src="img/jd/4.jpg"/></li>
			<li><img src="img/jd/5.jpg"/></li>
			<li><img src="img/jd/6.jpg"/></li>
		</ul>
	</div>
	<div class="tab">
		<ul><li class="on">1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>
	</div>
	<div class="btn">
		<div class="left-btn">&lt;</div>
		<div class="right-btn">&gt;</div>
	</div>
</div>

$(function(){
	var $banner = $('#banner');
	var $tabLis = $('#banner .tab li');
	var $imgLis = $('#banner .pic li');
	var $btnDiv = $('#banner .btn div');
	var imgConut = $tabLis.length;
	var index = 0;
	var timer;
	var nowTime = 0;

	$tabLis.hover(function(){
		index = $(this).index();
		fn();
	});
	$btnDiv.click(function(){
		if(new Date().getTime() - nowTime > 800){
			nowTime = new Date().getTime();
			var i = $(this).index();
			if(i == 0){ // 左边按钮
				index--;
				if(index<0){
					index = imgConut-1;
				}
			}else{ // 右边按钮
				index++;
				index %= imgConut;
			}
			fn();
		}
	}).mousedown(function(){
		return false;
	});
	$banner.hover(function(){
		clearInterval(timer);
	},function(){
		auto();
	});
	auto();
	// 自动播放
	function auto(){
		timer = setInterval(function(){
			index++;
			index %= imgConut;
			fn();
		}, 1000);
	}
	// 图片切换
	function fn(){
		$tabLis.eq(index).addClass('on').siblings().removeClass('on');
		$imgLis.eq(index).stop(true).fadeIn('slow').siblings().stop(true).fadeOut('slow');
	}
});

弹窗组件

/*dialog.css*/
.dialog{width: 640px;height: 480px;box-shadow:  0 0 1em #ddd;position:fixed;top: 10px;left: 10px;z-index: 2;background: #fff;}
.dialog .header{height: 40px;line-height: 40px;border-bottom: 1px solid #ddd;padding-left: 15px;cursor: move;}
.dialog .header span{font-weight: bold;}
.dialog .content{padding: 10px 15px;height: calc(100% - 110px);overflow: auto;}
.dialog .button{height: 40px;line-height: 40px;text-align: center;position: absolute;bottom: 0;right: 10px;display: flex;}
.dialog .button a{text-decoration: none;display: block;background: #f4f4f4;width: 90px;height: 30px;line-height: 30px;border: 1px solid #ddd;border-radius: 4px;color: #fff; cursor: pointer;margin-left: 10px}
.dialog .button .confirm{background: #24b8f3;}
.dialog .button .confirm:hover{background: #2d78f4;}
.dialog .button .cancel{background: #fff; color: #333;}
.dialog .button .cancel:hover{border-color: #2d78f4;background: #eee;}
.overlay{position: fixed;top:0;left: 0;width: 100%;height: 100%;z-index: 1;background: rgba(0, 0, 0, .3);}
.dialog .header .close{float:right;text-decoration:none;margin-right:10px;color:#000;opacity:0;transition:all .3s ease;}
.dialog:hover .close{opacity:1;transition:all .3s ease;transform:rotate(360deg);}

// dialog.js
(function($){
	var $el = null;
	var $options = {
		width: 640,
		height: 480,
		top: 200,
		title: '标题',
		content: 'Hello, world!',
		dragable: true
	}
	$.dialog = {
		init: function(options){
			$options = $.extend({}, $options, options);
			$el = this.template();
			if($options.dragable){
				this._drag();
			}
			this._style();
			this._resize();
			this._event();
		},
		template: function(title){
			var sb='<div class="dialog">';
				sb+='	<div class="header">';
				sb+='		<span>'+$options.title+'</span>';
				sb+='		<a href="javascript:void(0);" class="close"><i class="iconfont">&#xe607;</i></a>';
				sb+='	</div>';
				sb+='	<div class="content">';
				sb+='		' + $options.content;
				sb+='	</div>';
				sb+='	<div class="button">';
				sb+='		<a href="javascript:void(0);" class="confirm">确定</a>';
				sb+='		<a href="javascript:void(0);" class="cancel">取消</a>';
				sb+='	</div>';
				sb+='</div>';
			var $el = $(sb)
			$('body').append($el).append('<div class="overlay"></div>');
			return $el;
		},
		// 时时改变弹出层位置
		_resize: function(){
			var _this = this;
			$(window).resize(function(){
				_this._position();
			})
		},
		// 标题拖拽
		_drag: function(){
			$el.find('.header').mousedown(function(ev){
				if($options.dragable){
					var e = ev || event;
					var x = e.clientX - $el.offset().left;
					var y = e.clientY - $el.offset().top;
					$(document).mousemove(function(ev){
						var e = ev || event;
						var left = e.clientX - x;
						var top = e.clientY - y;
						// var maxL = $(window).width() - $el.width();// $el.width()不包括边框
						var maxL = $(window).width() - $el.outerWidth();
						// var maxT = $(window).height() - $el.height();
						var maxT = $(window).height() - $el.outerHeight();
						if(left<0) left = 0;
						if(top<0) top = 0;
						if(left>maxL) left = maxL;
						if(top>maxT) top = maxT;
						$el.css({left: left, top: top});
					});
				}
				$(document).mouseup(function(){
					$(document).off('mousemove').off('mouseup');
				}).mousedown(function(){
					return false;
				});
			});
		},
		// 样式修改
		_style: function(){
			var minWidth = 300;
			var minHeight = 150;
			var maxWidth = $(window).width() - 40;
			var maxHeight = $(window).height() - 40;
			var width = $options.width<minWidth ? minWidth :$options.width;
			var height = $options.height < minHeight ? minHeight :$options.height;
			width = $options.width>maxWidth ? maxWidth : $options.width;
			height = $options.height>maxHeight ? maxHeight : $options.height;
			$el.css({
				width: width,
				height: height,
				background: $options.background,
				border: $options.border,
				opacity: $options.opacity,
				zIndex: $options.zIndex
			});
			// 定位
			var top = $options.top ? $options.top : ($(window).height() - $el.outerHeight())/2;
			var left = $options.left ? $options.left : ($(window).width() - $el.outerWidth())/2;
			$el.css({top: top, left: left})
		},
		// 触发事件
		_event: function(){
			// 确认
			$el.find('.confirm').click(function(){
				if($options.callback){
					$options.callback.call($el, {type: 'confirm'});
				}
				$el.remove();
				$('body .overlay').remove();
			});
			// 取消
			$el.find('.cancel, .close').click(function(){
				if($options.callback){
					$options.callback.call($el, {type: 'cancel'});
				}
				$el.remove();
				$('body .overlay').remove();
			});
		}
	}
})(jQuery);

测试

<style type="text/css">
*{padding:0;margin: 0;}
.container{margin: 50px;}
</style>
<link href="dialog/iconfont/iconfont.css" rel="stylesheet"/>
<link href="dialog/css/dialog.css" rel="stylesheet"/>

<div class="container">
	弹窗组件
	<input type="button" value="点击触发" id="btn">
</div>
<script type="text/javascript" src="dialog/js/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="dialog/js/dialog.js"></script>
<script type="text/javascript">
	$(function(){
		$('#btn').click(function(){
			$.dialog.init({
				width: 300,
				height: 150,
				top: 200,
				title: 'Hello',
				content: '你好',
				// dragable: false,
				callback: function(options){
					console.log(this, options)
				}
			});
		})
	});
</script>

在这里插入图片描述

讲文明的喜羊羊拒绝pua
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
react-js-banner:React JS Banner组件
05-01
react-js-banner 具有淡入和淡出动画的简单React JS行横幅组件。...在您的React组件中导入Banner 。 import Banner from 'react-js-banner'; 例子： < Banner title = { this . state . bannerMes
javascript 上下banner替换具体实现
10-26
JavaScript 上下Banner替换是一种常见的网页动态效果，常用于广告轮播或者内容切换，为用户提供更丰富的视觉体验。在这个具体的实现中，我们看到一个简单的例子，它通过JavaScript来控制两个Banner（一个隐藏，一个...
图片 flexslider插件 各个参数
u013820597的专栏
09-04 2273
$(window).load(function() { $('.flexslider').flexslider({ namespace: 'flex-', //控件的命名空间，会影响样式前缀 animation: "slide", //String: Select your animation type, "fade" or "slide"图片变换
js实现banner轮播图（transform）
yhl_nsd的博客
02-08 2494
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、HTML二、css三、js 前言 首尾设置假图片，利用平移，过渡实现动画效果 一、HTML <!-- 轮播图 --> <div class="jd-banner"> <ul class="clearfix"> <!-- 注意: 由于移动是可以左右滑动的, 所以需要两张假图片，为了动画过渡自然--> <li>
原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等
weixin_34250434的博客
08-10 423
         在制作网页过程中，我们可能会遇到各种常用的经典网页特效，比如Banner图片滚动、选项卡循环播放、右下角广告弹窗、评论提交展示、选项动态增删、剪刀石头布小游戏等等等。。。是不是感觉都见到过这些场景、那些这些场景都是如何实现的呢？今天，小瑞老师就一口气把所有经典网页特效效果送给大家！！！          全部都是原生JS实现哦~~根本不需要什么JQuery、AngularJS等各...
VUE 封装自定义banner切换组件
CodingNoob
09-23 5138
一转眼用vue已经半年多的时间了，刚开始用vue的时候是直接看文档边看边边开发的，虽然在项目过程中遇到一些小的问题，不过基本上都可以自己解决，用了了半年后突然发现自己慢慢喜欢上了MVVM框架，没有繁琐的dom操作，自己可以更专注于业务逻辑本身，最近也在看一本书，吴军的《文明之光》，主要讲人类和社会发展史的，个人觉得收获还是挺多的，对整个社会和人类的发展过程有了更为深刻的理解。感兴趣的可以看下！ ...
css+js实现轮播banner
withwz的博客
02-25 386
基本功能 轮回播放 自定义过渡时间、间隔时间 上一张、下一张 完整代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0...
Vue v-model组件封装(类似弹窗组件)
10-15
现在，父组件可以使用 `visible` 来控制弹窗，同时监听 `toggle` 事件来响应组件内部的行为： ```html <v-model v-model="visible" @toggle="onToggle"></v-model> 点击显示 点击消失 import VModel ...
对django layer弹窗组件的使用详解
09-18
在本文中，我们将深入探讨如何在Django项目中使用Layer弹窗组件，这是一个非常实用的前端界面元素，常用于创建对话框、模态窗口或提示信息。Layer组件可以帮助提升用户体验，因为它可以在不离开当前页面的情况下展示...
Vue自定义全局弹窗组件操作
10-14
Vue自定义全局弹窗组件操作是一项常见的前端开发任务，它能极大地提高代码的复用性和项目的维护性。在Vue框架中，我们可以通过以下步骤来创建一个全局可调用的弹窗组件。 首先，我们需要创建一个名为`popup.vue`的...
JavaScript——call、apply和bind方法的用法以及区别
热门推荐
yangwei2048的博客
11-24 1万+
call、apply和bind方法的用法以及区别   call、apply、bind的作用是改变函数运行时this的指向，所以先说清楚this 1、方法调用模式：   当一个函数被保存为对象的一个方法时，如果调用表达式包含一个提取属性的动作，那么他就是被当做一个方法来调用，此时的this被绑定到这个对象。例如 var a = 1; var obj = { a: 2, ...
Ajax请求过程
yangwei2048的博客
11-26 2203
Ajax的使用 （1）创建 XMLHttpRequest 对象，也就是创建一个异步调用对象； （2）创建一个新的 HTTP 请求，并指定该 HTTP 请求的方法、 URL 以及验证信息； （3）设置响应 HTTP 请求状态变化的函数； （4）发送 HTTP 请求； （5）获取异步调用返回的数据； （6）使用 JavaScript 和 DOM 实现局部刷新。 例如： var xmlHttp = n...
JavaScript基础（六）即时函数、链式调用原理
yangwei2048的博客
12-03 453
即时函数、链式调用原理即时函数链式调用的原理 即时函数 // 即时函数 (function(接收参数){ // 代码块 })(传递参数); 例如： (function(a){ alert(a); // 10 ^_^ 即时函数默认会执行一次代码块 })(10); (function(a){ a(); // 1 ^_^ })(function(){alert(1)}); var T = (...
JavaScript基础（九）form表单、事件、3D
yangwei2048的博客
12-09 381
form表单、事件、3Dform表单form表单操作event事件对象案例事件冒泡事件的绑定与解绑键盘事件默认事件面试题选项卡javascript实现jQuery实现3D3D翻牌3D翻牌（2） form表单 form表单操作 onchange事件 text---&gt;当表单value值发生变化的时候触发 radio--&gt;当选中的时候触发 checkbox--&gt;当选择的时候触发 sel...
JavaScript基础（一）元素获取与元素属性
yangwei2048的博客
12-01 346
元素获取与元素属性元素获取与属性获取getElementById属性的获取属性值设置图片的相对路径问题与background问题 元素获取与属性获取 getElementById *{margin: 0;padding: 0} #wrap{width: 300px;margin: 20px auto;} #wrap li{float: left;list-style: none;margin: 5...
如何将一个div水平垂直居中
yangwei2048的博客
11-22 329
方法一：     div绝对定位水平垂直居中【margin: auto实现绝对定位元素的居中】，兼容性：IE7及之前版本不支持 div{     width: 200px;     height: 200px;     background: green;     position:absolute;     left:0;     top: 0;   ...
前端技术笔记-48个 JS 开发常用工具函数
yangwei2048的博客
07-11 324
前端技术笔记48个 JS 开发常用工具函数 48个 JS 开发常用工具函数 1、isStatic：检测数据是不是除了symbol外的原始数据 function isStatic(value) { return( typeof value === 'string' || typeof value === 'number' || typeof v...
JavaScript基础（七）元素样式属性、定时器、系统时间对象
yangwei2048的博客
12-08 289
元素样式属性、定时器、系统时间对象元素样式属性设置与获取获取通过class去获取对象定时器系统时间对象案例文字打印无缝运动日期经典案例之倒计时 元素样式属性设置与获取获取 *{padding: 0;margin: 0} #box{width: 100px;background: red} .on{height: 100px} &amp;lt;div id=&quot;box&quot;&amp;gt;&amp;lt;/div&amp;gt; &
JavaScript基础（八）DOM节点、BOM相关操作
yangwei2048的博客
12-08 268
DOM节点、BOM相关操作DOM节点childNodes与childrennextSibling与nextElementChildparentNode与offsetParentoffsetTop与offsetLeftDOM节点之获取宽高BOM相关操作window.open()window.navigatorwindow.locationwindow相关事件clientHieght、offsetHe...
jQuery基础教程第四版：核心组件与高级技术解析
"jQuery基础教程（第四版）.pdf" 这篇资源是关于jQuery基础教程的第四版，由jQuery API网站的维护者Jonathan Chaffer和Karl Swedberg共同撰写。本书全面覆盖了jQuery 1.10.x和jQuery 2.0.x版本的内容，自2008年第一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

讲文明的喜羊羊拒绝pua

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值