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 ...
随机推荐
- 【CodeForces】9A-Die Roll
目录 Question Solution 解法1 解法2 Question 三个人掷骰子,前两个人的得分分别是Y和W,问第三个人胜利的概率(第三个人得分不小于Y.W)?结果输出格式为\(A/B\),如 ...
- 树莓派搭建 Hexo 博客（一）
Hexo 一个开源的博客框架,本文记录了一下在树莓派上搭建 Hexo 博客的过程. 什么是 Hexo? Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解 ...
- BZOJ 2756 SCOI2012 奇怪的游戏 最大流
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2756 Description Blinker最近喜欢上一个奇怪的游戏. 这个游戏在一个 N ...
- POJ 3177 Redundant Paths & POJ 3352 Road Construction（双连通分量）
Description In order to get from one of the F (1 <= F <= 5,000) grazing fields (which are numb ...
- url解析字符串
课程链接:http://www.imooc.com/video/6711/0
- lintcode-115-不同的路径 II
115-不同的路径 II "不同的路径" 的跟进问题: 现在考虑网格中有障碍物,那样将会有多少条不同的路径? 网格中的障碍和空位置分别用 1 和 0 来表示. 注意事项 m 和 n ...
- 文本太长，用省略号显示的css样式
——html代码 <divid="d1" title="鼠标放上显示的文字"></div> ——css代码 #d1{ width:300 ...
- 【python】实现一个python编程的小时钟！
[本实验内容] 1.GUI.PyQT5介绍2.实现此次实验效果 [一 GUI.PyQt5介绍] 1.Python简介 2.GUI介绍 几个常用的Python GUI库: (1)wxPython (2) ...
- JS frame 跨域 传值
1.在index.html 页面定义一个 函数用于接收 子页面的调用. <iframe id="common_iframe" class="common_conte ...
- 整理base.css,重设浏览器样式
有的时候,可以把自己经常写的代码整理一下,分文别类,用的时候,拿过来直接用就可以了,可以节约很多时间,提高工作效率.所以,每个人都要有自己的代码库.点击下载 /* * @Author: liubeim ...