淘宝轮播图--web前端20200309学习笔记

最新推荐文章于 2021-12-09 11:19:33 发布
最新推荐文章于 2021-12-09 11:19:33 发布
阅读量474 收藏 2
点赞数 1
分类专栏： 前端学习 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44850917/article/details/104764612
版权

1.外边距合并问题：解决方法

浮动元素，绝对定位（固定）元素都不会触发外边距合并问题

2.综合案例-淘宝轮播图

代码: 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		li{
			list-style: none;
		}
		.taobao{
			margin:40px auto;
			width: 520px;
			height: 280px;
			background-color: pink;
			/*子绝父相*/
			position: relative;


		}
		.arrow-l{
			/*float:left;*/
			/*只能用定位才能压住盒子*/
			/*不要占有位置，随便移动位置，必须用绝对定位*/
			position: absolute;
			
			/*绝对定位的盒子无需转换，直接给大小就好了*/
			width: 20px;
			height: 30px;
			background: rgba(0,0,0, .2);
			/*垂直居中的公式*/
			/*1.走父级高度的50%*/
			top:50%;
			/*2.往上走 自己高度的一半*/
			margin-top:-15px;
			left: 0;
			/*去掉a的下划线*/
			text-decoration: none;
			/*圆角矩形*/
			/*右上角*/
			border-top-right-radius: 15px;
			/*右下角*/
			border-bottom-right-radius: 15px;
			color: white;
			line-height: 30px;
			text-align:left;

		}
		.arrow-r{
			/*float:left;*/
			/*只能用定位才能压住盒子*/
			/*不要占有位置，随便移动位置，必须用绝对定位*/
			position: absolute;
			
			/*绝对定位的盒子无需转换，直接给大小就好了*/
			width: 20px;
			height: 30px;
			background: rgba(0,0,0, .2);
			/*垂直居中的公式*/
			/*1.走父级高度的50%*/
			top:50%;
			/*2.往上走 自己高度的一半*/
			margin-top:-15px;
			right: 0;
			/*去掉a的下划线*/
			text-decoration: none;
			/*圆角矩形*/
			/*右上角*/
			/*border-top-left-radius: 15px;*/
			/*右下角*/
			/*border-bottom-left-radius: 15px;*/
			color: white;
			border-radius: 15px 0 0 15px;
			line-height: 30px;
			text-align: right;


		}
		.arrow-l:hover,
		.arrow-r:hover{
			background: rgba(0,0,0, .4);
		}
		.circle{
			position:absolute;
			bottom: 15px;
			/*水平居中*/
			left:50%;
			margin-left: -35px;
			width: 70px;
			height: 13px;
			background:rgba(255,255,255,0.3);
			border-radius: 7px;
		}
		.circle li{
			width: 8px;
			height: 8px;
			/*background-color: pink;*/
			background-color: #fff;
			float: left;
			border-radius: 50%;
			margin: 3px;
		}
		.circle .current{
			background-color: #ff5000;
		}

	</style>
</head>
<body>
	<div class="taobao">
	<!-- 左按钮 -->
	<a href="#" class="arrow-l">&lt;</a>
	<!-- 右按钮 -->
	<a href="#" class="arrow-r">&gt;</a>
	
	<img src="imgs/taobao.jpg" alt="">

	<!-- 小圆点 -->
	<ul class="circle">
	<li></li>
	<li class="current"></li>
	<li></li>
	<li></li>
	<li></li>
	</ul>
	</div>
</body>
</html>
运行结果:

在这里插入图片描述

2.1知识点补充--圆角矩形

圆角矩形可以分为4个角分别设置圆度，但是是有顺序的 
boder-top-left-radius:20px;
boder-top-right-radius:20px;
border-bottom-right-radius:20px;
boder-bottom-left-radius:20px;

如果四个角数值相同

boder-radius:15px;

里面数值不同，我们也可以按照简写的形式，具体格式如下

boder-radius:左上角 右上角 右下角 左下角;

3.定位小结

在这里插入图片描述

注意：

  • 1.边偏移需要和定位模式联合使用，单独使用无效
  • top和bottom不要同时使用，left,right同理
