小白之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 ...

随机推荐

重新认识HBase，Cassandra列存储——本质是还是行存储，只是可以动态改变列（每行对应的数据字段）数量而已，当心不是parquet
行先是以一种非常独特的方式被索引,随后Bigtable利用行键对数据进行分割,将它们分布到集群中.列可以被迅速地定义在行中,让Bigtable适用于大多数的非模式环境. 数据在表面上最初是由行进行排列 ...
[eShopOnContainers 学习系列] - 03 - 在远程 Ubuntu 16.04 上配置开发环境
直接把 md 粘出来了,博客园的富文本编辑器换成 markdown,没啥效果呀 ,先凑合吧.实在不行换地方 # 在远程 Ubuntu 16.04 上配置开发环境 ## 零.因为什么要用这么麻烦的 ...
SpringBoot_11_将springboot项目部署到外部tomcat上
一.前言二. 三.参考资料如何将Spring Boot项目打包部署到外部Tomcat 2.SpringBoot 项目如何在tomcat容器中运行
数据库设计系列之四--ER图
逻辑设计是做什么? 1.将需求转化为数据库的逻辑模型 2.通过ER图的型式对逻辑模型进行展示 3.同所选用的具体的DBMS系统无关
ElasticSearch安装及简单配置说明
目录 1. 准备安装包... 1 2. 安装jdk7. 1 3. 安装ElasticSearch. 2 4. 安装maven. 3 5. 集成IK ...
【dlbook】深度网络
前向网络:无反馈 feedback 连接 [输出单元] 线性 -- 高斯分布 . sigmoid单元 -- bernoulli输出. softmax单元 -- multinoulli [隐藏单元] 整 ...
linux 6 网卡名称修改
转自:http://blog.csdn.net/tianlesoftware/article/details/8737700 一．问题说明测试环境中出现的小问题,因为虚拟机之间经常复制来复制去,导致 ...
istreambuf_iterator
#include <set> #include <stdio.h> #include <iostream> #include <istream> #in ...
POJ1797 Heavy Transportation
解题思路:典型的Kruskal,不能用floyed(会超时),上代码: #include<cstdio> #include<cstring> #include<algor ...
bzoj 2657 旅游
Written with StackEdit. Description 到了难得的暑假,为了庆祝小白在数学考试中取得的优异成绩,小蓝决定带小白出去旅游~~ 经过一番抉择,两人决定将\(T\)国作为他们 ...

小白之js原生轮播图

小白之js原生轮播图的更多相关文章

随机推荐

热门专题