javascript写的轮播图
欢迎指点！
预览图：
可以通过 https://littlehiuman.github.io/08-Carousel/index-2.html 查看本页面效果。
还有另一种的效果：https://littlehiuman.github.io/08-Carousel/index.html。
代码在这里：https://github.com/littleHiuman/littleHiuman.github.io/tree/master/08-Carousel
https://github.com/littleHiuman/littleHiuman.github.io 求点star~~~
区别: 按钮组、左箭头、右箭头的实现是一样的。
index.html 通过改变left的值来进行图片轮播，所以布局上有两个外容器
index-2.html 通过获取索引来进行图片轮播，布局上只需要一个外容器
代码：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
* {
margin: 0;
padding: 0;
} li {
list-style: none;
} .containner {
position: relative;
overflow: hidden;
width: 900px;
height: 600px;
} .containner:hover #prev,
.containner:hover #next {
display: block;
} #prev,
#next {
display: none;
position: absolute;
top: 0;
width: 15%;
height: 100%;
font-size: 50px;
color: DodgerBlue;
background: rgba(244, 50, 0, .1);
text-align: center;
cursor: pointer;
} #prev {
left: 0;
} #next {
right: 0;
} .picGroup {
position: absolute;
width: 100%;
height: 100%;
} .picGroup img {
display: block;
width: 100%;
height: 100%;
} .titleGroup {
position: absolute;
top: 80%;
width: 100%;
height: 36px;
line-height: 36px;
background: rgba(0, 0, 0, .2);
text-align: center;
color: #fff;
} .titleGroup p {
display: none;
} .btnGroup {
position: absolute;
top: 90%;
left: 50%;
transform: translateX(-50%);
} .btnGroup li {
display: inline-block;
width: 10px;
height: 10px;
margin: 4px;
background: #fff;
cursor: pointer;
} </style>
</head> <body onselectstart="return false;" style="-moz-user-select:none;">
<div class="containner">
<div class="picGroup">
<img src="http://img3.imgtn.bdimg.com/it/u=1525767941,1365223150&fm=26&gp=0.jpg">
<img src="http://img0.imgtn.bdimg.com/it/u=501564876,418990644&fm=26&gp=0.jpg">
<img src="http://img0.imgtn.bdimg.com/it/u=2402875933,3197600583&fm=26&gp=0.jpg">
</div>
<div class="titleGroup">
<p>标题1</p>
<p>标题2</p>
<p>标题3</p>
</div>
<ul class="btnGroup">
<li></li>
<li></li>
<li></li>
</ul>
<span id="prev"><</span>
<span id="next">></span>
</div>
</body> <script>
var current = 0;
var picGroupItem = document.getElementsByClassName('picGroup')[0];
var imgHeight = picGroupItem.offsetHeight;
var ctrlLeft = document.getElementById('prev');
var ctrlRight = document.getElementById('next');
ctrlLeft.style.lineHeight = imgHeight+'px';
ctrlRight.style.lineHeight = imgHeight+'px'; var btnGroupItem = document.getElementsByClassName('btnGroup')[0];
btnGroupItem.children[current].style.background = 'red'; var titleGroupItem = document.getElementsByClassName('titleGroup')[0];
titleGroupItem.children[current].style.display = 'block'; var aLi = document.getElementsByTagName('li');
var title = document.getElementsByTagName('p');
var picLen = picGroupItem.children.length; var timer; for (var i = 0; i < aLi.length; i++) {
aLi[i].index = [i];
aLi[i].onclick = function () { clearInterval(timer);
timer = setInterval(run, 2000); current = this.index; picGroupItem.style.top = -imgHeight * current + 'px';
otherChange();
}
} // 开始轮播
timer = setInterval(run, 2000);
function run() {
current++
current %= picLen
picGroupItem.style.top = -imgHeight * current + 'px';
otherChange();
} //按钮、title的事件
function otherChange() {
for (var i = 0; i < picLen; i++) {
if (i == current) {
aLi[i].style.background = "red";
title[i].style.display = "block";
} else {
aLi[i].style.background = "";
title[i].style.display = "";
}
}
} ctrlLeft.onclick = function () {
clearInterval(timer);
timer = setInterval(run, 2000); --current;
current = current<0?picLen+current:current;
current %= picLen; picGroupItem.style.top = -imgHeight * current + 'px';
otherChange();
} ctrlRight.onclick = function () {
clearInterval(timer);
timer = setInterval(run, 2000); ++current;
current %= picLen; picGroupItem.style.top = -imgHeight * current + 'px';
otherChange();
}
</script>
</body> </html>
javascript写的轮播图的更多相关文章
- 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈
自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...
- 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。
自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...
- 用jQuery写的轮播图
效果图: GitHub地址:https://github.com/123456abcdefg/Javascript 大家可以下载源码查看. 与前一篇写的轮播图实现的效果一致,这个是用jQuery写的, ...
- javascript原生js轮播图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Web前端原生JavaScript浅谈轮播图
1.一直来说轮播图都是困扰刚进业内小白的一大难点,因为我们不仅需要自己作出一个比较完美的运动框架(虽然网上一抓一大把,但是哪有比自己做出来实现的有成就感,不是吗?^_^),还必须需要非常关键性的把握住 ...
- 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流
未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...
- 原生js写简单轮播图方式１－从左向右滑动
轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...
- 原生javascript之实战 轮播图
成品效果如下图所示: 因为博客园限制图片上传大小被我删了一些帧数,所以图片看起来会有一点卡,现实运行是不会的 搭建HTML和CSS结构 HTML代码如下: <div class="wr ...
随机推荐
- LeetCode 215——数组中的第 K 个最大元素
1. 题目 在未排序的数组中找到第 k 个最大的元素.请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素. 示例 1: 输入: [3,2,1,5,6,4] 和 k = 2 ...
- Spring Cloud 自定义ConfigServer 解决敏感信息存储问题
公司需要将系统配置信息中的敏感信息独立存放. 现有系统采用Spring Cloud Config提供配置信息,其中敏感信息主要是Db配置,分解本次需求: (1)数据库配置信息分离(主要是Db信息). ...
- hibernate延时加载机制
延迟加载: 延迟加载机制是为了避免一些无谓的性能开销而提出来的,所谓延迟加载就是当在真正需要数据的时候,才真正执行数据加载操作.在Hibernate中提供了对实体对象的延迟加载以及对集合的延迟加载,另 ...
- DFS做题小结
一.深入理解DFS 采用递归写法 深度优先,思路就是沿着一条路一直走,直到走到死胡同,原路返回,返回到有多条道路的地方换其他路走.直到这条支路全部都访问过了,按照原路返回,回到起点,如果起点还有别的支 ...
- C++STL——堆栈
一.相关定义 原理:stack队列是一个线性存储表,插入和删除只在栈顶进行,从而构成了一个后进先出LIFO表. 入栈&出栈:元素的插入称为入栈,元素的删除称为出栈. stack是一种关联容器, ...
- c++单例模式代码分析
单例模式就是一个C++语法精华浓缩的一个体现,有句老话:麻雀虽小五脏俱全!来形容单例非常贴切! 下面的代码分析了如果自己malloc并且memcpy一个单例指针会带来很大危害并如何防止这种情况发生. ...
- 手动修改PHP页面返回状态码
<?php //比如当前页面要返回404状态码 header("HTTP/1.1 404 Not Found"); header("Status: 404 Not ...
- Chromium之文件类型
.grp: Generate your project. 是由Json(JavaScript Object Notation)(or Python?)来解析,根据环境(OS,Compiler..)来生 ...
- Luogu3953 NOIP2017逛公园（最短路+拓扑排序+动态规划）
跑一遍dij根据最短路DAG进行拓扑排序,按拓扑序dp即可.wa了三发感觉非常凉. #include<iostream> #include<cstdio> #include&l ...
- AGC017D Game on Tree（树型博弈）
题目大意: 给出一棵n个结点的树,以1为根,每次可以切掉除1外的任意一棵子树,最后不能切的话就为负,问是先手必胜还是后手必胜. 题解: 首先我们考虑利用SG函数解决这个问题 如果1结点有多个子节点,那 ...