JavaScript基础 — 焦点图轮播(转载)

在rightBtnClick代码中,将nowImage == totalCount – 1 修改为 nowImage ==
totalCount – 2。2> 切换上一张

五、焦点图轮播特效之按钮切换

实现完了箭头的切换,接下来就要实现按钮的切换了,就是要分别给buttons数组里面的每个元素添加一个点击事件,跟箭头切换不同的是,按钮切换的偏移量需要计算,有可能跨几幅图片切换,还有,每张图片里面有个index属性,显示自己是第几张图片,如下:

for(var i = 0; i< buttons.length; i++) {
      buttons[i].onclick = function() {
           var myIndex = parseInt(this.getAttribute('index'));
           var offset = -600 * (myIndex - index);
           animate(offset);
           index = myIndex;//更新index值
           showButton();
    }
}
  • 这里面有一个点需要注意,span标签里面index属性是属于自定义属性,不能通过点表示法来取得,所以要使用getAttribute()方法来获取,即能取自定义属性,又能取自身有的属性;

此时还有一些需要优化的地方,当我位于当前图片的时候,再点击当前按钮,后台还会执行,但是我们的理想情况应该是,位于当前图片的时候,再点击当前按钮,就应该不做任何事情,加一个判断语句,优化后的代码如下:

for(var i = 0; i< buttons.length; i++) {
      buttons[i].onclick = function() {
           if(this.className == 'on') {
               return;
          }
           var myIndex = parseInt(this.getAttribute('index'));
           var offset = -600 * (myIndex - index);
           animate(offset);
           index = myIndex;//更新index值
           showButton();
    }
}

还有两个样式,其中carousel样式做样式容器,而slide样式和fade类似,用来定义轮播图片的时候是否有特效.

首先来实现最简单的通过左右按钮来实现切换:

由于显示的图片大小就是 560 X 300,
所以这里的父容器的大小也设置这么大,这里设置的margin,就是让父容器水平居中,垂直距离顶部100px,overflow表示如果显示的子元素超出了container的范围,就隐藏掉(注:由于显示的图片是一排显示的,如果不加上overflow:
hidden这个属性的话,就露馅了,去掉这个属性的话,效果如下:)。

四、焦点图轮播特效之无限滚动

在上一节,我们已经实现了箭头的切换,但是会有一个问题,当切换到最左边,或者最右边时,会出现空白页,因为当滚动到第五张图片的附属图时,此时的left值为0,当继续往左切换时,就会大于0,当滚动到第一张图片的附属图时,此时的left值为-4200,当继续往右切换时,就会小于-4200,所以会出现空白现象;我们要达到的效果是,当滚动到第一张图片的附属图时,此时将它的left值设置回-600,当滚动到第五张图片的附属图时,将left值设置回-3000,才能达到无限滚动的效果,具体代码如下:

function animate(offset) {
     var newLeft = parseInt(list.style.left) + offset;
     list.style.left = newLeft + 'px';
     if(newLeft > -600) {
          list.style.left = -3000 + 'px';
    }
    if(newLeft < -3000) {
          list.style.left = -600 + 'px';
    }
}

此时就可以实现无限滚动的效果了,这个时候,我们还需要加上小圆点的切换功能,这时候我们需要再引进一个变量index,来显示当前显示的是第几张图片,初始值为1;并且增加一个函数专门来亮起小圆点,如下:

function showButtons(){
       buttons[index-1].className = "on";
}

每点击一下左箭头,index的值就要减1,每点击一下右箭头,index的值就加1,如下:

prev.onclick = function(){
      index -= 1;
      showButtons();
      animate(-600);
}
next.onclick = function(){
     index += 1;
     showButtons();
     animate(600);
}

但是这个时候会发现,以前的按钮没有关闭,而是全都亮了起来,此时就要改进一下showButtons()函数,在亮起当前按钮的同时,将之前的按钮至灰色,代码如下:

function showButtons(){
       for(var i = 0; i < buttons.length; i++) {
             if(buttons[i].className == "on") {
                  buttons[i].className  = "";
                  break;
             }
      }
       buttons[index-1].className = "on";
}

还需要对index的值进行限制,不能让它无限的减下去,或者加上去,修改后的代码如下:

prev.onclick = function(){
      if(index == 5) {
          index = 1;
      } else {
        index -= 1;
    }
       showButtons();
       animate(-600);
}
next.onclick = function(){
     if(index == 1) {
        index = 5;
     } else {
        index += 1;
    }
    showButtons();
    animate(600); 
}

源码

*{ 
    margin: 0;
    padding: 0; 

}
a{
    text-decoration: none;
}
body { 
    padding: 20px;
}
#container { 
    width: 600px;     /*这里600x400是图片的宽高*/
    height: 400px; 
    border: 3px solid #333; 
    overflow: hidden;   /*隐藏溢出的图片,因为图片左浮动,总宽度为4200*/
    position: relative;
}
#list { 
    width: 4200px;   /*这里设置7张图片总宽度*/
    height: 400px; 
    position: absolute;  /*基于父容器container进行定位*/
    z-index: 1;
}
#list img { 
    float: left;
}
#buttons { 
    position: absolute; 
    height: 10px; 
    width: 100px; 
    z-index: 2;   /*按钮在图片的上面*/
    bottom: 20px; 
    left: 250px;
}
#buttons span { 
    cursor: pointer; 
    float: left; 
    border: 1px solid #fff; 
    width: 10px; 
    height: 10px; 
    border-radius: 50%; 
    background: #333; 
    margin-right: 5px;
}
#buttons .on {  
    background: orangered;   /*选中的按钮样式*/
}
.arrow { 
    cursor: pointer; 
    display: none;    /*左右切换按钮默认先隐藏*/
    line-height: 39px; 
    text-align: center; 
    font-size: 36px; 
    font-weight: bold; 
    width: 40px; 
    height: 40px;  
    position: absolute; 
    z-index: 2; 
    top: 180px; 
    background-color: RGBA(0,0,0,.3); 
    color: #fff;
}
.arrow:hover { 
    background-color: RGBA(0,0,0,.7);
}
#container:hover .arrow { 
    display: block;   /*当鼠标放上去容器上面就显示左右切换按钮*/
}
#prev { 
    left: 20px;
}
#next { 
    right: 20px;
}

