HTML实例-01-轮播图
body部分
<div class="outer">
<ul class="img-list">
<li><a href="#"><img src="img/1.jpg" alt=""></a></li>
<li><a href="#"><img src="img/2.jpg" alt=""></a></li>
<li><a href="#"><img src="img/3.jpg" alt=""></a></li>
<li><a href="#"><img src="img/4.jpg" alt=""></a></li>
<li><a href="#"><img src="img/5.jpg" alt=""></a></li>
<li><a href="#"><img src="img/6.jpg" alt=""></a></li>
<li><a href="#"><img src="img/7.png" alt=""></a></li>
<li><a href="#"><img src="img/8.jpg" alt=""></a></li>
</ul>
<!--图片上的小点-->
<div class="pointer">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
样式
<style>
/*去除默认格式*/
*{margin: 0;
padding: 0;}
ul{list-style: none;}
.outer{
width:830px;
height: 482px;
margin: 50px auto;
/*设置为相对定位,不会脱离文档流*/
position: relative;}
/*设置为绝对定位*/
.img-list li{position: absolute;}
/*设置○*/
.pointer a{
width: 16px;
height: 16px;
background-color: rgba(255, 255 ,255, 0.5);
float: left;
/*利用float:left;设置○位置,可以调节距离*/
/*display: inline-block;*/
/*变成圆形*/
border-radius: 50%;
margin:0 5px;
}
.pointer a:hover{
background-color: #bd6e07;
}
.pointer{
/*开启绝对定位*/
position: absolute ;
top:332px;
width: 208px;
/*将○设置到居中位置*/
margin: 0 auto;
left: 0;
right: 0; }
</style>
HTML实例-01-轮播图的更多相关文章
- 实例练习——轮播图 & 全选/全不选
1 实例1:轮播图 1)实质就是改变图片的src 2)把图片的路径用数组存起来 3) “下一张”的实现就是改变数组的下标,用一个变量i控制,每次点击下标加1.“上一张”的实现正好相反.注意“i的变化” ...
- 01.轮播图之四 :imageViews(2 或者 3 个imageview) 轮播
首先说下 3 个imageView的轮播,这个逻辑分析起来 比较简单, 先上传个图片吧::::: 主要分析起来,核心就是这样 :新的图片永远是加在中间ImageView上的,下一轮的第一张图片,是上一 ...
- 01.轮播图之一 :scrollView 轮播
接触的每个项目,都会用到轮播图的部分,轮播图都写了好多次,用过各种各样的方式写: 这篇总结的博客,我将分为几个篇幅写,希望写完这几篇博客之后,我能总结出自己写这个轮播的优缺和不同之处 scrollvi ...
- 01.轮播图之五 :一个 imageView也能 作 轮播
这个是最近才写的,本以为实现起来很有难度,需要更高深的理论, 写完之后,才发现自己错误的离谱: 之所以能用一个imageview 实现轮播 基于两点::: 使用 imageview 的layer 层设 ...
- 01.轮播图之三 : collectionView 轮播
个人觉得 collection view 做轮播是最方便的,设置下flowlayout 其他不会有很大的变动,没有什么逻辑的代码 let's begin…… 创建自定义的view .h 声明文件 @i ...
- 01.轮播图之二 :tableView 轮播
在做这个tablevew轮播的时候,重要的就是修改frame 和view 的翻转了:::: 也是不难的,概要的设计和scroll 轮播是一致的: 首先是 .h 的文件 @interface Table ...
- Bootstrap实现轮播图
第一步:设计轮播图容器:div.carousel,添加slide平滑切换,并定义id,方便后面采用data属性来触发 <div class='carousel slide' id="t ...
- 原生JS的轮播图
学习前端也有一小段时间了,当初在学习javascript的时候,练手的一个轮播图实例,轮播图也是挺常见的了. 着是通过获取图片偏移量实现的.也实现了无缝切换.还有一点问题就是没有加上图片切换的时候的延 ...
- JS-特效 ~ 01. 事件对象、offset偏移/检测、无缝滚动、自动循环轮播图
Math.round ( ) :正书四舍五入,负数五舍六入 用定时器,先清除定时器 事件对象 event event:事件被触动时,鼠标和键盘的状态,通过属性控制 Offset:偏移,检测 1. 获取 ...
- 前端基础功能,原生js实现轮播图实例教程
轮播图是前端最基本.最常见的功能,不论web端还是移动端,大平台还是小网站,大多在首页都会放一个轮播图效果.本教程讲解怎么实现一个简单的轮播图效果.学习本教程之前,读者需要具备html和css技能,同 ...
随机推荐
- JAVA 面向对象 三大特征:继承
什么是继承 多个类中存在相同属性和行为时,将这些内容抽取到单独一个类中,那么多个类无需再定义这些属性和行为,只要继承那个类即可. 多个类可以称为子类,单独这个类称为父类.超类或者基类. 子类可以直接访 ...
- SparkCore
一.概述 1,定义 RDD(Resilient Distributed Dataset)叫做弹性分布式数据集,是Spark中最基本的数据抽象.代码中是一个抽象类,它代表一个不可变.可分区.里面的元素可 ...
- ThreadLocal 原理
ThreadLocal是什么 ThreadLocal是一个本地线程副本变量工具类.主要用于将私有线程和该线程存放的副本对象做一个映射,各个线程之间的变量互不干扰,在高并发场景下,可以实现无状态的调用, ...
- ReentrantLock以及AQS实现原理
什么是可重入锁? ReentrantLock是可重入锁,什么是可重入锁呢?可重入锁就是当前持有该锁的线程能够多次获取该锁,无需等待.可重入锁是如何实现的呢?这要从ReentrantLock的一个内部类 ...
- Nginx实现JWT验证-基于OpenResty实现
介绍 权限认证是接口开发中不可避免的问题,权限认证包括两个方面 接口需要知道调用的用户是谁 接口需要知道该用户是否有权限调用 第1个问题偏向于架构,第2个问题更偏向于业务,因此考虑在架构层解决第1个问 ...
- pandas之cut
cut( )用来把一组数据分割成离散的区间. cut(x, bins, right=True, labels=None, retbins=False, precision=3, include_low ...
- Bug--时区问题导致IDEA连接数据库失败
打开cmd进入mysql,设置 set global time_zone='+8:00';
- 设置x 轴斜体(每次我都百度,这次单独为它发一个)
plt.xticks(rotation = 45) 2020-06-07
- 如何部署redis服务
使用工具 redis-64-3.2.100 部署系统 windows server 2012R2 1.下载安装redis-64-3.2.100安装包,下载地址:https://github.com/m ...
- PHP date_add() 函数
------------恢复内容开始------------ 实例 添加 40 天到 2013 年 3 月 15 日: <?php$date=date_create("2013-03- ...