今天给大家带来的是我自己做的一个轮播图效果，让我们一起来学习一下吧。

这是我的页面所有代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>轮播图</title>

         <style type="text/css">

             *{padding: 0;margin: 0;}

             #ban_box{width: 1000px;height: 400px;margin: 5% auto;position: relative;overflow: hidden;}

             #banner{position: absolute;z-index: 1;width:4000px;height: 400px;}

             #banner img{width: 1000px;height: 400px;float: left;}

             #but {position: absolute;left: 450px;bottom: 20px;z-index: 99;height: 20px;width: 110px;}

             #but span {float: left;margin-right:25px;width: 20px;height: 20px;border-radius: 50%;background: #ddd;cursor: pointer;}

             #but span:last-child{margin: 0;}

             #but .on{background: #C9251D;}

             .arrow {position: absolute;top: 180px;z-index: 2;text-decoration: none;font-size: 50px;font-weight: bold;color: #000;cursor: pointer;display: none;}

             #prev{left: 20px;}

             #next{right: 20px;}

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

         </style>

     </head>

     <body>

         <div id="ban_box">

             <div id="banner" style="left:-1000px;">

                 <img src="img/7.jpg"/>

                 <img src="img/11.jpg"/>

                 <img src="img/383708577581202919.jpg"/>

                 <img src="img/7.jpg"/>

             </div>

             <div id="but">

                 <span value="1" class="on"></span>

                 <span value="2"></span>

                 <span value="3"></span>

             </div>

             <a href="javascript:;" id="prev" class="arrow">&lt;</a>

                <a href="javascript:;" id="next" class="arrow">&gt;</a>

         </div>

         <script type="text/javascript" src="js/fz.js" ></script>

         <script type="text/javascript">

             var box = $("ban_box");

             var banner = $("banner");

             var prev = $("prev");

             var next = $("next");

             var but = $('but').getElementsByTagName('span');

             var timer;

             var value=1;

             function animation(lenghts){

                 var left = parseInt(banner.style.left) + lenghts;

                 banner.style.left = left + 'px';

                 banner.style.transition = ".5s";

                 //无限滚动判断

                 if (left > -1000) {

                     banner.style.left = -3000 + 'px';

                 }

                 if (left < -3000) {

                     banner.style.left = -1000 + 'px';

                 }

             }

             function butShow() {

                 //将之前的小圆点的样式清除

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

                     if (but[i].className == "on") {

                         but[i].className = "";

                     }

                 }

                 //数组从0开始，故index需要-1

                 but[value - 1].className = "on";

             }

             //上一页

             prev.onclick = function() {

                 value -= 1;

                 if (value < 1) {

                     value = 3;

                 }

                 butShow();

                 animation(1000);

             }

             //下一页

             next.onclick = function() {

                 value += 1;

                 if (value > 3){

                     value = 1;

                 }

                 butShow();

                 animation(-1000);

             }

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

             but[i].onclick = function(){

                 console.log(i);

                 var click = parseInt(this.getAttribute('value'));

                 var lenghts = 1000 * (value - click);

                 animation(lenghts);

                 value = click;

                 butShow();

                 }

             }

             //定时器

             function play() {

                 timer = setInterval(function () {

                     next.onclick();

                 }, 1000)

             }

             play();

             //鼠标悬浮停止

             function stop() {

                 clearInterval(timer);

             }

             box.onmouseover = stop;  //鼠标移到目标上让它停止

             box.onmouseout = play;   //鼠标移开时让它播放

         </script>

     </body>

 </html>

这其中有我自己封装的一些东西，需要引进去，或者把其中需要找的ID用dom找出来就可以了哦

这是我的效果图，大家可以找一些漂亮的图片哦，效果一定会很漂亮哦:

大家如果有什么问题可以在下面问，或者我的代码有什么bug也可以帮我提出，有更好的办法也可以分享给我哦。

【JavaScript_轮播图】的更多相关文章

  1. js 基础篇（点击事件轮播图的实现）

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  2. 实现下来ScrollView放大轮播图

    创建工程,创建一个UIScrollView属性,并遵循其协议: #define kWidth self.view.frame.size.width//屏幕宽 #define kHeight self. ...

  3. ViewPager轮播图

    LoopViewPagerLayout无限轮播 项目地址:https://github.com/why168/LoopViewPagerLayout 支持三种动画: 支持修改轮播的速度: 支持修改滑动 ...

  4. CSS-用伪类制作小箭头（轮播图的左右切换btn）

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

  5. phpcms首页实现轮播图

    1.在你想要加轮播图的位置加入以下 <div id="flowDiagram" > <div id="button"> <span ...

  6. React视角下的轮播图

    天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...

  7. Jquery 轮播图简易框架

    =====================基本结构===================== <div class="carousel" style="width: ...

  8. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  9. superSlider实现美女轮播图

    superSlider实现美女轮播图 <!DOCTYPE html><html lang="en"><head><meta charset ...

随机推荐

  1. Appsacn 定期自动化扫描

    appscan提供了计划扫描的选项,配合windows的计划任务,可以按需设定. 操作流程如下: 1.打开Appsacn--工具---扫描调度程序---新建 2.新建后显示如下窗口 3.填写好相应的设 ...

  2. Android真机安装sqlite3的方法

    欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...

  3. [转]OpenLiveWriter 代码插件

    插件地址链接:http://pan.baidu.com/s/1jHFDtbS 密码:ax31 将文件解压,放在路径下面 重启应用后,如图

  4. 使用Python实现贪心算法

    题目: 圣诞节来临了,在城市A中,圣诞老人准备分发糖果.现在有多箱不同的糖果,每一种糖果都有自己的价值和重量.每箱糖果都可以拆分成任意散装组合带走.圣诞老人的驯鹿最多只能承受一定重量的糖果.请问圣诞老 ...

  5. JavaScript（二）基本概念

    JS区分大小写 html/css 中 标签选择器不区分大小写 id class 选择器区分大小写 其中属性名 属性名 属性值  不区分大小写 行间事件  onclick  等  不区分大小写 而  执 ...

  6. Undefined symbols for architecture arm64(其cpu架构)

    "_OBJC_CLASS_$_XXX",referenced from: 之类的问题,很多人看到这些很头疼,不知道从何下手去修改.以下是我总结的相关修改办法.如下图 这是一个很明显 ...

  7. Chris Richardson微服务翻译：构建微服务之微服务架构的进程通讯

    Chris Richardson 微服务系列翻译全7篇链接: 微服务介绍 构建微服务之使用API网关 构建微服务之微服务架构的进程通讯(本文) 微服务架构中的服务发现 微服务之事件驱动的数据管理 微服 ...

  8. 浅谈Android的广告欢迎界面(倒计时)

    前些时候就是别人问我他的android APP怎么做一个广告的欢迎界面,就是过几秒后自动跳转到主界面的实现. 也就是下面这种类似的效果.要插什么广告的话你就换张图吧. 那么我就思考了下,就用了andr ...

  9. 【Zookeeper】Zookeeper安装配置

    本文演示使用三台Linux服务器安装Zookeeper,使用的是zookeeper-3.4.5版本,将zookeeper-3.4.5.tar.gz上传到linux服务器, 使用如下命令解压到/usr/ ...

  10. 【转】JavaWeb编码之get方式中文乱码问题

    一.现象描述 以get方式提交含中文表单,后台接收为乱码: <form action="admin/User/searchUser.do" method="get& ...