如果有的话,则将标志变量nowImage指向下一个图片,并且执行changeImage函数中的代码:1.
将content中的所有图片左移一个图片大小的宽度;2.将指示器的图片也移动到对应的位置。

六、焦点轮播图之动画函数

在进行图片的切换过程中,图片是缓慢的移动切换的,而不是一张图片一张图片的切换过去,这不是我们想要的效果,这里就涉及到了javascript中的动画效果和函数;
它的原理是在切换的过程中,不断地进行一小段的位移,直到达到目标值,清楚了原理,接下来就来写代码:
我们增加了位移总时间的变量、位移间隔还有计算出每次的位移量,并且定义了一个位移函数go(),当每次的位移量小于0并且left大于新的left目标值时,还有一种情况是,每次的位移量大于0并且left小于新的left目标值时,left值就等于left加上每次的位移量,然后调用setTimeout函数不断地递归调用,直到达到目标值;

 function animate(offset){
            animated = true;
            var newLeft = parseInt(list.style.left) + offset;
            var time = 300;//位移总时间
            var interval = 10; //位移间隔
            var speed = offset/(time/interval);//每次位移量
            function go(){
                if ((speed < 0 && parseInt(list.style.left) > newLeft) || (speemd >0 && parseInt(list.style.left) < newLeft)) {
                    list.style.left = parseInt(list.style.left) + speed + 'px';
                    setTimeout(go,interval);
                }
                else{
                   animated = false;
                   list.style.left = newLeft + 'px';
                   if(newLeft > -600){
                      list.style.left = -3000 + 'px';
                   }
                   if(newLeft < -3000){
                      list.style.left = -600 + 'px';
                   }
               }
            }
            go();
           }
  • 这里要注意的是,setTimeout()方法接受两个参数,一个执行的函数代码,一个间隔,函数会在这个间隔后执行一次,不会重复执行,但是因为调用的是自身,所以相当于递归不断地重复执行;

nav-tabs

这样就能简单的实现了切换效果,但是当切换到最后一张再向右切换时就会出现上面所讲的空白的现象,所以呢,就需要通过判断list的left值如果
大于-600(-600是默认设置的,为了显示第一张图片[1.jpg])就将其设置为-3000,如果小于-3000,就将其设置为-600,这样就能
实现无线滚动了,但是又会发现当图片切换滚动的时候,小按钮并没有跟着改变,这时我们就需要通过一个index值(默认为1)来索引当前是哪个小按钮被选
中,并为其添加.on的类,在添加之前需要将原先有.on的小按钮的class移除掉,最后一点是由于小按钮只有五个,想要实现无限切换,就需要判断边界
值,当index为1时,如果还想往左切换的话,就将其设置为5,这样就会回到第五个小按钮上,其他同理。

$.mouseenter{ clearInterval.mouseleave{ timer = setInterval; }); 
三、焦点图轮播特效之箭头切换

接下来就进入JS部分的编写,首先必须是页面加载完毕才能执行相关的JS代码,所以必须写在window.onload
= function(){}中,接下来先取得相关的容器和标签,如下:

window.onload = function(){
var container = document.getElementById("container");
var list = document.getElementById("list");
var buttons = document.getElementById("buttons").getElementsByTagName("span");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
}

然后要做到点击箭头就能切换,就必须给箭头元素绑定一个点击事件,通过点击箭头,来改变list里面style属性中的left值,从而实现图片的切换

prev.onclick = function(){
      list.style.left = parseInt(list.style.left) - 600 + 'px';
}
next.onclick = function(){
     list.style.left = parseInt(list.style.left) + 600 + 'px';
}

因为两个点击事件里面的语句十分相似,所以就将它们封装在一个名为animate()的函数中,只需要传进一个偏移量就可以了,如下

 function animate(offset) {
     list.style.left = parseInt(list.style.left) + offset + 'px';
}

prev.onclick = function(){
      animate(-600);
}
next.onclick = function(){
     animate(600);
}

禁用状态在这里不再赘述。

参考视频:

5>
鼠标悬停在图片上,停止滚动;鼠标离开图片后,继续滚动也就是对定时器进行开启和关闭;添加如下代码:

七、焦点图轮播特效之自动播放

我们会注意到,当我们把鼠标移出图片列表时,图片会自动切换,当把鼠标移进去时,就会停止自动切换,这里,我们就需要引入两个函数:play()还有stop()函数,并且为container父容器添加两个事件:onmouseover还有onmouseout,具体的代码如下:

       function play(){
            timer = setInterval(function(){
                    next.onclick();
                },1500);
           }
      function stop(){
      clearInterval(timer);
      }
      container.onmouseover = stop;
      container.onmouseout = play;
      play();

