【前端】javascript实现带有子菜单和控件的轮播图slider
实现效果：
实现原理：
// 步骤
// 1. 获取事件源以及相关元素
// 2. 复制第一张图片所在的li，添加到ul的最后面
// 3. 给ol添加li，ul中的个数-1个，并点亮第一个按钮
// 4. 鼠标放到ol的li上切换图片
// 5. 添加定时器
// 6. 左右切换图片（鼠标放上去隐藏，移开显示）
实现代码：
<!DOCTYPE html>
<html>
<head>
<title>轮播图</title>
<meta charset="utf-8">
<style type="text/css">
*{
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all{
width: 500px;
height: 200px;
padding: 7px;
margin: 100px auto;
position: relative;
box-shadow: 1px 1px 5px #2d2d2d;
}
.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: 0;
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;
text-align: center;
background-color: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current{
background-color: #03c03c;
}
#arr{
display: none;
}
#arr span{
width: 40px;
height: 40px;
left: 5px;
top: 50%;
position: absolute;
margin-top: -20px;
background-color: #000;
cursor: pointer;
line-height: 35px;
text-align: center;
font-weight: bold;
font-family: "微软雅黑";
font-size: 30px;
color: #fff;
opacity: 0.3;
border-radius: 50%;
box-shadow: 1px 1px 3px #2d2d2d;
}
#arr #right{
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id="all">
<div class="screen" id="screen">
<ul id="ul">
<li><img src="./images/01.jpg" width="500" height="200"></li>
<li><img src="./images/02.jpg" width="500" height="200"></li>
<li><img src="./images/03.jpg" width="500" height="200"></li>
<li><img src="./images/04.jpg" width="500" height="200"></li>
<li><img src="./images/05.jpg" width="500" height="200"></li>
</ul>
<!-- 图片子菜单 -->
<ol> </ol>
<!-- 左右切换按钮 -->
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
</div> <!-- script -->
<script type="text/javascript">
// 赋值第一张图片放到ul的最后，当图片切换到第五张的时候，直接切换第六张，再从第一张切换到第二张的时候先瞬间切换到第一张图片，然后滑倒第二张 // 步骤
// 1. 获取事件源以及相关元素
// 2. 复制第一张图片所在的li，添加到ul的最后面
// 3. 给ol添加li，ul中的个数-1个，并点亮第一个按钮
// 4. 鼠标放到ol的li上切换图片
// 5. 添加定时器
// 6. 左右切换图片（鼠标放上去隐藏，移开显示） // 1. 获取事件源以及相关元素
var all = document.getElementById("all");
var screen = all.firstElementChild || all.firstChild;
var imgWidth = screen.offsetWidth;
var ul = screen.firstElementChild || screen.firstChild;
var ol = screen.children[1];
var div = screen.lastElementChild || screen.lastChild;
var spanArr = div.children; // 2. 复制第一张图片所在的li，添加到ul的最后面
var ulNewLi = ul.children[0].cloneNode(true);
ul.appendChild(ulNewLi); // 3. 给ol添加li，ul中的个数-1个，并点亮第一个按钮
for(var i=0; i<ul.children.length-1; i++){
var olNewLi = document.createElement("li");
olNewLi.innerHTML = i+1;
ol.appendChild(olNewLi);
}
var olLiArr = ol.children;
olLiArr[0].className = "current"; // 4. 鼠标放到ol的li上切换图片
for(var i=0; i<olLiArr.length; i++){
// 自定义属性，把索引值绑定到元素的index属性上
olLiArr[i].index = i;
olLiArr[i].onmouseover = function(){
// 排他思想
for(var j=0; j<olLiArr.length; j++){
olLiArr[j].className = "";
}
this.className = "current"
// 鼠标放到小方块上时，索引值和key以及square同步
// key = this.index;
// square = this.index;
key = square = this.index;
// 移动盒子
animate(ul, -this.index*imgWidth);
}
} // 5. 添加定时器
var timer = setInterval(autoPlay, 1000); // 固定向右切换图片
// 两个定时器（一个记录图片，一个记录子菜单栏）
var key = 0;
var square = 0;
function autoPlay(){
// 通过key的自增来模拟图片的索引值，然后移动ul
key++;
if(key > olLiArr.length){
// 图片已经滑到最后一张，接下来应该跳转到第一张，然后滑动到第二张
ul.style.left = 0;
key = 1;
}
animate(ul, -key*imgWidth);
// 通过控制square的自增来模拟小方块的索引值，然后点亮盒子
// 排他思想做小方块
square++;
if(square > olLiArr.length-1){
// 索引值不能大于5，如果大于5则立即变为0；
square = 0;
}
for(var i=0; i<olLiArr.length; i++){
olLiArr[i].className = "";
}
olLiArr[square].className = "current";
} // 鼠标放上去清除定时器，移开启动定时器
all.onmouseover = function(){
div.style.display = "block";
clearInterval(timer);
}
all.onmouseout = function(){
div.style.display = "none";
timer = setInterval(autoPlay,1000);
} // 6. 左右切换图片（鼠标放上去显示，移开隐藏）
spanArr[0].onclick = function(){
// 通过控制key的自增来模拟图片的索引值，然后移动ul
key--;
if(key<0){
// 先移到最后一张，然后key的值取前一张的索引值，然后向前移动
ul.style.left = -imgWidth*(olLiArr.length) + "px";
key = olLiArr.length-1;
}
animate(ul, -key*imgWidth);
// 通过控制square的自增来模拟小方块的索引值，然后点亮小方块
square--;
if(square<0){
// 索引值不能大于等于5，如果为5，立即变为0
square = olLiArr.length-1;
}
for(var i=0; i<olLiArr.length; i++){
olLiArr[i].className = "";
}
olLiArr[square].className = "current";
} spanArr[1].onclick = function(){
// 右侧的和定时器一模一样
autoPlay();
} // 动画封装
var absSpeed = 10; //设定步长
function animate(ele, target){
clearInterval(ele.timer);
var speed = target > ele.offsetLeft ? absSpeed : -absSpeed;
ele.timer = setInterval(function(){
var val = target - ele.offsetLeft;
ele.style.left = ele.offsetLeft + speed + "px";
if(Math.abs(val) < Math.abs(speed)){
ele.style.left = target + "px";
clearInterval(ele.timer);
}
}, 10)
}
</script>
</body>
</html>
【前端】javascript实现带有子菜单和控件的轮播图slider的更多相关文章
- Android自己定义控件之轮播图控件
背景 近期要做一个轮播图的效果.网上看了几篇文章.基本上都能找到实现,效果还挺不错,可是在写的时候感觉每次都要单独去又一次在Activity里写一堆代码.于是自己封装了一下.这里仅仅是做了下封装成一个 ...
- WPF 控件库——轮播控件
WPF 控件库系列博文地址: WPF 控件库——仿制Chrome的ColorPicker WPF 控件库——仿制Windows10的进度条 WPF 控件库——轮播控件 WPF 控件库——带有惯性的Sc ...
- 图解微信小程序---添加tabBar底部菜单，添加已做好轮播图操作
图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作 什么是tabBar? 顶部或者底部tab栏如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以 ...
- 【前端】javascript+jQuery实现旋转木马效果轮播图slider
实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...
- JQuery和html+css实现带小圆点和左右按钮的轮播图
是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白点*/ #second_div{ margin-top: 160px; } .img_box{ over ...
- Android侧滑菜单和轮播图之滑动冲突
接手一个项目,有一个问题需要修改:轮播图不能手动滑动,手动滑动轮播图只会触发侧滑菜单. 猜测:viewpager控件(轮播图)的触摸事件被SlidingMenu控件(侧滑菜单,非第三方项目,乃是上个开 ...
- 使用前端开发工具包WijmoJS - 创建自定义DropDownTree控件（包含源代码）
概述 最近,有客户向我们请求开发一个前端下拉控件,需求是显示了一个列表,其中包含可由用户单独选择的项目控件,该控件将在下拉列表中显示多选TreeView(树形图). 如今WijmoJS已经实现了该控件 ...
- 如何通过JavaScript构建Asp.net服务端控件
摘要 虽然ASP.NET的服务器控件一直被大家所诟病,但是用户控件(ACSX)在某些场景下还是非常有用的. 在一些极特珠的情况下,我们会使用JavaScript动态的构建页面中的控件,但假设遇到了我要 ...
- 创建一个带模版的用户控件 V.3
再重构此篇<创建一个带模版的用户控件 V.2>http://www.cnblogs.com/insus/p/4164149.html 让其它动态实现header,Item和Footer. ...
随机推荐
- 洛谷P5021 赛道修建 NOIp2018 贪心+二分答案
正解:贪心+LCA+二分答案 解题报告: 想先港下部分分qwq因为我部分分只拿到了10ptsQAQ(时间不够不是理由,其实还是太弱,所以要想很久,所以才时间不够QAQ m=1 找直径长度,完 一条链 ...
- （3.5）mysql基础深入——mysqld_safe脚本功能及流程
(3.5)mysql基础深入——mysqld_safe脚本功能及流程 目录 1.mysqld_safe过程总结 2.mysql_safe启动的好处 3.mysqld_safe 参数 4.mysqld_ ...
- HTML方法
HTTP 方法:GET 对比 POST 两种最常用的 HTTP 方法是:GET 和 POST. 什么是 HTTP ? 超文本传输协议(HTTP)的设计目的是保证客户端与服务器之间的通信. HTTP 的 ...
- PAT 1042 Shuffling Machine[难]
1042 Shuffling Machine (20)(20 分) Shuffling is a procedure used to randomize a deck of playing cards ...
- PAT Spell It Right [非常简单]
1005 Spell It Right (20)(20 分) Given a non-negative integer N, your task is to compute the sum of al ...
- 支持向量机：Numerical Optimization，SMO算法
http://www.cnblogs.com/jerrylead/archive/2011/03/18/1988419.html 另外一篇:http://www.cnblogs.com/vivouni ...
- Genymotion虚拟镜像下载慢或者失败的解决办法
Genymotion虚拟镜像下载慢或者失败的解决办法 http://files2.genymotion.com/dists/8.0.0/ova/genymotion_vbox86p_8.0_18061 ...
- linux服务后台管理
把进程放到后台有两种方法 1.cmmand & 2.ctrl+z 暂停到后台 查看后台服务 jobs 把后台进程移到前台 fg %2 工作号 恢复到前台 后台服务继续执行 bg ...
- React组件，React和生命周期
笔记,具体可以看看这个博客: https://segmentfault.com/a/1190000004168886?utm_source=tag-newest react 的jsx document ...
- Unirest－拼装http请求发送rest接口
public static Integer getInfo(String name) { HttpResponse<Integer> httpResponse = null; try { ...