1、效果如下图：

2、源码如下：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>JavaScript banner轮播 左右切换 圆点点击切换</title>

<style type="text/css">

div,ul,li,a,span,img{margin:0;padding:0;}

#banner {

    overflow:hidden;

    width:100%;

    height:400px;

    position:relative;

    float:left;

    padding-bottom: 10px;

}

#tab>img:not(:first-child){

    display:none;

}

.lunbo_btn {

    height: 15px;

    width: 100%;

    margin: 0px auto;

    margin-top: -40px;

    position: absolute;

    z-index: 3;

    text-align: center;

}

.lunbo_btn span {

    width:14px;

    height:14px;

    display:inline-block;

    background-color:#b4b5b7;

    border-radius:50%;

    margin:0px 2px;

    cursor:pointer;

}

.lunbo_btn span.hover {

    background-color:#ffb23c;

}

.arrow {

    display: none;

    width: 30px;

    height: 60px;

    background-color: rgba(0,0,0,0.4);

    position: absolute;

    top: 50%;

    margin-top: -30px;

    z-index:999;

}

.arrow span {

    display: block;

    width: 10px;

    height: 10px;

    border-bottom: 2px solid #fff;

    border-left: 2px solid #fff;

}

.slider_left {

    margin: 25px 0 0 10px;

    transform: rotate(45deg);

}

.prve {

    left: 0;

}

.next {

    right: 0;

}

.slider_right {

    margin: 25px 0 0 5px;

    transform: rotate(-135deg);

}