还重新定义了一个时间变量timer,并且执行setInterval方法,经过间隔时间不断地执行函数代码,然后停止函数里面,就清楚调这个时间变量timer;

<!—合并设置offset — >

window.onload = function () {
    var container = document.getElementById('container');
    var list = document.getElementById('list');
    var buttons = document.getElementById('buttons').getElementsByTagName('span');
    var prev = document.getElementById('prev');
    var next = document.getElementById('next');
    var index = 1;    //用于索引当前按钮
    var len = 5;      //图片的数量
    var animated = false;   //用于判断切换是否进行
    var interval = 3000;    //自动播放定时器秒数,这里是3秒
    var timer;             //定时器


    function animate (offset) {
        animated = true;     //切换进行中
        var time = 300;     //位移总时间
        var inteval = 10;   //位移间隔时间
        var speed = offset/(time/inteval);   //每次位移量
        var left = parseInt(list.style.left) + offset; //目标值

        var go = function (){
            //这两种情况表示还在切换中
         if ( (speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) {
                list.style.left = parseInt(list.style.left) + speed + 'px';
                setTimeout(go, inteval); //继续执行切换go()函数
            }
            else {
                list.style.left = left + 'px';
                if(left>-600){
                    list.style.left = -600 * len + 'px';
                }
                if(left<(-600 * len)) {
                    list.style.left = '-600px';
                }
                animated = false; //切换完成
            }
        }
        go();
    }
    //用于为按钮添加样式
    function showButton() {
        //先找出原来有.on类的按钮,并移除其类
        for (var i = 0; i < buttons.length ; i++) {
            if( buttons[i].className == 'on'){
                buttons[i].className = '';
                break;
            }
        }
        //为当前按钮添加类
        buttons[index - 1].className = 'on';
    }
     //自动播放
    function play() {
        timer = setTimeout(function () {
            next.onclick();
            play();
        }, interval);
    }
     //清除定时器
    function stop() {
        clearTimeout(timer);
    }
    //右点击
    next.onclick = function () {
        if (animated) {    //如果切换还在进行,则直接结束,直到切换完成
            return;
        }
        if (index == 5) {
            index = 1; 
        }
        else {
            index += 1;
        }
        animate(-600);
        showButton();
    }
    //左点击
    prev.onclick = function () {
        if (animated) {       //如果切换还在进行,则直接结束,直到切换完成
            return;
        }
        if (index == 1) {
            index = 5;
        }
        else {
            index -= 1;
        }
        animate(600);
        showButton();
    }

    for (var i = 0; i < buttons.length; i++) {
        buttons[i].onclick = function () {
            if (animated) {         //如果切换还在进行,则直接结束,直到切换完成
                return;
            }
            if(this.className == 'on') {     //如果点击的按钮是当前的按钮,不切换,结束
                return;
            }
            //获取按钮的自定义属性index,用于得到索引值
            var myIndex = parseInt(this.getAttribute('index'));
            var offset = -600 * (myIndex - index);   //计算总的位移量

            animate(offset);
            index = myIndex;   //将新的索引值赋值index
            showButton();
        }
    }

    container.onmouseover = stop;//父容器的移入移出事件
    container.onmouseout = play;

    play();  //调用自动播放函数

}

4>
添加定时执行动画的功能也就是定时的调用点击右边按钮的代码;添加如下代码:

二、焦点图轮播特效之样式布局

具体的CSS代码如下:

<style>
      *{
        margin:0;
        padding:0;
        text-decoration:none;
      }
      body{
        padding:20px;
      }
      #container{
        width:600px;
        height:400px;
        border:3px solid #333;
        overflow:hidden;
        position:relative;
      }
      #list{
        width:4200px;
        height:400px;
        position:absolute;
        z-index:1;
      }
      #list img{
        float:left;
      }
      #buttons{
        position:absolute;
        height:10px;
        width:100px;
        bottom:20px;
        left:250px;
        z-index:2;
      }
      #buttons span{
        cursor:pointer;
        float:left;
        border:1px solid #fff;
        width:10px;
        height:10px;
        border-radius:50%;
        background:#333;
        margin-right:5px;
      }
      #buttons .on{
        background:orangered;
      }
      .arrow{
        cursor:pointer;
        display:none;
        line-height:39px;
        text-align:center;
        font-size:36px;
        font-weight:bold;
        width:40px;
        height:40px;
        position:absolute;
        z-index:2;
        top:180px;
        background-color:RGBA(0,0,0,.3);
        color:#fff;
      }
      .arrow:hover{
        background-color:RGBA(0,0,0,.7);
      }
      #container:hover .arrow{
        display:block;
      }
      #prev{
        left:20px;
      }
      #next{
        right:20px;
      }
    </style>
  • 其中将父容器里面的overflow属性设置为:hidden,并且将position设置为:relative,因为子元素list和buttons都是相对于父容器来定位的;
  • 其中里面涉及到了z-index属性:设置元素的堆叠顺序。元素可拥有负的z-index属性值,z-index仅仅能在定位元素上奏效,拥有更高层叠顺序的元素总是位于更低元素的前面;

 