--believe
关注
专栏目录
2024年Web前端最新前端必备技能——轮播图（原生代码+插件）(2)，2024前端精选面试实战总结整理
2401_84433570的博客
05-06 765
思路：我们先定义一个全局变量num，当我们点击一下就自增一次，然后滚动的距离就是ul的滚动距离，ul滚动距离=num*图片宽度。//一定写成this。// 别移动的距离=小圆圈的索引号*图片的宽度（注意是负值从右往左走）// 解决bug1：当我们点击了某个li就拿到当前li的索引号给num。// 解决bug2：当我们点击了某个li 就把li的索引号给yuan。// 如果yuan==4说明走到最后我们克隆的这张图片 我们就复原。
Web前端开发学习笔记12-- jQuery 基础
FFFde博客
04-27 511
1、jQuery 基本使用 2、jQuery 常用 API 2.1 jQuery 选择器 2.1.1 jQuery 基础选择器 2.1.2 jQuery 筛选选择器 2.1.3 jQuery 筛选方法 2.2 jQuery 样式选择 2.3 jQuery 效果 2.4 jQuery 属性操作 2.5 jQuery 内容文本值 2.6 jQuery 元素操作 2.7 jQuery 尺寸、位置操作 3、jQuery 事件 3.1 jQuery 事件注册、事件处理 3.2 jQuery 事件对象 4、jQuery
HTML5仿淘宝图片轮转轮播代码
02-29
HTML5仿淘宝图片轮转轮播代码 HTML5 图片轮播 webppt tracker 引导页
【无标题】
weixin_61687107的博客
12-09 194
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
webapi6之淘宝轮播图案例
qq_45169358的博客
06-01 371
webapi6 缓动动画原理： // 缓动动画函数封装obj目标对象 target 目标位置 // 思路： // 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。 // 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长 // 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器 function animate(obj, target) { // 先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.tim
淘宝轮播图
一夜奈何梁山
02-05 372
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
CSS淘宝轮播图
weixin_43837268的博客
10-09 597
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>淘.
前端学习笔记 - 移动端Web开发
fengxm0309的博客
10-18 1080
移动端基础 浏览器现状 PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器 移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌 浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样 兼容移动端主流浏览器，处理Webkit内核浏览器即可
JS学习笔记，相比上一个修复了轮播图下方小圆圈问题
03-08
总结，本学习笔记涵盖了JavaScript的基本概念、BOM和DOM的使用，特别关注了实际项目中常见的轮播图组件及其小圆圈问题的解决，对于初学者和开发者来说，这些都是提升Web前端技能的重要知识点。通过对这些内容的学习...
java安卓仿微信聊天软件源码-Front-end-stack:需要学习的前端知识
06-04
Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2.2 免费的编程中文书籍索引 前端书籍 前端免费书籍大全 前端知识体系 免费的编程中文书籍索引 智能社 - 精通JavaScript开发 重新介绍 ...
html5仿京东淘宝轮播图片切换代码.rar
07-10
html5 CSS3 仿京东淘宝轮播图片切换特效代码，jquery修正了图片地址，上次其实只是没有把jquery打包在里面，不过有些新手摸不着头绪了，反复说代码有误，这次不会了，请看效果图。图片 两侧显示箭头，下边显示两加点按钮，两种方式都可以手动轮播图片。
h5简单淘宝轮播图
03-21
h5使用，实现了简单的淘宝轮播，已经封装完成。
原生js实现无缝仿淘宝轮播图（动画无反复，支持快速点击）
11-23
展示js的博客在这，可以先看一下再下载支持~：https://blog.csdn.net/zmdmwh/article/details/84333943
带有导航条和轮播图效果的网站设计.zip
08-05
使用DW工具，带有轮播图效果和导航条的网站设计工程实训，有十余个静态网页组成，制作较为精美，可以评论进行了解查看
淘宝网轮播图
weixin_30653023的博客
01-13 306
转载于:https://www.cnblogs.com/wxwxwx/p/10264370.html
小案例---淘宝轮播图实现
LPKJJSHSSB的博客
03-27 790
通过自己的自学，初步完成了淘宝轮播图的实现，可能代码上还没得到很多优化，希望大家可以帮我指出一下，非常感谢！ 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi...
前端学习笔记-2.4实现淘宝轮播
qq_43000359的博客
09-02 472
本来以为弄好了，今天要发博了，仔细一看，有点问题，先发一下，我在好好看看 实现淘宝轮播的三个功能： 一.自动轮播； 二.鼠标点击那张索引小图，相应的显示大图； 三.点击箭头可以实现轮播。 html： css：（有些混乱，没整理） js：截了好几张图，发的麻烦 &amp;amp;amp;amp;lt;script type=&amp;amp;amp;quot;text/javascript&amp;amp;amp;quot;&amp;amp;amp;am
淘宝轮播图 HTML css 绝对定位 相对低位
qq_43531541的博客
05-20 313
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>淘宝
运用css+html制作简单的淘宝轮播案例图
fighting_dream的博客
01-30 3575
要让最后显示结果如下方图片： 有兴趣的话就跟我一起学吧~ 我把这个轮播图首页布局这么设置： 图片+左箭头+右箭头+下边小圆点 1.因为图片大小和盒子一样大，我们div一个盒子出来，并且宽高和图片一样大。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值