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

随机推荐

SqlServer表死锁的解决方法
SqlServer表死锁的解决方法前些天写一个存储过程,存储过程中使用了事务,后来我把一些代码注释掉来进行调试找错,突然发现一张表被锁住了,原来是创建事务的代码忘记注释掉.本文表锁住了的解决方法 ...
[eShopOnContainers 学习系列] - Index - 开篇索引
[资料] 学习资料来源于 eShopOnContainers wiki 以及微软官方微服务架构指南 [eShopOnContainers 学习系列] - 00 - 开发环境需求 [eShopOnCo ...
Spring AOP（面向切面示例）
什么是AOP?基本概念切面(aspect):横切关注点被模块化的特殊对象.通知(advice):切面必须要完成的工作.切面中的每个方向称之为通知.通知是在切面对象中的.目标(target):被通知的对 ...
WebSocket 在烧瓶和龙卷风中的应用
a. 安装 pip3 install gevent-websocket 作用: - 处理Http.Websocket协议的请求 -> socket - 封装Http.Websocket相关数据 ...
Linux中查看各文件夹大小命令：du -h --max-depth=1
Linux中查看各文件夹大小命令:du -h --max-depth=1 du [-abcDhHklmsSx] [-L <符号连接>][-X <文件>][--block-siz ...
《Drools7.0.0.Final规则引擎教程》第3章 3.1 Hello World 实例
3.1 Hello World 实例在上一章中介绍了Drools5x版本中规则引擎使用的实例,很明显在Drools7中KnowledgeBase类已经标注为"@Deprecated&quo ...
在ubuntu16.04上安装php7 mysql5.7 nginx1.10并支持http2
安装nginx 首先更新软件包并且安装nginx sudo apt-get update sudo apt-get install nginx 开放防火墙配置 sudo ufw allow 'Ngi ...
剑指Offer面试题：8.二进制中1的个数
一题目:二进制中1的个数题目:请实现一个整数,输出该数二进制表示中1的个数.例如把9表示成二进制是1001,有2位是1.因此如果输入9,该函数输出2. 二可能引起死循环的解法 // 计算整数的二 ...
1138. Postorder Traversal (25)
Suppose that all the keys in a binary tree are distinct positive integers. Given the preorder and in ...
datetimebox
$.extend($.fn.datagrid.defaults.editors, { datetimebox: {// datetimebox就是你要自定义editor的名称 init: functi ...

小白之js原生轮播图

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

随机推荐

热门专题