.arrow:hover{background:#444;}

#banner:hover .arrow{display:block;}

</style>

</head>

<body>

<div id="banner">

    <!-- 轮播图片 -->

    <div id="tab">

        <img class="tabImg" src="data:images/banner1.jpg" height="400"/>

        <img class="tabImg" src="data:images/banner2.jpg" height="400"/>

        <img class="tabImg" src="data:images/banner3.jpg" height="400"/>

        <img class="tabImg" src="data:images/banner4.jpg" height="400"/>

    </div>

    <!-- 指示符 -->

    <div class="lunbo_btn">

        <span num="0" class="tabBtn hover"></span>

        <span num="1" class="tabBtn"></span>

        <span num="2" class="tabBtn"></span>

        <span num="3" class="tabBtn"></span>

    </div>

    <!-- 左右切换按钮 -->

    <div class="arrow prve">

        <span class="slider_left"></span>

    </div>

    <div class="arrow next">

        <span class="slider_right"></span>

    </div>

</div>

<script type="text/javascript">

    //轮播图

    var curIndex=0;//初始化

    var img_number = document.getElementsByClassName('tabImg').length;

    var _timer = setInterval(runFn,2000);//2秒

    function runFn(){ //运行定时器

        curIndex = ++curIndex == img_number ? 0 : curIndex;//算法 4为banner图片数量

        slideTo(curIndex);

     }

     //圆点点击切换轮播图

     window.onload = function  () {    //为按钮初始化onclick事件

        var tbs = document.getElementsByClassName("tabBtn");

        for(var i=0;i<tbs.length;i++){

            tbs[i].onclick = function  () {

                clearInterval(_timer);//细节处理，关闭定时，防止点切图和定时器函数冲突

                slideTo(this.attributes['num'].value);

                curIndex = this.attributes['num'].value

                _timer = setInterval(runFn,2000);//点击事件处理完成，继续开启定时轮播

            }

        }

    }

    var prve = document.getElementsByClassName("prve");

    prve[0].onclick = function () {//上一张

        clearInterval(_timer);//细节处理，关闭定时，防止点切图和定时器函数冲突

        curIndex--;

        if(curIndex == -1){

            curIndex = img_number-1;

        }

        slideTo(curIndex);

        _timer = setInterval(runFn,2000);//点击事件处理完成，继续开启定时轮播

    }

    var next = document.getElementsByClassName("next");

    next[0].onclick = function () {//下一张

        clearInterval(_timer);//细节处理，关闭定时，防止点切图和定时器函数冲突

        curIndex++;

        if(curIndex == img_number){

            curIndex =0;

        }

        slideTo(curIndex);

        _timer = setInterval(runFn,2000);//点击事件处理完成，继续开启定时轮播

    }

    //切换banner图片 和 按钮样式

    function slideTo(index){

        console.log(index)

        var index = parseInt(index);//转int类型

        var images = document.getElementsByClassName('tabImg');

        for(var i=0;i<images.length;i++){//遍历每个图片

            if( i == index ){

                images[i].style.display = 'inline';//显示

            }else{

                images[i].style.display = 'none';//隐藏

            }

        }

        var tabBtn = document.getElementsByClassName('tabBtn');

        for(var j=0;j<tabBtn.length;j++){//遍历每个按钮

            if( j == index ){

                tabBtn[j].classList.add("hover");    //添加轮播按钮hover样式

                curIndex=j;

            }else{

                tabBtn[j].classList.remove("hover");//去除轮播按钮hover样式

            }

        }

    }

</script>

</body>

</html>

完毕！

good job! good luck!

JavaScript banner轮播 左右切换 圆点点击切换的更多相关文章

  1. 用JavaScript制作banner轮播图

    JavaScript_banner轮播图 让我们一起来学习一下用js怎么实现banner轮播图呢? 直接看代码: <!DOCTYPE html> <html> <head ...

  2. 原生无缝Banner轮播图

    话不多说,先展示效果图.由于录制工具,稍显卡顿,实际是流畅的.可以看到实现了无缝轮播,鼠标悬停,点击左右上下按钮切换Banner的功能,如图1所示. 图1 原生无缝banner效果展示 以我这个轮播图 ...

  3. HTML+CSS+Javascript实现轮播图效果

    HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...

  4. JavaScript焦点轮播图

    在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...

  5. [js开源组件开发]js轮播图片支持手机滑动切换

    js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

  6. 基于Jquery的banner轮播插件,简单粗暴

    新手练习封装插件,觉着在前端这一块的轮播比较多,各种旋转木马一类的3D旋转,技术不够,所以封装了一个简单的banner轮播插件,功能也比较简单,就是左右向的轮播. 先挂地址https://github ...

  7. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  8. 第一百五十五节，封装库--JavaScript，轮播器

    封装库--JavaScript,轮播器 html <div id="banner"> <img src="img/banner1.jpg" a ...

  9. 安卓开发笔记（三十二）:banner轮播图的实现

    一.activity.xml 我这里主要爬取的爱奇艺首页的图片进行轮播,应用了两个github上的开源库,一个banner的库,一个加载网络图片的库,用开源库能够极大地节省我们编写代码的时间. < ...

随机推荐

  1. iOS 手势及触摸

    转自:http://justsee.iteye.com/blog/1885538 一.响应链 在IOS开发中会遇到各种操作事件,通过程序可以对这些事件做出响应. 首先,当发生事件响应时,必须知道由谁来 ...

  2. [TimLinux] CSS 计数功能实现递归目录

    内容引用自<css世界>: count-reset 与 counter 为父子关系,兄弟关系会导致序号混乱 调用一次 count-increment 将给序号进行一次报数,调用 count ...

  3. python 2.7编码问题

    问题引入 先看下面的代码,代码用utf8编码格式保存. print("中") 仅有一行代码,但是这个代码无论在ubuntu下还是win7下都会报错,错误信息类似是下面的内容: Sy ...

  4. 攻略前端面试官（三）：JS的原型和原型链

    本文在个人主页同步更新~ 背就完事了 介绍:一些知识点相关的面试题和答案 使用姿势:看答案前先尝试回答,看完后把答案收起来检验成果~ 面试官:什么是构造函数 答:构造函数的本质是一个普通函数,他的特点 ...

  5. 聊聊JS的二进制家族：Blob、ArrayBuffer和Buffer

    事实上,前端很少涉及对二进制数据的处理,但即便如此,我们偶尔总能在角落里看见它们的身影. 今天我们就来聊一聊前端的二进制家族:Blob.ArrayBuffer和Buffer 概述 Blob: 前端的一 ...

  6. org json 和 fast json 掺杂使用引起的错误

    1. 取值的不同 当所取得key不存在时: org json 会抛异常 fast json 会返回null 示例: com.alibaba.fastjson.JSONObject fastJson = ...

  7. 最新115道华为、京东、滴滴、美团精选Java面试题整理

    京东面试题 1. 一般sql注入怎么发现触点的,从源码阐述sqlmap如何测试注入点的. 2. masscan扫描端口时靠什么检测,为什么这么快? 请详述. 3. 你写过哪些小工具,你为你使用过的工具 ...

  8. uploadify没反应

    由于业务问题,需要用到uploadify这个插件,结果官方的case怎么弄都没问题,弄到自己的页面上就有问题了. 后来发现,这个插件是要用到swf的,但是页面加载的过程中并没有加载swf文件,所以将问 ...

  9. 区块链学习——HyperLedger-Fabric v1.0环境搭建详细教程

    相对与v0.6版本来说,1.0版本改变较大,此处不多说,只是将小白自己搭建1.0环境的过程分享给大家.希望对大家能有所帮助! 这一篇可能对前面的环境搭建会写的有些粗略,如有疑问,可阅读上一篇V0.6版 ...

  10. 2016/10/21 java中的参数传方式

    参考:http://blog.sina.com.cn/s/blog_59ca2c2a0100qhjx.html http://www.cnblogs.com/caiyao/p/4964176.html