【前端】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. ...
随机推荐
- IDEA的快捷键和相关设置
快捷键 Shift + Shift: 查找一切 Alt + /: 代码提示(需要修改) Ctrl + Alt + F12: 打开文件所在磁盘位置 Alt + F12: 打开终端 Alt + Ins ...
- ansible-playbook剧本
Playbooks 是一种简单的配置管理系统与多机器部署系统的基础, 非常适合于复杂应用的部署 由 yaml 语言编写, 运行过程中, ansible-playbook 命令根据自上而下的顺序依次执行 ...
- 【Jason】Jason拓展
Java-script是最基础语言(即前端脚本),而jquery是基于javascript封装出来的包,这些包里面含有能调用ajax的方法. ajax是一种异步交互,局部刷新的一种形式,是一种通讯 ...
- 【Python】如何切换浏览器的tap页？
当点击浏览器当前页面中的某个链接后自动弹出一个新的浏览器的tap页面时,浏览器正常都会在当前操作的tap页面右1位置打开新弹出的tap页. 当前selenium还不具备自动切换页面后窗口切换功能.需要 ...
- ie8兼容半透明效果css
1.opacity:0.5;(半透明效果在ie9及以上版本适用,ie8及以下不兼容) 解决办法:在css中加入filter: progid:DXImageTransform.Microsoft.Alp ...
- mysql 数据类型 目录
mysql 数据类型 mysql 整数类型 数值类型 tinyint mysql int 整数类型 解释显示宽度 和 存储宽度 mysql float 浮点型 mysql 日期类型 mysql 字符串 ...
- 万恶之源 - Python基础数据类型三
字典 字典的简单介绍 字典(dict)是python中唯⼀的⼀个映射类型.他是以{ }括起来的键值对组成. 在dict中key是 唯⼀的.在保存的时候, 根据key来计算出⼀个内存地址. 然后将key ...
- [wx]自然数学规律
有趣的数学规律 椭圆 双曲线 抛物线都叫圆锥曲线 它们跟圆锥有着怎样的关系? 他们都是圆锥与平面在不同姿势下交配的产物. 参考 椭圆 抛物线 小结 e: 离线率 P: 任意一点 F: 焦点 准线: 一 ...
- jquery更改表格行顺序实例
使用jquery写的更改表格行顺序的小功能 表格部分: 复制代码代码如下: <table class="table" id="test_table"> ...
- python ddt 实现数据驱动一
ddt 是第三方模块,需安装, pip install ddt DDT包含类的装饰器ddt和两个方法装饰器data(直接输入测试数据) 通常情况下,data中的数据按照一个参数传递给测试用例,如果da ...