实现目标

  • 按'>'出现下一caption，按'<'出现上一caption
  • 按下面的点到指定的caption
  • 自动轮播

思路：

  • 设置一个carousel容器，里面有carousel的每一张图，这里称为caption，例子中有caption 1，caption 2，caption 3，设这些caption的position为absolute，设置好top，left。这三张图叠加在一起了，默认显示caption 3，然而我们需要一开始显示caption 1，所以设所有的caption display为none，并增添一个新class show，show 的内容就是display：block，然后给caption 1添上class show。
  • 按前进/后退按钮时，index（当前caption索引，起始为0）+1/-1，判断index是否超出范围，如果超出，按钮不做反应，index恢复正常值；如果没有超出，则将索引为index的图可见，其他不可见
  • 给每一个dot加上点击事件，点击时，将点的索引给index，然后判断index是否超出范围，如果超出，按钮不做反应，index恢复正常值；如果没有超出，则将索引为index的图可见，其他不可见
  • 使setInterval()函数实现轮播

代码：

 <!DOCTYPE html>

 <html>

 <head>

   <meta charset="utf-8">

   <meta name="viewport" content="width=device-width">

   <title>JS Bin</title>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

 </head>

 <body>

 <div class="carousel-container">

     <div id="carousel" class="carousel">

       <div class="carousel-piece show">

         <div class="text">caption 1</div>

       </div>

       <div class="carousel-piece">

         <div class="text">caption 2</div>

       </div>

       <div class="carousel-piece">

         <div class="text">caption 3</div>

       </div>

       <div class="arrow-container">

         <a href="#" class="pre">❮</a>

         <a href="#" class="next">❯</a>

       </div>

     </div>

     <div class="dot-container">

       <span class="dot active"></span>

       <span class="dot"></span>

       <span class="dot"></span>

     </div>

 </div>

 </body>

 </html>

HTML

 .carousel-container{

   text-align:center;

 }

 .carousel {

   width: 400px;

   height: 200px;

   background: orange;

   position: relative;

   overflow:hidden;

   margin:0 auto;

 }

 .carousel .carousel-piece {

   background: #ccc;

   width: 80%;

   height:100%;

   margin:0 auto;

   text-align:center;

   line-height:200px;

   position:absolute;

   left:10%;

   display:none;

 }

 .carousel .carousel-piece:nth-child(2){

   background:pink;

 }

 .carousel .carousel-piece:nth-child(3){

   background:lightblue;

 }

 .carousel .carousel-piece.show{

   display:block;

 }

 .carousel .carousel-piece .text{

   color:#fff;

   font-size:24px;

 }

 .carousel .arrow-container {

   position: absolute;

   width:400px;

   height:21px;

   top:42%;

 }

 .carousel .arrow-container a{

   text-decoration:none;

   width:30px;

   height:30px;

   line-height:30px;

   text-align:center;

   background:#fff;

   border-radius:50%;

 }

 .carousel .arrow-container .pre {

   position:absolute;

   left: 5px;

 }

 .carousel .arrow-container .next {

   position:absolute;

   right: 5px;

 }

 .dot-container{

   margin:10px 0;

 }

 .dot-container span{

   display:inline-block;

   width:10px;

   height:10px;

   background:#fff;

   border-radius:50%;

   border:3px solid orange;

   cursor:pointer;

 }

 .dot-container span.active{

   background:#ccc;

 }

CSS

 var index=0;

 var pieces=document.getElementsByClassName('carousel-piece');

 var dots=document.getElementsByClassName('dot');

 var preBtn=document.getElementsByClassName('pre')[0];

 var nextBtn=document.getElementsByClassName('next')[0];

 window.onload=function(){

   setInterval(animateSlide,3000);

 }

 preBtn.onclick=function(){

   getSlide(0,-1);

 }

 nextBtn.onclick=function(){

   getSlide(0,1);

 }

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

   dots[i].onclick=(function(i){

     return function(){

       getSlide(1,i);

     }

   })(i);

 }

 function getSlide(flag,step){

   if(flag===0){

     index=index+step;

   }

   else{

     index=step;

   }

   if(index>2){

     index=2;return;

   }

   if(index<0){

     index=0;return;

   }

   change();

 }

 function animateSlide(){

   index++;

   if(index>2){

     index=0;

   }

   change();

 }

 function change(){

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

     if(i===index){

       pieces[i].classList.add('show');

       dots[i].classList.add('active');

     }

     else{

       pieces[i].classList.remove('show');

       dots[i].classList.remove('active');

     }

   }

 }

