JS---案例:简单轮播图
2024-09-01 20:56:32
案例:简单轮播图
div叫盒子,里面包了2个小盒子,一个是inner,一个是square
inner的div是放ul,里面有li,a,和图片
square的div里面放span,是轮播图的小点
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
} ul {
list-style: none
} img {
vertical-align: top
} .box {
width: 730px;
height: 454px;
margin: 100px auto;
padding: 5px;
border: 1px solid #ccc;
} .inner {
width: 730px;
height: 454px;
background-color: pink;
overflow: hidden;
position: relative;
} .inner ul {
width: 1000%;
position: absolute;
top: 0;
left: 0;
} .inner li {
float: left;
} .square {
position: absolute;
right: 10px;
bottom: 10px;
} .square span {
display: inline-block;
width: 16px;
height: 16px;
background-color: #fff;
text-align: center;
line-height: 16px;
cursor: pointer;
} .square span.current {
background-color: orangered;
color: #fff;
}
</style>
</head> <body>
<div class="box" id="box">
<div class="inner">
<!--相框-->
<ul>
<li><a href="#"><img src="data:images/1.jpg" alt="" /></a></li>
<li><a href="#"><img src="data:images/2.jpg" alt="" /></a></li>
<li><a href="#"><img src="data:images/3.jpg" alt="" /></a></li>
<li><a href="#"><img src="data:images/4.jpg" alt="" /></a></li>
<li><a href="#"><img src="data:images/5.jpg" alt="" /></a></li>
<li><a href="#"><img src="data:images/6.jpg" alt="" /></a></li>
</ul>
<div class="square">
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
</div>
</div>
<script src="common.js"></script> <script> //获取最外的div
var box = my$("box");
//获取相框
var inner = box.children[0];
//获取相框的宽度
var imgWidth = inner.offsetWidth;
//获取ul
var ulObj = inner.children[0];
//获取所有span标签
var spanObjs = inner.children[1].children;
//循环遍历所有的span标签,注册鼠标进入的事件
for (var i = 0; i < spanObjs.length; i++) {
//循环的时候把索引值保存在每个span的自定义属性中
spanObjs[i].setAttribute("index", i);
//注册鼠标进入事件
spanObjs[i].onmouseover = function () {
//先干掉所有span的背景颜色
for (var j = 0; j < spanObjs.length; j++) {
//移除每个span的类样式
spanObjs[j].removeAttribute("class");
}
//设置当前额span背景颜色
this.className = "current";
//移动ul,每个图片的宽*鼠标放在此的按钮索引值
//获取当前鼠标进入的索引
var index = this.getAttribute("index");
animate(ulObj, -index * imgWidth);
};
} </script>
</body> </html>
最新文章
- Android项目实战(二十七):数据交互(信息编辑)填写总结
- POJ 1426 Find The Multiple
- JDK安装和配置
- PCL—低层次视觉—点云分割(基于形态学)
- 【Express】请求和响应对象
- flash导入图片缩放后出现毛边、失真、锯齿、文字模糊不清晰的情况
- ImageLoader的Jar包加载图片
- ajax删除数据(不跳转页面)
- 201521123024 《Java程序设计》第4周学习总结
- Tomcat的四种基于HTTP协议的Connector性能比较
- win7 VMware CentOS桥接(bridge)模式网络配置
- JAVA序列化和反序列化XML
- 修改spring源码重写classloader实现项目加密
- vue传参
- 配置文件 .properties 的使用。
- Mybatis generator 配置
- Linux Storage Stack Diagram存储堆栈图
- 后台UI模板开发规范
- 六、EnterpriseFrameWork框架基础功能之权限管理
- Centos7.5静默安装Oracle18c
热门文章
- python遍历所有盘符下的图片并拷贝下来
- 空气质量管理系统+SSM(Spring+SpringMVC+Mybatis)+前后端分离总结
- 小白学 Python 爬虫(11):urllib 基础使用(一)
- [ch04-02] 用梯度下降法解决线性回归问题
- ftp 客户端 上传
- Mac配置Gradle环境
- PHP按二维数组中的某个值重新排序数组 usort的使用方法
- Python开发GUI工具介绍,实战:将图片转化为素描画!【华为云技术分享】
- 大型情感剧集Selenium:9_selenium配合Pillow完成浏览器局部截图
- MongoDB一次节点宕机引发的思考(源码剖析)【华为云分享】