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= ...
随机推荐
- 【2018寒假集训Day 1】【位运算】生成字符串
生成字符串(strs) [问题描述] 假设字符串只由字符“0”,“1”,“”组成,其中字符“”表示该字符可由 字符“0”或“1”替代. 现有一些字符串,根据这些字符串生成所有可生成的字符串.如: {1 ...
- 【数据结构】之二叉树（Java语言描述）
有关树的一些基础知识点请参考[这篇文章]. 本文主要记录Java语言描述的二叉树相关的一些操作,如创建.遍历等. 首先,我们需要一个表示树中节点的数据结构TreeNode,代码如下: public c ...
- 带着canvas去流浪系列之八 碰撞
[摘要] canvas动画-碰撞仿真 示例代码托管在:http://www.github.com/dashnowords/blogs 经过前面章节相对枯燥的练习,相信你已经能够上手canvas的原生A ...
- 一条数据的HBase之旅，简明HBase入门教程2：数据模型
[摘要] 上一篇文章讲了HBase项目与应用概况信息,这篇文章讲述HBase的数据模型以及一些基础概念,数据模型可以说决定了HBase适合于什么应用场景. 华为云上的NoSQL数据库服务CloudTa ...
- 用Selenium自动化测试时，让ChromeDriver中不显示“正受到自动测试软件控制”
背景: 在用Selenium做自动化测试的时候,默认ChromeDriver是会提示“Chrom正受到自动测试软件控制”的.如下图这样.但我们有些场景下,不希望这个提示出现.本文探索了几种语言去掉这个 ...
- 在phpstudy集成环境下的nginx服务器下配置url重写
直接在对应的vhosts.conf配置文件的location / {}中添加以下内容: location / { index index.html index.htm index.php; #auto ...
- 2019ICPC 上海网络赛 G题 Substring(哈希)
题意: 给了一个母串S, 每次循环给了一个模板串,问模板串在母 串中“匹配”了多少次?“匹配”的意思就是首字母和尾字母一样, 中间字母顺序可以换. 题解: 字符串hash.我们将询问字符串的首尾特殊h ...
- CC1605&CC1604 usb3.0+FPGA 高速视频采集 双目相机测评
CC1605&CC1604 usb3.0+FPGA 高速视频采集 双目相机测评 摄像头配置:ov5640.OV5642.mt9p031.mt9m001c12stm OV5640 xclk:24 ...
- 【Web技术】400- 浅谈Shadow DOM
编者按:本文作者:刘观宇,360 奇舞团高级前端工程师.技术经理,W3C CSS 工作组成员. 为什么会有Shadow DOM 你在实际的开发中很可能遇到过这样的需求:实现一个可以拖拽的滑块,以实现范 ...
- ES6，模块化
遇到的问题: 在js文件中使用import,export的时候报错: 原因:因为NodeJS只支持部分ES6的语法,有些ES6语法还不支持,而import语法就是其中一个: 解决方法: 1.使用ES5 ...