window.onload = function () {
    var container = document.getElementById('container');
    var list = document.getElementById('list');
    var buttons = document.getElementById('buttons').getElementsByTagName('span');
    var prev = document.getElementById('prev');
    var next = document.getElementById('next');
    var index = 1;    //用于索引当前按钮

    function animate (offset) {  


         var newLeft =  parseInt(list.style.left) + offset;      

         list.style.left = newLeft+ 'px';

         if(newLeft < -3000){

            list.style.left = –600 + 'px';

         }  

          if(newLeft > -600){

            list.style.left = –3000 + 'px';

         } 

    }
    //用于为按钮添加样式
    function showButton() {
        //先找出原来有.on类的按钮,并移除其类
        for (var i = 0; i < buttons.length ; i++) {
            if( buttons[i].className == 'on'){
                buttons[i].className = '';
                break;
            }
        }
        //为当前按钮添加类
        buttons[index - 1].className = 'on';
    }

    next.onclick = function () {

        if (index == 5) {
            index = 1;
        }
        else {
            index += 1;
        }
        animate(-600);
        showButton();
    }
    prev.onclick = function () {

        if (index == 1) {
            index = 5;
        }
        else {
            index -= 1;
        }
        animate(600);
        showButton();
    }
   //通过循环为按钮添加点击事件
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].onclick = function () {
           //当继续点击当前按钮的时候,不进行切换
            if(this.className == 'on') {
                return;
            }
            //通过获取按钮标签的自定义属性index,得到索引值,再而计算差值
            var myIndex = parseInt(this.getAttribute('index'));
            //真正的便宜量
            var offset = -600 * (myIndex - index);     
            animate(offset);
            //将点击按钮的index属性值设置为当前的index值
            index = myIndex;
            showButton();
        }
    }
}

也就是说,如果不加上overflow: hidden
这个属性的话,所有的图片就会一排全部显示出来了。

一、焦点图轮播特效之原理

这个焦点图轮播特效将运用到了平时学习中的知识,例如,DOM操作、定时器、事件处理、JS动画、函数递归还有无线滚动等等。
其实焦点图轮播特效的原理十分简单,就是通过控制存放图片的列表里面的left值来显示图片。
HTML结构大致分为以下部分:

<div id="container">
       <div id="list" style="left:-600px;">
         ![](img5.jpg)
         ![](img1.jpg)
         ![](img2.jpg)
         ![](img3.jpg)
         ![](img4.jpg)
         ![](img5.jpg)
         ![](img1.jpg)
       </div>
       <div id="buttons">





       </div>
       <a href="javascript:;" id="prev" class="arrow"><</a><!--javascript:是一个伪协议,是表示在触发<a>默认动作时,执行一段javascript代码,而javascript:;表示什么都不执行,这样点击<a>标签没有任何反应-->
       <a href="javascript:;" id="next" class="arrow">></a>
    </div>
  • 一个父容器container,父容器里面有一个图片列表list还有一个按钮buttons,再加上两个代表左右箭头的a标签;
  • javascript:
    是一个伪协议,是是表示在触发a标签默认动作时,执行一段javascript代码,而javascript:;表示什么都不执行,这样点击a标签没有任何反应;
  • 为了实现无限滚动,在第一张图片之前加入第五张图片的附属图,在第五张图片之后加入第一张图片的附属图,实得在滚动的过程中,不会出现延迟现象;

图片 1图片 2

<div id="container">
    <div id="list" style="left: -600px;">
        <img src="img/5.jpg" alt="1"/>
        <img src="img/1.jpg" alt="1"/>
        <img src="img/2.jpg" alt="2"/>
        <img src="img/3.jpg" alt="3"/>
        <img src="img/4.jpg" alt="4"/>
        <img src="img/5.jpg" alt="5"/>
        <img src="img/1.jpg" alt="5"/>
    </div>
    <div id="buttons">





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

至此,一个传统轮播的效果就实现了,希望大家可以学以致用。

通过学习,我理解了图片轮播原理,学习了setTimeout()、setInterval()函数设置定时器与清除定时器clearInterval()函数,使用函数递归实现图片滑动切换,采用辅助图片实现图片无限滚动等编程技巧。

 

首先将HTML结构搭建好:

  1. 提供很多尺寸相等的图片,一排紧挨着显示。

  2. 左右有两个切换按钮,用来控制显示上一张还是下一张。

  <div data-ride="carousel" class="carousel slide" id="carousel-container"> 
   <!-- 图片容器 --> 
   <div class="carousel-inner"> 
    <div class="item">
     <img alt="第一张图" src="A" />
    </div> 
    <div class="item active">
     <img alt="第二张图" src="B" /> 
    </div> 
    <div class="item">
     <img alt="第三张图" src="C" /> 
    </div> 
   </div> 
   <!-- 圆圈指示符 --> 
   <ol class="carousel-indicators"> 
    <li data-slide-to="0" data-target="#carousel-container"></li> 
    <li data-slide-to="1" data-target="#carousel-container"></li> 
    <li data-slide-to="2" data-target="#carousel-container" class="active"></li> 
   </ol> 
   <!-- 左右控制按钮 --> 
   <a data-slide="prev" href="#carousel-container" class="left carouselcontrol">  </a> 
   <a data-slide="next" href="#carousel-container" class="right carouselcontrol">  </a> 
  </div>
window.onload = function () {
            var container = document.getElementById('container');
            var list = document.getElementById('list');
            var buttons = document.getElementById('buttons').getElementsByTagName('span');
            var prev = document.getElementById('prev');
            var next = document.getElementById('next');

           //切换动画
           function animate (offset) {
                list.style.left = parseInt(list.style.left) + offset+ 'px';
           }

           next.onclick = function () {
                animate(-600);
            }

            prev.onclick = function () {
                animate(600);
            }
}
var timer = setInterval; 

 

