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= ...
随机推荐
- 【Luogu P1502】窗口的星星
Luogu P1502 题意很好理解,就是问给出的矩形套住的最大和. 但是做起来却十分麻烦. --来自疯狂爆10分的愤怒 一个比较高效的思路是--把每一个星星作为左下角向右上方拓展形成一个矩形, 拓展 ...
- linux bash shell编程之参数变量和流程控制。
参数变量:用来向脚本中传递参数 我们在执行脚本的时候可以在其后面加入一些参数,通常来说这些参数与脚本中变量为对应关系. start.sh argu1 argu2 引用方式: $1,,2,……${10} ...
- JVM系列一（Java内存区域和对象创建）.
一.JVM 内存区域 堆 - Heap 线程共享,JVM中最大的一块内存,此内存的唯一目的就是存放对象实例,Java 堆是垃圾收集器管理的主要区域,因此很多时候也被称为"GC堆"( ...
- Java架构师必知：什么是单点登录，主要会应用于哪些场景？
单点登录在大型网站里使用得非常频繁,例如,阿里旗下有淘宝.天猫.支付宝,阿里巴巴,阿里妈妈,阿里妹妹等网站,还有背后的成百上千的子系统,用户一次操作或交易可能涉及到几十个子系统的协作,如果每个子系统都 ...
- kafka官方的kafka-server-start.sh不能关闭kafka进程解决办法
vi kafka-server-stop.sh 把PIDS=$(ps ax | grep -i 'kafka\.Kafka' | grep java | grep -v grep | awk '{pr ...
- golang实现rabbitmq消息队列失败尝试
在工作中发现,有些时候消息因为某些原因在消费一次后,如果消息失败,这时候不ack,消息就回一直重回队列首部,造成消息拥堵. 如是有了如下思路: 消息进入队列前,header默认有参数 retry_nu ...
- vue 中使用 watch 的各种问题
报错: Method "watch" has type "object" in the component definition. Did you refere ...
- 实战webpack系列说明
01.概念股 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler). 当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(d ...
- 【Android - IPC】之使用文件共享实现IPC
文件共享是一种非常不错的IPC方式,即两个进程可以通过读/写同一个文件来交换数据.和Windows系统不同,Android系统是基于Linux的,这使得并发读/写文件的操作可以没有限制地进行,甚至两个 ...
- centos6安装pxc
Percona XtraDB Cluster是一种高可用性解决方案,可帮助企业避免停机和中断. Percona XtraDB Cluster具有以下MySQL群集优势: • 具有成本效益的HA和MyS ...