小白之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 ...
随机推荐
- webpack打包图片资源找不到问题
当我们进行前端打包时,需改成如下配置: 往常这样打包是没有问题的,可是今天进行项目打包的时候缺报图片找不到的错误,如图所示: 头部组件的图片资源找不到错误,后台发现因为头部组件的背景图片size过大, ...
- Foundations of Qt Development 学习笔记 Part1 Tips1-50
1. 信号函数调用的时候仅仅会发送出信号,所以不需要执行 ,所以对于信号声明就行,但是不需要进行定义. 2. 只有槽函数可以声明为public,private,或者是protected的,而信号不行. ...
- xhtml html
xhtml是用xml语言重写了html,相比html更规范了, XHTML是HTML像XML的一个过渡语言,它比HTML严谨性会高点,然后基本语言都还是沿用的HTML的标签,只不过废除了部分表现层的标 ...
- Android application testing with the Android test framework
目录(?)[-] Android automated testing 1 How to test Android applications Tip 2 Unit tests vs functional ...
- 视图框架：Spring MVC 4.0（1）
目录 一.表单标签库 1.1.简介 1.2.常用属性 1.3.form标签与input标签 1.4.checkbox标签 1.5.radiobutton标签 1.6.password标签 1.7.se ...
- Unity 2D 入门
原文:Introduction to Unity 2D 作者:Sean Duffy 译者:kmyhy 3/15/17 更新说明: 升级至 Unity 5.5. Unity 是一个非常流行和强大的游戏引 ...
- Java进阶面试问题列表
面向对象编程的基本理念与核心设计思想 解释下多态性(polymorphism),封装性(encapsulation),内聚(cohesion)以及耦合(coupling). 继承(Inheritanc ...
- Gradle配置IDEA正常识别JPA Metamodel Generator动态生成的代码
我们在使用JPA动态查询构建查询条件时,为了实现安全的类型检查,常常需要引用Hibernate JPA Metamodel Generator自动为我们生成静态元模型类. 而这些类由于编译时由Hibe ...
- HTML`CSS_网站页面不同浏览器兼容性问题解决
目前,最为流行的浏览器共有五个:分别是ie,Edge浏览器(属于微软),火狐,谷歌(chrome)Safari和Opera五大浏览器. Trident内核:IE ,360,,猎豹,百度: Gecko内 ...
- devops 几个方便的工具
1. fake API [canned](https://github.com/sideshowcoder/canned ) fake API. [wiremock](ht ...