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

这是我的页面所有代码：

 <!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. Linux(CentOS6.5)修改系统市区被中国标准时间(北京时间)

    本文地址http://comexchan.cnblogs.com/ ,作者Comex Chan,尊重知识产权,转载请注明出处,谢谢! 备份时区配置文件 cp /etc/localtime /etc/l ...

  2. Ajax异步提交登录(2)--登录使用

    http://cjp1989.iteye.com/blog/1740964 1.Ajax的原理: Ajax的原理就是:通过javascript的方式,将前台数据通过xmlhttp对象传递到后台,后台在 ...

  3. jQuery 实现无限任意添加下拉菜单

    新学jQuery还有很多没学,今天做了个下拉菜单,按照自己的思想结合学的基础效果实现一款可以任意添加层数的下拉菜单,如果有什么建议,欢迎指教啦啦啦 我喜欢备注细一些,这样给自己也是一种理解和方便回顾哈 ...

  4. sqlalchemy 踩过的坑

    记录下Sqlalchemy遇到的问题,不定时更新. 设置主键为非自增 sqlalchemy 在sql server中默认主键是自增的,如果在数据库设置的主键不是自增的,这个时候插入就会出现异常: 提示 ...

  5. java面向对象知识整理（一）

    1.面向对象思想 概述:面向对象是相对于面向过程而言的,面向过程强调的是功能,面向对象强调的是将功能封装进对像,强调具备功能的对象. 特点:(1)符合人们思考习惯的一种思想. (2)将复杂的事情简单化 ...

  6. Android 获取唯一标识替代方法

    private static String getTheOnlyID() { String onlyOne; //获取IMEI TelephonyManager TelephonyMgr = (Tel ...

  7. Redis锁构造

    单线程与隔离性 Redis是使用单线程的方式来执行事务的,事务以串行的方式运行,也就是说Redis中单个命令的执行和事务的执行都是线程安全的,不会相互影响,具有隔离性. 在多线程编程中,对于共享资源的 ...

  8. js 客户端打印html 并且去掉页眉、页脚

    print() 方法用于打印当前窗口的内容,支持部分或者整个网页打印. 调用 print() 方法所引发的行为就像用户单击浏览器的打印按钮.通常,这会产生一个对话框,让用户可以取消或定制打印请求. w ...

  9. hadoop+hive+spark搭建（一）

    1.准备三台虚拟机 2.hadoop+hive+spark+java软件包 传送门:Hadoop官网 Hive官网 Spark官网      一.修改主机名,hosts文件 主机名修改 hostnam ...

  10. 必须掌握的ES6新特性

    ES6(ECMAScript2015)的出现,让前端开发者收到一份惊喜,它简洁的新语法.强大的新特性,带给我们更便捷和顺畅的编码体验,赞! 以下是ES6排名前十的最佳特性列表(排名不分先后): 1.D ...