window.onload = function () {
    var container = document.getElementById('container');
    var list = document.getElementById('list');
    var buttons = document.getElementById('buttons').getElementsByTagName('span');
    var prev = document.getElementById('prev');
    var next = document.getElementById('next');
    var index = 1;    //用于索引当前按钮

    function animate (offset) {
         var newLeft =  parseInt(list.style.left) + offset;      

         list.style.left = newLeft+ 'px';

         if(newLeft < -3000){

            list.style.left = –600 + 'px';

         }  

          if(newLeft > -600){

            list.style.left = –3000 + 'px';

         } 


    }
    //用于为按钮添加样式
    function showButton() {
        //先找出原来有.on类的按钮,并移除其类
        for (var i = 0; i < buttons.length ; i++) {
            if( buttons[i].className == 'on'){
                buttons[i].className = '';
                break;
            }
        }
        //为当前按钮添加类,索引下标从0开始,故需减1
        buttons[index - 1].className = 'on';
    }

    next.onclick = function () {

        if (index == 5) {
            index = 1;
        }
        else {
            index += 1;
        }
        animate(-600);
        showButton();
    }
    prev.onclick = function () {

        if (index == 1) {
            index = 5;
        }
        else {
            index -= 1;
        }
        animate(600);
        showButton();
    }
}
#container #indicator { position: absolute; right: 50px; list-style: none; bottom: 12px; } #container #indicator li { float: left; cursor: pointer; margin-left: 20px; width:14px; height: 14px; background: url no-repeat -23px -127px; } #container #indicator li.current { background-position: -9px -125px; } 

js会控制在弹出modal之前,会加一个.modal-backdrop 用来设为灰色背景。

接下来需要通过点击小按钮来实现切换效果,不像左右切换,按钮是可以随意点击进行切换的,比如从第一个按钮直接点击第五个按钮,这样的话,就不是每
次都是-600的间隔了,我们因此还需要获取当前点击的按钮和之前的按钮的index值的差值,然后乘以-600得到的才是真正的偏移量,并且同时点击的
时候,为该按钮添加选中样式类。但是如何知道当前点击的是哪个按钮呢,还记得我们在按钮的span标签里设置了自定义属性index吗,其值分别对应每个
按钮的索引值,这样当点击按钮时通过获取该按钮的index属性值即可知道是哪个按钮,最后一点就是当继续点击当前按钮时,比如此时轮播到第一张图片,你
再点击对应的第一个按钮,应该阻止再次切换,做到优化。

1> id为container的div,是整个轮播效果的容器。2>
id为content的ul,里面存放的内容就是界面上面显示的滚动的图片。

alert

好了,最重要的还是JS实现轮播效果:

*{margin: 0; padding: 0;} 

 

图片 3

如果没有的话,并且图片现在是显示到了最后一个,则先执行动画,执行完毕后,立刻将content中所有的图片内容拉回到第一个,但是这里任然会穿帮,因为当前图片显示为最后一个后,你继续执行动画,是没有任何效果的,所以在这个动画执行期间是没有任何反应的,当动画时间执行完毕后,会突然在界面上出现第一个图片。

图片 4图片 5

 

二、代码剖析

 

最外层div就是容器啦,然后其子元素分别就是存放图片的id为list的div,存放小圆圈按钮的id为buttons的div,最后两个a标签
就是左右切换的按钮。还有一个问题需要注意,此焦点图轮播器其实只有五张图,但是在id为list的div里却放了七张图,这是为啥呢?其原理是
第一张图片(5.jpg)和最后一张图片(1.jpg)的作用是为了实现无限滚动的效果,因为此效果是通过设置id为list的div容器的left值来
实现图片切换的,所以当轮播到第五张图片(5.jpg)的时候,再进行向右切换的时候,这时最后一张图片被切换进来,此时left值已经为
-3600px,并且同时我们又将其left值改为-600px,这样就回到了真正的第一张图。由于最后一张图片就是第一张图片(1.jpg),所以用户
肉眼看上去没有什么变化,就这样实现了无限滚动的效果,其他同理!那么如果没有那两张图片作为过渡的话,效果就会是这样,当轮播到最后一张的时候会闪一下
就没有了:

2> 设置父容器的样式。

鼠标移动到特定的元素上时,显示相关的提示语。类似于abbr的title功能,不过效果更加漂亮实用。

样式不难,主要就是根据实际情况修改一下图片尺寸就行了。因为图片组都左浮动,所以宽度远远大于父容器的宽度,如果没有设置overflow:
hidden; 效果就是这样子:

这张图片中,不仅包含了左右切换按钮,指示器的按钮也一并给出了,所以在书写指示器按钮的css代码时候,同样也可以使用这张图片。

 

设置CSS样式

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

body上用data-spy

图片 6

