小白之js原生轮播图
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="banner.css">
<script src="banner.js"></script>
</head>
<body>
<div class="ban">
<ul id="scroll">
<li>
<a href="#">
<img src="1.jpg" style="height:282px;width:376px;" alt="">
</a>
</li>
<li>
<a href="#">
<img src="2.jpg" style="height:282px;width:376px;" alt="">
</a>
</li>
<li>
<a href="#">
<img src="3.jpg" style="height:282px;width:376px;" alt="">
</a>
</li>
</ul>
<ul id="btns">
<span class="active"></span>
<span></span>
<span></span>
</ul>
<button id="shang"><</button>
<button id="xia">></button>
</div>
</body>
</html>
css：(banner.css)
.ban{position:relative;height:282px;width:376px;}
#scroll{list-style: none;margin:0;padding:0;}
#scroll>li{display: none}
#btns{width:376px;position:absolute;bottom:0;text-align: center;padding:5px 0;}
#btns span{background:#f5f5f5;display: inline-block;width:10px;height:10px;border-radius: 50%;}
.ban .active{background:#555!important;}
#shang,#xia{background: rgba(255,255,255,0.7);padding:10px;border: 0;position: absolute;top:130px;z-index: 100000;color:#000;font-weight: bold}
#shang{left:0}
#xia{right:0}
js：(banner.js)
var scroll = document.getElementById("scroll");
var scrollli = document.getElementById("scroll").getElementsByTagName("li");
var btns = document.getElementById("btns").getElementsByTagName("span");
var shangbtn = document.getElementById("shang");
var xiabtn = document.getElementById("xia");
var index = 1;
scrollli[0].style.display = "block";
function clearimg(){
/*把所有图片隐藏*/
for(var i=0;i<scrollli.length;i++){
scrollli[i].style.display="none";
}
}
function clearactive(){
for(var i=0;i<btns.length;i++){
btns[i].classList.remove("active");
}
}
xiabtn.onclick=function() {
clearimg();clearactive();
index++;
if(index>3){
index=1;
}
/*把需要显示的图片显示出来*/
scrollli[index-1].style.display="block";
btns[index-1].classList.add("active");
};
shangbtn.onclick=function() {
clearimg();clearactive();
index--;
if(index<1){
index=3
}
/*把需要显示的图片显示出来*/
scrollli[index-1].style.display="block";
btns[index-1].classList.add("active");
};
function btnsclick(y) {
clearimg();
clearactive();
console.log(y);
/*把需要显示的图片显示出来*/
console.log(scrollli[0])
scrollli[y].style.display = "block";
btns[y].classList.add("active");
index = y+1;
}
for(var i=0; i<btns.length; i++){
(function(j){
btns[j].onclick = function () {
btnsclick(j)
};
})(i)
}
setInterval(function () {
clearimg();
clearactive();
index++;
if(index>3){
index=1;
}
/*把需要显示的图片显示出来*/
scrollli[index-1].style.display="block";
btns[index-1].classList.add("active");
},3000);
单文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.ban{position:relative;height:282px;width:376px;}
#scroll{list-style: none;margin:0;padding:0;}
#scroll>li{display: none}
#btns{width:376px;position:absolute;bottom:0;text-align: center;padding:5px 0;}
#btns span{background:#f5f5f5;display: inline-block;width:10px;height:10px;border-radius: 50%;}
.ban .active{background:#555!important;}
#shang,#xia{background: rgba(255,255,255,0.7);padding:10px;border: 0;position: absolute;top:130px;z-index: 100000;color:#000;font-weight: bold}
#shang{left:0}
#xia{right:0}
</style>
</head>
<body>
<div class="ban">
<ul id="scroll">
<li>
<a href="#">
<img src="1.jpg" style="height:282px;width:376px;" alt="">
</a>
</li>
<li>
<a href="#">
<img src="2.jpg" style="height:282px;width:376px;" alt="">
</a>
</li>
<li>
<a href="#">
<img src="3.jpg" style="height:282px;width:376px;" alt="">
</a>
</li>
</ul>
<ul id="btns">
<span class="active"></span>
<span></span>
<span></span>
</ul>
<button id="shang"><</button>
<button id="xia">></button>
</div>
<script>
var scroll = document.getElementById("scroll");
var scrollli = document.getElementById("scroll").getElementsByTagName("li");
var btns = document.getElementById("btns").getElementsByTagName("span");
var shangbtn = document.getElementById("shang");
var xiabtn = document.getElementById("xia");
var index = 1; scrollli[0].style.display = "block"; function clearimg(){
/*把所有图片隐藏*/
for(var i=0;i<scrollli.length;i++){
scrollli[i].style.display="none";
}
}
function clearactive(){
for(var i=0;i<btns.length;i++){
btns[i].classList.remove("active");
}
} xiabtn.onclick=function() {
clearimg();clearactive();
index++;
if(index>3){
index=1;
}
/*把需要显示的图片显示出来*/
scrollli[index-1].style.display="block";
btns[index-1].classList.add("active");
}; shangbtn.onclick=function() {
clearimg();clearactive();
index--;
if(index<1){
index=3
}
/*把需要显示的图片显示出来*/
scrollli[index-1].style.display="block";
btns[index-1].classList.add("active");
};
function btnsclick(y) {
clearimg();
clearactive();
console.log(y);
/*把需要显示的图片显示出来*/
console.log(scrollli[0])
scrollli[y].style.display = "block";
btns[y].classList.add("active");
index = y+1;
}
for(var i=0; i<btns.length; i++){
(function(j){
btns[j].onclick = function () {
btnsclick(j)
};
})(i)
} setInterval(function () {
clearimg();
clearactive();
index++;
if(index>3){
index=1;
}
/*把需要显示的图片显示出来*/
scrollli[index-1].style.display="block";
btns[index-1].classList.add("active");
},3000);
</script>
</body>
</html>
小白之js原生轮播图的更多相关文章
- js原生轮播图
轮播图是新手学前端的必经之路! 直接上代码! <!DOCTYPE html><html lang="en"><head> <meta ch ...
- js 原生轮播图插件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- 原生JS实现轮播图的效果
原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...
- 使用原生js将轮播图组件化
代码地址如下:http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...
- 用原生js封装轮播图
原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...
- 原生js焦点轮播图的实现
继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...
随机推荐
- js & jquery数组介绍
(转自:http://www.jb51.net/article/30793.htm) 1.数组的创建 var arr=new Array(); 2.查找数组中的元素 for(var i=0;i< ...
- CFile与CArchive区别
一,区别 CFile是直接与磁盘打交道的一个文件对象,可以处理文本和二进制文件 CArchive将CFile作为自己的一个参数,通过该参数可以实现文本,二进制甚至继承至COject对象的类的本地存储和 ...
- Java学习笔记——基础篇
Tips1:eclipse中会经常用到System.out.println方法,可以先输入syso,然后eclipse就会自动联想出这个语句了!! 学习笔记: *包.权限控制 1.包(package) ...
- 《Drools7.0.0.Final规则引擎教程》第4章 4.2 activation-group& dialect& date-effective
activation-group 该属性将若干个规则划分成一个组,统一命名.在执行的时候,具有相同activation-group 属性的规则中只要有一个被执行,其它的规则都不再执行.可以用类似sal ...
- Electron 使用 Webpack2 预编译 Electron 和 Browser targets
Electron 使用 Webpack2 预编译 Electron 和 Browser targets 前一篇文章说了说怎样使用 Webpack2 预编译 Electron 应用,但是有时候我们希望使 ...
- Leetcode 589. N-ary Tree Preorder Traversal
DFS,两种实现方式,递归和栈. """ # Definition for a Node. class Node: def __init__(self, val, chi ...
- Gif图片验证码类
新开发的安全验证码类,支持生成Gif图片验证码(带噪点,干扰线,网格,随机色背景,随机自定义字体,倾斜,Gif动画). 上图: 字体及字体文件的路径需要在类中$FontFilePath及$FontFi ...
- 转载:将STM32的标准库编译成lib使用【图文】
from:http://www.cnblogs.com/zyqgold/p/3189719.html 百度上边也有不少关于lib文件的文章,恰巧看到该博文,感觉该博文的条理清晰,步骤明确,故复制到这个 ...
- IDEA Generate pojo（data first）基于 spring data jpa - code
基于 idea 的 pojo生成 右侧菜单栏 Database->New( + 图标)->Data source-> mysql(根据自己的数据源选择) 使用: 代码如下: POJO ...
- IBM Cognos 10.2 最新体验之旅
IBM Cognos Data Manager 数据集市的构建利器 本文详细的介绍了 Cognos 最新版本 10.2 的数据集市构建器 Data Manager 的使用,对于希望系统了解 Cogno ...