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= ...
随机推荐
- linux网络配置（ifcfg）
将linux主机接入到网络需要配置哪些配置项? IP/NETMASK:本地通信. 路由(网管):跨网络通信. DNS服务器地址:基于主机名通信. DNS服务器有三种:主/备用DNS服务器/第三备份dn ...
- selenium常用命令之操作页面元素及获取元素内容的事件整理
/**id <input type="text" id="phone" name="phone" class="LoginT ...
- 前端WEB编辑器最爱——webstrom
欲先善其事,必先利其器,如题.看到网上一篇介绍webstrom的文章,觉得功能确实强大,也知道为什么阿里巴巴的前端传到github上的文件为啥都有一个 .idea 文件,(传说淘宝内部推荐写js用we ...
- react修改端口
react修改端口 在react官网根据文档安装好项目之后,发现新项目没有了scripst文件夹 之前版本是在scripts文件夹中的starts.js中修改 新版本修改port发现移入到了依赖里面 ...
- 小白的springboot之路（六）、跨域解决方案CORS
0-前言 前后端分离.分布式集群,经常都会涉及到跨域访问,而浏览器基于同源策略,正常情况下是不能跨域的,这就需要我们解决跨域访问问题:spring boot解决跨域也比较简单: 1-CORS跨域解决方 ...
- mysql那些事(4)建库建表编码的选择
mysql建数据库或者建表的时候会遇到选择编码的问题,以前我们都是习惯性的选择utf8,但是在mysql在5.5.3版本后加了utf8mb4的编码,utf8mb4可以存4个字节Unicode,mb4就 ...
- Idea工具Debug快捷键
F9 resume programe 恢复程序 Alt+F10 show execution point 显示执行断点 F8 Step Over 相当于eclipse的f6 跳到下一步 F7 Step ...
- ubuntu16.04 安装cuda9.0+cudnn7.0.5+tensorflow+nvidia-docker配置GPU服务
[摘要] docker很好用,但是在GPU服务器上使用docker却比较复杂,需要一些技巧,下面将介绍一下在ubuntu16.04环境下的GPU-docker环境搭建过程. 第一步: 删除之前的nvi ...
- （h，v） represent （horizontal，vertical）
函数名h,v 代表 行和列 (horizontal,vertical) numpy 中 hstack 表示横向拼接两个行数相同的数组 In [42]: np.hstack((arr3,arr4)) ...
- cocoapods 安装使用详解
http://blog.csdn.net/showhilllee/article/details/38398119 http://www.jianshu.com/p/1222dd6c4271 删除 ...