案例:简单轮播图

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>

JS---案例:简单轮播图的更多相关文章

  1. 原生js写简单轮播图方式1-从左向右滑动

    轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...

  2. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  3. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  4. JS+css3焦点轮播图PC端

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. js原生实现轮播图效果(面向对象编程)

    面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...

  6. 手把手原生js简单轮播图

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  7. 原生js简单轮播图 代码

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  8. js写的简单轮播图

    这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放, ...

  9. 简单的 js手写轮播图

    html: <div class="na1">   <div class="pp">    <div class="na ...

随机推荐

  1. 学习Python第一天:找了4本专属小白的书籍(前期入门打基础)

    我们提供一个初学者最好的Python书籍列表.Python是一个初级程序员可以学习编程的最友好语言之一.为了帮助您开始使用Python编程,我们分享此列表.泡一杯茶,选一本书阅读,开始使用Python ...

  2. Netty Pipeline与ChannelHandler那些事

    Pipeline和ChannelHandler是Netty处理流程的重要组成部分,ChannelHandler对应一个个业务处理器,Pipeline则是负责将各个ChannelHandler串起来的& ...

  3. /etc/security/limits.conf 详解与配置

    目录 一. /etc/security/limits.conf 详解 /etc/security/limits.conf 配置解析 /etc/security/limits.d/ 目录 二. ulim ...

  4. SpringCloud Alibaba微服务实战一 - 基础环境准备

    Springcloud Aibaba现在这么火,我一直想写个基于Springcloud Alibaba一步一步构建微服务架构的系列博客,终于下定决心从今天开始本系列文章的第一篇 - 基础环境准备. 该 ...

  5. Kotlin Coroutines在Android中的实践

    Coroutines在Android中的实践 前面两篇文章讲了协程的基础知识和协程的通信. 见: Kotlin Coroutines不复杂, 我来帮你理一理 Kotlin协程通信机制: Channel ...

  6. 【集合系列】- 深入浅出分析HashMap

    一.摘要 在集合系列的第一章,咱们了解到,Map的实现类有HashMap.LinkedHashMap.TreeMap.IdentityHashMap.WeakHashMap.Hashtable.Pro ...

  7. python_迭代器和生成器、字节串、字节数组

    迭代器 iterator  和 生成器 generator 什么是迭代器:迭代器就是获取迭代对象中元素的工具,迭代器是由可迭代对象生成的 1.迭代器是指用iter(可迭代对象)函数返回的对象(实例) ...

  8. 基于webpack实现多html页面开发框架六 提取公共代码

    一.解决什么问题 1.如果a.js和b.js都引用了common.js,那在打包的时候common.js会被重复打入到a.js和b.js,造成重复打包 2.单独打包common.js对性能有帮助,浏览 ...

  9. 转:Spring事务管理

    spring是SSH中的管理员,负责管理其它框架,协调各个部分的工作.今天一起学习一下Spring的事务管理.Spring配置文件中关于事务配置总是由三个组成部分,分别是DataSource.Tran ...

  10. ubuntu下仅仅获取网卡一的ip地址 && shell中字符串拼接

    问题描述: ubuntu下仅仅获取网卡一的ip地址 问题背景: eth0,eth1,eth2……代表网卡一,网卡二,网卡三…… lo代表127.0.0.1,即localhost | 问题描述: 已知字 ...