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 ...
随机推荐
- php常见安全问题
XSS攻击原理: XSS又叫CSS (Cross Site Script) ,跨站脚本攻击.它指的是恶意攻击者往Web页面里插入恶意html代码,当用户浏览该页之时,嵌入其中Web里面的html代码会 ...
- sqlserver 找出字符第N次出现的位置
[1编写函数]CREATE FUNCTION IndexOf(@str VARCHAR(500),@value VARCHAR(50),@posIndex INT)RETURNS int AS BEG ...
- 并查集——poj1703（带权并查集入门）
传送门:Find them, Catch them 题意:警察抓获N个罪犯,这些罪犯只可能属于两个团伙中的一个,现在给出M个条件(D a b表示a和b不在同一团伙),对于每一个询问(A a b)确定a ...
- microtime()
PHP函数microtime()返回当前 Unix 时间戳和微秒数.
- Maven中mirrors和repository的关系
一.前言 之前没有搞清楚pom.xml里面配置的repositorys节点配置的仓库和mirrors里面配置的仓库的“镜像”间的关系,特意去搜索了相关内容,这边有篇文章讲得透彻,所以这边转载一下~ 二 ...
- CSS的基本使用
CSS的出现就是为了将HTML的内容与样式分离 CSS的书写方式 selector{ key:value } h1{ color: blue; } <!DOCTYPE html> < ...
- [BZOJ3473][BZOJ3277]字符串
[BZOJ3473][BZOJ3277]字符串 试题描述 给定 \(n\) 个字符串,询问每个字符串有多少子串(不包括空串)是所有 \(n\) 个字符串中至少 \(k\) 个字符串的子串? 输入 第一 ...
- 【CF edu 30 C. Strange Game On Matrix】
time limit per test 1 second memory limit per test 256 megabytes input standard input output standa ...
- Cannot resolve symbol ‘Component’ & Cannot resolve symbol ‘PropTypes’
import React, { Component, PropTypes } from 'react' 报错:Cannot resolve symbol 'Component' Cannot reso ...
- 2015年网易校招Java开发工程师(技术架构)在线笔试题
1. 程序和进程的本质区别是? A.在外存和内存存储 B.非顺序和顺序执行机器指令 C.独占使用和分时使用计算机资源 D.静态和动态特征 参考答案分析: 进程与应用程序的区别: 进程(Process ...