Javascript

 var index=0;

 $(function(){

   $('.pre').click(function(){

     index=index-1;

     change(1);

   });

   $('.next').click(function(){

     index=index+1;

     change(1);

   });

   $('.dot').click(function(){

     index=$(this).index();

     change(1);

   });

   setInterval(animateSlide,5000);

 });

 function change(flag){

   if(index>2&&flag) {index=2;return;}

   if(index<0&&flag) {index=0;return;}

   $('.carousel-piece')

     .not(':eq(index)').removeClass('show')

     .eq(index).addClass('show');

   $('.dot')

     .not(':eq(index)').removeClass('active')

     .eq(index).addClass('active')

 }

 function animateSlide(){

   index=index+1;

   if(index>2) {index=0;}

   change(0);

 }

JQuery

 var index=0;

 var pieces=document.getElementsByClassName('carousel-piece');

 var dots=document.getElementsByClassName('dot');

 var preBtn=document.getElementsByClassName('pre')[0];

 var nextBtn=document.getElementsByClassName('next')[0];

 window.onload=function(){

   setInterval(animateSlide,5000);

 }

 preBtn.onclick=function(){

   index=index-1;

   getSlide();

 }

 nextBtn.onclick=function(){

   index=index+1;

   getSlide();

 }

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

   dots[i].onclick=(function(i){

     return function(){

       index=i;

       getSlide();

     }

   })(i);

 }

 function getSlide(){

   if(index>2) {index=2;return;}

   if(index<0) {index=0;return;}

   change();

 }

 function animateSlide(){

   index++;

   if(index>2){index=0;}

   change();

 }

 function change(){

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

     if(i===index){

       pieces[i].classList.add('show');

       dots[i].classList.add('active');

     }

     else{

       pieces[i].classList.remove('show');

       dots[i].classList.remove('active');

     }

   }

 }

Javascript Version2

轮播图-version1的更多相关文章

  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. Servlet实现国际化

    以下内容引用自http://wiki.jikexueyuan.com/project/servlet/internationalization.html: 三个重要术语: 国际化(i18n):这意味着 ...

  2. 纯css3实现按钮的 hover 和 active 时颜色的明暗变化效果

    效果:在任意HTML标签上增加样式类 f-color-control 就可以为此元素增加hover和avtive时颜色的变化; 代码如下: <!DOCTYPE html> <html ...

  3. Core Data 的简单使用

    认识cocoa Data在ios开发中的环境情况. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/f ...

  4. C#如何设置窗体不能修改大小

    找到FormBorderStyle设置为FixedDialog即可                      

  5. 使用HTML5监測站点性能

    在这个信息爆炸的互联网时代,越来越多的人缺少了等待的耐心.站点性能对于一个站点来说越来越重要.下面为监控到的站点打开时间对跳出率的影响: 当站点打开时间在0-1秒时,跳出率为12% 当站点打开时间在1 ...

  6. 对json的爱恨情仇

    本文回想了对json的爱恨情仇. C++有风险,使用需慎重. 本文相关代码在:http://download.csdn.net/detail/baihacker/7862785 当中的測试数据不在里面 ...

  7. 获取SQLServer连接字符串的方法

     第一步:创建向导文件 在桌面创建一个txt文件,并将文件后缀改成“.udl”.    第二步:选择“提供程序”tab页 双击新创建的“.udl”文件,进入后选择“提供程序”tab页,选择“Micro ...

  8. 修改版Putty，可保持密码

    修改版Putty,可保持密码: http://files.cnblogs.com/findumars/putty_v6.0.rar 转自: http://unmi.cc/putty-auto-logi ...

  9. java连接Oracle案例

    首先来讲一下桥连接: 首先配置数据源:打开控制面板——管理工具——数据源(ODBC)——用户DSN——添加——找到Oracle驱动程序. //JDBC-ODBC桥连接public class Conn ...

  10. hdu 4777 Queue

    题目大意: 一些人,每个人的身高都是不一样的 然后再给你一个k,表示这个人的左边或者右边,有k个人比他高 然后让你构造一个满足条件且字典序最小的序列 思路: 按照权值排序 这样每次加进去后只有后面的才 ...