小白之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 ...
随机推荐
- sql语言分类与整理：DQL\DML\DDL
整体分为三类: 数据库查询语言(DQL,data QUERY LANGUAGE):对表的查询语句,select 数据库定义语言(DDL,data defined LANGUAGE):create da ...
- [转载]java在线比较两个word文件
一.项目背景 开发文档管理系统或OA办公系统的时候,实现在线处理word文档的功能比较容易,但是也经常会有客户提出文档版本管理的需求,这就需要同时在线打开两个word文件,对比两个不同版本的word文 ...
- Qt 中使用智能指针
教研室的项目,就是用Qt做个图形界面能收发数据就可以了,但是创建数据管理类的时候需要各种new, delete,很小心了但是内存使用量在不断开关程序之后函数会长,由于用的是gcc 4.7.* 所以好 ...
- Mac os x 下配置Intellij IDEA ＋ Tomcat 出现权限问题的解决办法
出现的错误提示如下: 下午9:11:27 All files are up-to-date下午9:11:27 All files are up-to-date下午9:11:27 Error runni ...
- request对象和response对象，什么时候用，具体用哪一个，没有感觉
request对象和response对象,什么时候用,具体用哪一个,没有感觉
- Helix Server流媒体服务器架设教程(附Helix Server11.01下载)
现在D版的远古影视系统很流行,也很实用,但是在这之前,很多人都是用共享,或者是使用Helix Server留媒体来做电影服务器~ 虽然Helix Server流媒体服有点落伍了,不过我相信它还是有用武 ...
- Java进阶知识点7：不要只会写synchronized - JDK十大并发编程组件总结
一.背景 提到Java中的并发编程,首先想到的便是使用synchronized代码块,保证代码块在并发环境下有序执行,从而避免冲突.如果涉及多线程间通信,可以再在synchronized代码块中使用w ...
- Angular在render完成之后，执行Js脚本
AngularJs中,如何在render完成之后,执行Js脚本 app.directive('onFinishRenderFilters', function ($timeout) { return ...
- UVA11174 Stand in a Line
题意 PDF 分析 \[ f(i)=f(c_1)f(c_2)\dots\times(s(i)-1)!/(s(c_1)!s(c_2)! \dots s(c_k)! )\\ f(root)=(s(root ...
- database - 数据库设计/使用容易忽略的细节
一.设计 1,数据类型尽量使用数字型,数字型的比较比字符型的快很多 2,数据类型尽量小,预测可以满足未来需求的前提 3,尽量建表时字段不允许为null,除非必要,可以用NOT NULL+DEFAULT ...