$("#container #indicator li").click{ nowImage = $; changeImage; 

 

接着实现平滑切换的效果,之前已经实现的效果是直接切换,而我们想要的是能够平滑过渡,体验会好一些。主要实现方法是通过定时器
setTimeout。设置切换需要的总时间,每次间隔多少时间,然后求出每次切换过渡的位移量,判断是否到达目标值,若否,则继续执行定时器进行位移。
还有一点就是,如果连续点击切换按钮,图片会立刻不停地切换,
但我们想要的效果是等当前图片切换完成之后再进行下一次切换,这个可以优化一下。最后实现自动播放效果,当鼠标不点击时,它能自动播放,这里用到
setInterval定时器,每次3秒执行一次点击事件,而当鼠标移上去的时候清除该事件,离开的时候又自动播放。OK,整理一下代码:

3> 设置content的样式

 

$("#container #btn #leftBtn").click{ if(!$("#container #content").is{ if{ nowImage = totalCount - 2; $("#container #content").css("left",-560 * ; $("#container #indicator li").eq.addClass.removeClass; $("#container #content").animate({"left": -560 * nowImage}, 1000); } else { nowImage--; changeImage; 

图片 7图片 8

代码中 #indicator li 设置的background的图片就是上图中空心的小圆圈,而
#indicator li.current
设置的background的图片就是上图中实心的大圆圈。所以刚开始的时候,默认选中第一个。3.
用JQuery添加交互效果

折叠

一、需求分析

data-spy

#container #content { list-style: none; width: 10000px; position: absolute; left:0; top:0; } #container #content li { float:left; } #container #content li img { border: 0; } 

 

changeImage 函数

默认带过渡效果的

function changeImage(){ if(!$("#container #content").is{  $("#container #content").animate({"left": -560 * nowImage}, 1000); $("#container #indicator li").eq.addClass.removeClass; } } 

 

从这一章节开始,我将会为大家陆续的介绍利用Jquery完成特效动画。先来看看这一节所介绍的特效:传统轮播。

实现原理:

4> id为indicator的ul,用来显示指示器。

源文件:carousel.js

5.
当鼠标放到图片上面的时候,会停止自动滚动;当鼠标离开后,再经过固定间隔时间后,又会自动播放。

源文件:tooltip.js

所以此刻修改一点代码,在代码的开头追加第一张图片

  • 提示信息、警告信息、大文本等;
  • 确认提示(多按钮);
  • 显示表单元素(一般使用ajax操作等功能);
  • 其他需要特殊显示的信息(如单击缩略图时放大图片)。
  1. 写代码慢慢调节;2. 用精灵裁切定位软件,如:CSS
    Sprites等)。图片设计大致如下:
  • 设置滚动容器,即在所要侦测的元素上设置data-target=”#selector”
    data-spy=”scroll”属性。
  • 设置菜单链接容器,该容器的id(或样式)和data-target
    属性所对应的选择符应一致。
  • 在菜单容器内,必须有.nav样式的元素,并且在其内部有
    li元素,li内包含的a元素才是可以侦测高亮的菜单链接,即符 合.nav
    li > a这种选择符的条件。
#container #leftBtn { position: absolute; width:45px; height: 45px; top:108px; left: 20px; background: url no-repeat 0 0; cursor: pointer; } #container #rightBtn { position: absolute; width:45px; height: 45px; top:108px; right: 20px; background: url no-repeat 0 -45px; cursor: pointer; } 

 

3>
点击指示器按钮进行图片切换它的设计思路,就是获取图片的索引,然后调用changeImage函数就可以了。

带有data-ride=”carousel”的div就是轮播插件的容器,容器id为carousel-container,稍后会用到。

1. 用html代码搭建框架

图片 9图片 10

代码与点击右边按钮类似

    <!--  默认显示折叠区域-->
    <a class="btn btn-danger" data-toggle="collapse" data-target="#demo">触发改变</a>
    <div id="demo" class="collapse in">折叠区域...</div>

   <!--  默认隐藏折叠区域-->
    <button class="btn btn-danger collapsed" data-toggle="collapse" data-target="#demo">按钮</button>
    <div id="demo" class="collapse ">折叠区域...</div>

2. CSS代码改变显示样式

 

3.
右下方有指示器”小圈圈”,用来提示显示到第几个图片;也可以点击它,进行图片的切换。

源文件:popover.js

1> 下面两句代码,清除掉浏览器默认的间隙。

提示框

最后一个就是定位属性 position: relative;
由于container是父容器,所以应该设置为relative,而它的所有的子元素要进行绝对定位的话,他们的position应该设置为absolute。这就是所谓的
“子绝父相” 原则。在绝对定位中都这么使用。

由于各种加班,身心疲惫…

注意到,content的width属性设置为了10000px,这是为了保证它能够存放足够多的图片。默认情况下,content中所有的li是块级元素,也就是他们会上下排列;所以加了一句float:left;让他们左右排列。而父级元素container设置了overflow:
hidden, 所以这些左右排列的图片只能看到第一个。4>
设置左右切换按钮的样式

弹窗组件使用了3层
div容器元素,其分别应用了modal、modal-dialog、modalcontent样式。然后在真正的内容容器modal-content内包括了弹窗
的头(header)、内容(body)、尾(footer)3个部分,分别应用了3个样式:modal-header、modal-body、modal-footer。

注意到,在获取左右按钮的时候,他们是取自同一张图片icons.png。只是图片截取的位置不一致,这就是所谓的”精灵”。就是为了减小图片占用大小,而把很多的小icon放置在一张图片上面,然后通过定位截取的办法,获取想要的部分。(注:关于怎样定位icon?

 

设计思想:为了解决这个问题,解决方案就是在这些图片之后追加一个与第一张相同的图片;这就是传统轮播的主要设计思想。所以当图片滚动到倒数第二章的时候;首先执行滚动动画,也就是滚动到预先准备的与第一张一模一样的图片,看起来似乎是滚动到了第一张,其实不然。在动画执行完毕后,立刻将content中所有的图片拉回到第一张。流程图如下:

 

  1. 每隔一个固定的时间,图片会自动滚动。

注意:

4> 设置指示器的样式

data-offset-top表示一个完整的新网页,从顶部向下拖动滚动条(也就是网页向上滚动)这个像素以后,

代码中,当DOM元素加载完毕,就执行了$(‘#container #btn
#rightBtn’).click,
也就是立刻执行了切换图片操作。在rightBtnClick函数中,先进行了content是否正在进行动画的判断,这样做的目的:防止动画在执行的过程,用户又进行强制的执行其他动画,会产生干扰,最终导致动画效果混乱。

js源码

3> id为btn的div,里面的两个子元素就是用来切换上一张还是下一张的按钮。

使用的动画过渡效果全部使用了
CSS3的语法,所以IE6、IE7、IE8是不能用动画过渡效果。

${ // 总的图片个数 var totalCount = $("#container #content li").length; // 当前处于第几个图片 var nowImage = 0; $("#container #btn #rightBtn").click;  function rightBtnClick(){ if(!$("#container #content").is{ if(nowImage == totalCount - 1){  nowImage = 0;  $("#container #indicator li").eq.addClass.removeClass;  $("#container #content").animate({"left": -560 * }, 1000, function(){ $("#container #content").css; } else { nowImage++; changeImage; 

按钮

/*克隆轮播的第一个li追加到最后*/ $("#container #content li").first.appendTo($("#container #content")); 

 

#container { width:560px; height: 300px; margin: 100px auto; position: relative; overflow: hidden; } 

tooltip

图片 11图片 12

Affix的效果就像其官方网站左边的导航链接一样。

源文件:alert.js

 

 

使用

使用

图片 13图片 14

源文件:button.js

<a data-toggle="tooltip" class="btn btn-default" title="aaaa" data-placement="bottom">bbbb</a>

    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
    </script>

 

就是在警告框组件的基础上,提供了 单击x号关闭警告框的功能

(弹出框插件的用法和提示框组件几乎一模一样),唯一不一样的就是插件名称以及多余的content字段。而关于自动初始化,也和提示框插件一样,需要手动初始化

模态弹窗(也叫popup,Bootstrap里称为Modal)是绝大部分交互式网站都需要的一种功能,一般有以下几种用法:

CSS源码

弹出框

图片 15图片 16

就像我们平时使用的Windows操作系统里的选项卡设置一样,单击一个选项,下面就显示对应的选项卡面板

  • 选项卡导航和选项卡面板要同时有(但不一定要放在一 起)。
  • 导航链接里要设置data-toggle=”tab”,并且还要设置data-target=”选择符”(或href=”选择符”),以便单击的时候能找到该选择符所对应的tab-pane面板。
  • tab-pane要放在tab-content里面,要有id(或者CSS样式)
    并与data-target=”选择符”(或href=”选择符”)一致

滚动侦测(ScrollSpy)插件是根据滚动的位置自动更新导航 条中相应的导航项

子菜单虽然会高亮,但不会打开,为了展示效果,需要手
动打开下拉菜单查看。
该插件所需要的导航条只能在拥有.nav样式的ul/li元素上起 作用

 

  • 菜单样式和菜单项保持一致(即按照第4节的要求编写)。
  • 被单击的链接或者按钮上需要应用data-toggle=”dropdown”样式,以便在初始化的时候JavaScript可以监控单击事件

 

源文件:scrollspy.js

选项卡

通过以上代码判断是否支持动画过渡效果。

dropdown

    <a data-toggle="popover" class="btn btn-default" title="aaaa" data-content="ccccc" data-placement="bottom">bbbb</a>

modal

模态弹窗

    <div class="alert alert-danger">
        <h3>警告标题</h3>
        <hr />
        <p>警告内容警告内容</p>
        <p>
            <button class="btn btn-default" data-dismiss="alert">关闭</button>
        </p>
    </div>

 

使用

<body data-target="#selector" data-spy="scroll">
    <div id="selector">
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#fat">@fat</a></li>
                <li><a href="#mdo">@mdo</a></li>
                <li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class=""><a href="#one">one</a></li>
                        <li class=""><a href="#two">two</a></li>
                        <li class="divider"></li>
                        <li class=""><a href="#three">three</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
    <div style="overflow: auto">
        <h4 id="fat">@fat</h4>
        <p>具体内容</p>
        <h4 id="mdo">@mdo</h4><p>具体内容</p>
        <h4 id="one">one</h4><p>具体内容</p>
        <h4 id="two">two</h4><p>具体内容</p>
        <h4 id="three">three</h4><p>具体内容</p>
    </div>
    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/bootstrap.js"></script>
</body>

 

        <a href="#" class="btn btn-default" data-toggle="dropdown" data-target="#d">启动下拉框</a>
        <div class="dropdown" id="d">
            <a href="#" class="btn btn-default" data-toggle="dropdown">启动下拉框</a>
            <ul class="dropdown-menu">
                <li><a>菜单1</a></li>
                <li><a>菜单2</a></li>
            </ul>
        </div>

图片 17图片 18

<div class="item active"> 
   <img src="..." alt="..." /> 
   <div class="carousel-caption"> 
    <h3>标题</h3> 
    <p>描述...</p> 
   </div> 
 </div>

轮播

源文件:modal.js

 

源文件:dropdown.js

在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition)、模态弹窗(Modal)、下拉菜单(Dropdown)、滚动侦测(Scrollspy)、选项卡(Tab)、提示
框(Tooltip)、弹出框(Popover)、警告框(Alert)、按钮(Button)、折叠(Collapse)、旋转轮播(Carousel)、定位浮标(Affix)。

 

使用

 

  • 指定的data-toggle=”tooltip”属性
  • 然后再定义要显示的内容,可以在title也可以用data-original-title
  • js初始化.$(‘[data-toggle=”tooltip”]’).tooltip();

源文件:tab.js

  1. carousel-inner样式div内部包含多个含有item的div样式,在
    这些内部的div里,定义我们要显示的幻灯图片。
  2. carousel-indicators样式ol内部定义了一组标示符,用户单
    击这些标示符可以直接显示相应的图片,data-slide-to是索引,从0开始.
  3. 另外两个a链接是一组,用于显示左右箭头,可以改变轮播的方向。这两个元素上定义的data-slide属性值只能是
    prev或者next

 

<div data-spy=”affix” data-offset=”60″ >导航内容</div>

 

 

定位浮标

使用:

正在加载和加载完成控制与显示

使用data-target

默认情况下,如果不设置data-target属性,则会关闭x号按钮元素所在的父元素容器,即外部的div元素。只需要保证设置了data-dismiss=”alert”即可.

popover

 

使用:

图片 19图片 20

使用

一般下拉菜单都是在导航条(navbar)和选项卡(tab)上实现。

源文件:transition.js

 

当单击一个触发元素时,在另外一个可折叠区域进行显示(或隐藏),再次单击时可以反转显示状态。(经典的手风琴风格)

 

按钮插件提供了一组可以控制按钮多种状态的功能,比如,一个按钮有禁用状态、正在加载状态、正常状态等

  • 指定的data-toggle=”popover”属性
  • 然后再定义要显示的标题,可以在title也可以用data-original-title
  • 定义内容,可以在content也可以data-content
  • js初始化.$(‘[data-toggle=popover]’).popover();

 

图片 21图片 22

旋转轮播(Carousel)这个插件有很多种译法,有人叫轮播,有人叫传送带

源文件:affix.js

滚动侦测

<div data-spy=”affix” data-offset-top=”60″ data-offset-bottom=”100″
>导航内容 </div>

 

弹出框其实就是一种特殊的提示框,相比来说只是多了一个title标题而已

警告框

 

transition.js部分源码

动画过渡

.fade {
    opacity: 0; /*100%透明*/
    -webkit-transition: opacity .15s linear; /*透明度,匀速变化0.15秒*/
    transition: opacity .15s linear;
}

.fade.in { /*应用in样式,表示全部打开*/
    opacity: 1; /*完全不透明*/
}

 .modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out; /*减速运行*/
    -moz-transition: -moz-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate(0, -25%); /*向下移动25%的距离,从而产生向下的 动画视觉*/
    -ms-transform: translate(0, -25%);
    transform: translate(0, -25%);
}

.modal.in .modal-dialog { /*页面完整显示时,回归到原始位置*/
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}

使用data-target

使用

 

btn

  • 在网页加载的时候,对所有带有datatoggle=”dropdown”样式的元素进行事件绑定。
  • 用户单击带有data-toggle=”dropdown”样式的链接或按钮时,触发JavaScript事件代码。
  • Javascript事件代码在父容器(本例是:<li
    class=”dropdown”>)上加一个.open样式。
  • 默认隐藏的.dropdown-menu菜单在外部有了.open样式后,即可显示出来,从而达到预期的效果。

 

使用:

    <a id="aa" href="#" class="btn btn-default" data-loading-text="正在加载..." data-complete-text="已完成">提交</a>
$('#aa').dblclick(function() {
            $('#aa').button('loading');
            setTimeout(function () {
                $('#aa').button('complete');
            }, 2000);
        });
        $('#aa').click(function() {
            $('#aa').button('reset');
        });

 

 

 

针对图片,轮播插件还提供了一个字幕说明样式(carousel-caption),紧接着img元素定义即可。示例如下

下拉菜单

fade css

    function transitionEnd() {
        var el = document.createElement('bootstrap')
        var transEndEventNames = {
            WebkitTransition: 'webkitTransitionEnd',
            MozTransition: 'transitionend',
            OTransition: 'oTransitionEnd otransitionend',
            transition: 'transitionend'
        }
        for (var name in transEndEventNames) {
            if (el.style[name] !== undefined) {
                return { end: transEndEventNames[name] }
            }
        }
        return false // explicit for ie8 (  ._.)
    }
<a href="#" class="btn btn-success" data-toggle="modal" data-target=".modal">启动模态框</a>
        <div class="modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">Modal Title</div>
                    <div class="modal-body">
                        This is body.
                    </div>
                    <div class="modal-footer">
                        <a href="#" class="btn btn-default" data-dismiss="modal">关闭</a>
                        <a href="#" class="btn btn-success">保存</a>
                    </div>
                </div>
            </div>
        </div>

<!—或者分开设置offset — >

源文件:collapse.js

 

  • 模态弹窗(Modal)的滑动和渐变效果;
  • 选项卡(Tab)的渐变效果;
  • 警告框(Alert)的渐变效果;
  • 旋转轮播(Carousel)的滑动效果。
     <ul class="nav nav-tabs">
        <li class="active"><a href="#home" data-toggle="tab">home</a> </li>
        <li><a href="#concact" data-toggle="tab">concact</a> </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="home">
            <h3>Home</h3>
        </div>
        <div class="tab-pane" id="concact">
            <h3>concact</h3>
        </div>
    </div>

而data-offset-bottom则表示距离最底部还有多少距离(本例60像素)以后,就要开始继续滚动了.

网站地图xml地图