小白之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 ...
随机推荐
- C#-foreach与yield
(转自:http://www.jb51.net/article/34627.htm) 1. foreach语句 C#编译器会把foreach语句转换为IEnumerable接口的方法和属性. fore ...
- 2017.10.30 Epicor -ERP
1 公司新用ERP系统,做使用培训,mark... This course reviews the project management flow in the Epicor application. ...
- Kali Linux ettercap的使用
ettercap是执行ARP欺骗嗅探的工具,通常用它来施行中间人攻击. 我还介绍过另一个arp欺骗工具-arpspoof 我使用的是Kali Linux 2.0:在开始使用ettercap之前,先配置 ...
- [EMWIN]关于 GUI_GetPixelIndex 使用的问题
在模拟器上和st单片机上使用以下代码: GUI_COLOR color0,color1; color0 = GUI_GetPixelIndex(rect.x1+1, rect.y0);color1 = ...
- Docker运行GUI软件的方法
转自 https://www.csdn.net/article/2015-07-30/2825340 简介: Docker通过namespace将容器与主机上的网络和运行环境进行了隔离,默认情况下,在 ...
- 【英语】Bingo口语笔记(83) - hell系列
- webservice WS-RS独立发布
一.基本介绍 Web Services是一个软件接口,它描述了一组可以在网络上通过标准化的 XML 消息传递访问的操作.它使用基于 XML 语言的协议来描述要执行的操作或者要与另一个 Web 服务交换 ...
- PS基础教程[7]如何为照片瘦身
有没有对自己的身材有所抱怨,有没有想过让自己的照片便得苗条一些,其实只有你想不到的,没有我们做不到的,PS中可以很简单的将我们的身体进行美化瘦身,本次经验我们就来学习一下简单的操作. 方法 1.打卡P ...
- 使用Metaspoit攻击MS08-067
kali视频学习请看 http://www.cnblogs.com/lidong20179210/p/8909569.html 使用Metaspoit攻击MS08-067 MS08-067漏洞的全称为 ...
- 20165222 实验一java开发环境的熟悉
实验内容及步骤 实验一 Java开发环境的熟悉-1 1 建立“自己学号exp1”的目录 2 在“自己学号exp1”目录下建立src,bin等目录 3 javac,java的执行在“自己学号exp1”目 ...