JS---案例：完整的轮播图---重点！
案例：完整的轮播图
思路：
分5部分做
1. 获取所有要用的元素
2. 做小按钮，点击移动图标部分
3. 做右边焦点按钮，点击移动图片，小按钮颜色一起跟着变 （克隆了第一图到第六图，用索引liObj.setAttribute("index", i)，pic = this.getAttribute("index");pic++, 当pic到5的时候，就回到pic=0的时候，同时设置样式）
4. 做左边焦点按钮 (用索引，当pic=0的时候，pic--，设置样式)
5. 自动轮播加上，设置个定时器，鼠标进入就清除定时器，鼠标移开就启用定时器
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
} .all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
} .screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
} .screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
} .screen ul {
position: absolute;
left: 0;
top: 0px;
width: 3000px;
} .all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
} .all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
} .all ol li.current {
background: #DB192A;
} #arr {
display: none;
} #arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
} #arr #right {
right: 5px;
left: auto;
}
</style>
</head> <body>
<div class="all" id='box'>
<div class="screen">
<!--相框-->
<ul>
<li><img src="data:images/1.jpg" width="500" height="200" /></li>
<li><img src="data:images/2.jpg" width="500" height="200" /></li>
<li><img src="data:images/3.jpg" width="500" height="200" /></li>
<li><img src="data:images/4.jpg" width="500" height="200" /></li>
<li><img src="data:images/5.jpg" width="500" height="200" /></li>
</ul>
<ol>
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script src="common.js"></script>
<script> //获取最外面的div
var box = my$("box");
//获取相框
var screen = box.children[0];
//获取当前相框的宽度
var imgWidth = screen.offsetWidth;
//获取ul
var ulObj = screen.children[0];
//获取ul中所有的li
var list = ulObj.children;
//获取ol
var olObj = screen.children[1];
//获取焦点的div
var arr = my$("arr"); var pic = 0;//全局变量
//创建小按钮，根据ul中li的个数
for (var i = 0; i < list.length; i++) {
//创建li标签，加入到ol中
var liObj = document.createElement("li");
olObj.appendChild(liObj);
liObj.innerHTML = (i + 1);
//在每个ol中的li标签上添加一个自定义属性，存储索引值
liObj.setAttribute("index", i);
//注册鼠标进入时间
liObj.onmouseover = function () {
//先干掉所有ol中的li背景颜色
for (var j = 0; j < olObj.children.length; j++) {
olObj.children[j].removeAttribute("class");
}
//设置当前鼠标进入li的背景颜色
this.className = "current";
//设置鼠标进入的li的当前索引值
pic = this.getAttribute("index");
//移动ul
animate(ulObj, -pic * imgWidth);
};
} //克隆一个ul中第一个li，加入到ul中的最后----克隆
ulObj.appendChild(ulObj.children[0].cloneNode(true)); // 自动播放
var timeId = setInterval(clickHandle, 1000); //鼠标进入到box 显示左右焦点的div
box.onmouseover = function () {
arr.style.display = "block";
//鼠标进入废掉之前的定时器
clearInterval(timeId);
};
//鼠标离开box，隐藏左右焦点的div
box.onmouseout = function () {
arr.style.display = "none";
timeId = setInterval(clickHandle, 1000);
}; //右边按钮
my$("right").onclick = clickHandle;
function clickHandle() {
//如果pic的值是5，恰巧是ul中li的个数-1的值，此时页面显示第六个图片
//而客户认为这是一个图，所以如果用户再次点击按钮，应该看到第二个图片
if (pic == list.length - 1) {
//如何从第六个图跳转到第一个图
pic = 0; //先设置pic=0;
ulObj.style.left = 0 + "px";//把ul位置还原成开始的默认位置
}
pic++;//立刻设置pic+1，那么用户就会看到第二个图片；
animate(ulObj, -pic * imgWidth);
//如果pic==5,此时显示第六个图，内容是第一张图片，第一个小按钮有颜色
if (pic == list.length - 1) {
//第五个颜色干掉
olObj.children[olObj.children.length - 1].className = "";
olObj.children[0].className = "current";
} else {
//干掉所有小按钮背景颜色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
olObj.children[pic].className = "current";
}
}; //左边按钮
my$("left").onclick = function () {
if (pic == 0) {
pic = 5;
ulObj.style.left = -pic * imgWidth + "px";
}
pic--;
animate(ulObj, -pic * imgWidth);
//设置小按钮的颜色---先所有小按钮干掉颜色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
//当前pic索引对应的按钮，设置颜色
olObj.children[pic].className = "current";
}; // </script> </body> </html>
JS---案例：完整的轮播图---重点！的更多相关文章
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
- js原生代码实现轮播图案例
一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...
- 用html +js+css 实现页面轮播图效果
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
- js访3d上下轮播图
js/css访3d上下轮播图 (附件) <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- 案例:3D切割轮播图
一.3d转换 3D旋转套路:顺着轴的正方向看,顺时针旋转是负角度,逆时针旋转是正角度 二.代码 <!DOCTYPE html> <html lang="en"&g ...
- JS框架_(Bootstrap.js)实现简单的轮播图
Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- js原声代码 轮播图
js轮播图 html部分:建立div,内嵌img标签,可以设置大小, <!doctype html> <html> <head> <meta charset= ...
随机推荐
- nginx的使用，以及反向代理，负载均衡，从安装到使用，全部步骤。
先总结nginx实现负载均衡的原理,在这之前先的知道反向代理,因为nginx的负载均衡是在反向代理的基础上实现的: 1.反向代理:通过在nginx的配置文件 (vim /opt/nginx196/co ...
- 科学使用Log4View2
目录 目录 前言 科学使用 编辑和调试程序集 调试程序集 编辑程序集 结语 推荐文献 目录 NLog日志框架使用探究-1 NLog日志框架使用探究-2 科学使用Log4View2 前言 这个标题很低调 ...
- SpringBoot 整合 Zookeeper 接入Starring微服务平台
背景 最近接的一个项目是基于公司产品Starring做的微服务支付平台,纯后台项目,实现三方支付公司和银行接口来完成用户账户扣款,整合成通用支付接口发布给前端调用. 但是扯蛋了,这边前端什么都不想做, ...
- 【RN - 基础】之React Native常见问题及解决方案
unable to load script from assets index.android.bundle... 问题原因: 找不到Android项目中的assets文件夹. 解决方案: 1.在An ...
- 测试访问apiserver状态
目录 前言 创建admin证书和私钥 分发kubeconfig文件 检查集群信息 授权kube-apiserver访问kubelet API的权限 前言 到这里,ETCD集群.kube-nginx + ...
- scrapy 五大核心组件-分页
scrapy 五大核心组件-分页 分页 思路 总的原理和之前是一样的,但是由于框架的原因,要遵循他框架的使用方式,每次更改他的url,并指定回调函数 # -*- coding: utf-8 -*- i ...
- MySql简单的增删改查语句 js
最近在项目中需要连接数据库,做增删改查的功能,sql语句整理做了以下记录(基于NodeJs,注:data为你的真实数据): (一)新增插入表中数据: sql: 'insert into work(表名 ...
- Error creating bean with name 'entityManagerFactory' defined in class path resource解决方案
项目是集成了Spring Boot和Spring Data,然后昨天简单Jpa和Spring Boot配置完成,开始进行公司项目的重构,然后出现了这个问题.当时是在网上找了好久.后来发现时java ...
- 学习spring和spring mvc过程中遇到的一些问题
以下仅为个人通过网上查找资料总结的内容,如有不对的地方欢迎提出: 注解: @Controller//表明本类是一个Controller @RequestMapping(value="/dem ...
- 重写TabBar遇到的按钮不显示的问题
这里的控件frame没有进行设置,无法显示 这里初始化的按钮 frame也为0, 因此 在 重写某个控件的时候 一定要调用layoutSubviews这个方法来对这个控件内部的子控件进行赋值