小白之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 ...
随机推荐
- LeetCode OJ：Divide Two Integers（两数相除）
Divide two integers without using multiplication, division and mod operator. If it is overflow, retu ...
- 开发Wordpress主题时没有特色图片的功能
在自己开发Wordpress主题的时候,发现右下方没有了之前见到的特色图片(Featured Image)功能模块 1.找到后台右上方的显示选项模块,下拉之后启用即可 2.如果以上步骤找不到该选项,那 ...
- 2017年终巨献阿里、腾讯最新Java程序员面试题，准备好进BAT了吗
Java基础 进程和线程的区别: Java的并发.多线程.线程模型: 什么是线程池,如何使用? 数据一致性如何保证:Synchronized关键字,类锁,方法锁,重入锁: Java中实现多态的机制是什 ...
- （八）js函数二
1.变量 a)局部变量:在所有函数内部定义的变量,或者在函数内部未使用var声明的变量也属于全局变量. b)全局变量:在所有函数外部定义的变量. eg: 1) var a = 5,b = 4, ...
- php 设计数据库连接池
摘要 之前总是以脚本面向过程的方式写PHP代码,所以很大程度上来说,既不规范,也不安全,更不容易维护.为了代码的重用,准备写一套自己的工具库,这样的话,以后写项目的时候就可以很轻松的进行使用啦. 今天 ...
- LeetCode 621. Task Scheduler
原题链接在这里:https://leetcode.com/problems/task-scheduler/description/ 题目: Given a char array representin ...
- noip积木大赛
先要覆盖一号位置的高度,(现在你的目的只是想要覆盖一号位置). 每次你可以选区间[l,r]高度+1,这个作为一个操作. 为什么不选的范围大一点,让更多的区间增加高度呢. 所以红色的地方是,在我的目的是 ...
- 3 循环语句——《Swift3.0从入门到出家》
3 循环语句 当一段代码被多次重复利用的使用我们就使用循环 swift提供了三种形式的循环语句 1.while 循环 2.repeat — while 循环 3.for — in 循环 while 循 ...
- 使用appassembler-maven-plugin插件生成启动脚本
appassembler-maven-plugin可以自动生成跨平台的启动脚本,省去了手工写脚本的麻烦,而且还可以生成jsw的后台运行程序. 首先pom引入相关依赖 <build> < ...
- aspupload ，在winows server 2008 下无法使用
aspupload ,在winows server 2008 下无法使用.求助解决办法 2014-01-12 13:31 goolean | 浏览 775 次 操作系统 aspupload64位,安装 ...