圖片輪播

時間 2019-11-19

標籤圖片简体版

原文原文鏈接

輪播是學習jquery開始的第二個實現的動效，也是學習時間最久的一個。在實現輪播的過程當中老是會遇到各類各樣的問題，請教過不少人，也屢次問過分娘。今天，也不敢果敢的說，能夠立刻寫好一個輪播。但願是經過隨筆的方式，記錄下一些思惟過程。javascript

　　首先是html結構，一個簡單的輪播，單張圖片無縫輪播，主要分爲三大層：div>ul>li，li裏面的img圖片。css

　　其次，css樣式：div固定住寬高，overflow：hidden；ul的寬度建議是動態獲取（下一步會講是怎麼獲取）；關於li我習慣使用浮動，讓他們依次排列，在ul上要記得清楚浮動（clear：both）。html

　　重要的是jquery的方法，主要有用到的有animate（），setInterval（），hover（）。在寫方法以前，縷清一下動效的邏輯：圖片依次循環自右向左滑過，當滑完最後一張時，第一張顯示，如此重複。java

　　一、獲取li的個數length和寬度widthjquery

var len=$('li').length,
    liWidth=$('li').width,

　　由於是無縫輪播，要實現天然的過渡，咱們還得作點什麼，當圖片滑到最後一張時，怎麼樣纔會很天然的過渡到第一張，這個時候，若是第一張就在最後一張的後面，就能夠了，因此，咱們須要將第一張clone後append到li的最後app

$('li:first').clone().appendTo('ul')

　　二、獲取ul的寬度：ul的寬度等於全部li的寬度加上克隆的li的寬度函數

ulWidth=liWidth*(len+1)

　　彷佛準備工做都作好了，那下一步咱們就嘗試讓他動起來，首先想到是animate（）方法：學習

　　animate( properties [, duration ] [, easing ] [, complete ] )，動畫

　　　　第一個參數properties：css的屬性和值的對象，決定動畫的效果，是上下仍是左右等；ui

　　　　第二個參數duration：完成一個動畫的時間，默認是400，單位是毫秒；

　　　　第三個參數easing：動畫過渡使用的緩動函數，默認是swing（linear，swing），通常不用這個參數；

　　　　第四個參數complete：是指完成動畫後執行的操做。

　　咱們的動效是自右向左，因此經過改變ul的margin-left值來實現

$('ul').animate({
    'marign-left': -liWidth*index
},3000,function(){
   if(index==len){
      index=0;
      $('ul').css({'margin-left':'0px'})
    } 
})

其中index指的是li的索引值，當li的索引值等於li的length值的時候，也就是動畫執行到了最後一張，那麼直接讓ul的margin-left爲0，li的索引值也爲0。

這樣還存在一個隱患，暫時不提。

下一步，當鼠標離開div的時候，圖片自動播放。這是要用到hover（）和setInterval（）

setInterval（）在W3C是這樣解釋的：按照指定的週期（以毫秒計）來調用函數或計算表達式。不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。

var autoPlay;
$('div').hover(function(){
   clearInterval(autoPlay); 
},function(){
   autoPlay=setInterval(function(){

$('ul').animate({

'marign-left': -liWidth*index
},3000,function(){
   if(index==len){
      index=0;
      $('ul').css({'margin-left':'0px'})；
　　　　index++;
    } 
});
}，3000) 
}).trigger('mouseleave');

這樣，一個自動播放的功能彷佛就實現了，但是咱們還能夠發現一個bug，第一幀停留的時間彷佛有些長，爲何呢？

這個問題仍是昨天獲得瞭解決，當圖片執行到最後一張時，他的index立刻變爲0，而後會執行兩次，所以在這個判斷中，咱們須要當index爲0時，讓它自加1，index++，放到判斷條件下。

還有一個問題，是昨天發現的，在這個輪播裏面有兩個時間，一個是動畫執行時間，一個是播放時間，前者的時間必定要比後者的時間小，緣由是js的執行順序呢是自上而下的，，若是時間一致或者後者時間小於前者，那麼，在這個時差裏，動畫將進不到判斷條件裏來，會一直播放，那麼輪播就失敗了。今天就分享到這裏，下一次分享加上左右箭頭和hover圓點的輪播效果。

附上完整的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>輪播</title>
    <style>
       body,p,form,input,button,dl,dt,dd,ul,ol,li,h1,h2,h3,h4{margin:0;padding:0;list-style:none;}
       body,button,input,select,textarea{font:12px Arial, Helvetica, sans-serif;color:#333;}
       input,select,textarea{font-size:100%;}
       .clearfix:after{display:block;content:".";height:0;visibility:hidden;clear:both;font-size:0;line-height:0;}
       .clearfix{*zoom:1;}
       .big-screen{width: 100%; height: 400px; overflow: hidden; margin: 40px 0;}
       .pic-list{height: 400px;}
       .pic-list li{float: left; width: 1920px; height: 400px;}
     </style>
</head>
<body>
    <div class="big-screen">
        <ul class="pic-list clearfix">
            <li>
                <a href="javascript:;">
                    <img src="http://dummyimage.com/1920x400/27ae60xfff" alt="picture" width="1920" height="400"/>

                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="http://dummyimage.com/1920x400/ae273axfff" alt="picture" width="1920" height="400"/>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="http://dummyimage.com/1920x400/2757aexfff" alt="picture" width="1920" height="400"/>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="http://dummyimage.com/1920x400/ae7d27xfff" alt="picture" width="1920" height="400"/>
                </a>
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var ul=$('.pic-list'),
            li=ul.find('li'),
            liW=li.outerWidth(true),
            liLen=li.length,
            index=0,
            autoPlay;
        li.first().clone().appendTo(ul);
        ul.css({'width':liW*(liLen+1),'margin-left':-liW*index});
        function play(){
            if(!ul.is('animated')){
                ul.stop().animate({
                    'margin-left':-liW*index
                },480,function(){
                    if(index>liLen){
                        index=0;
                        ul.css({'margin-left':-liW*index});
                        index++;
                    }
                });
            }
        }
        $('.big-screen').hover(function(){
            clearInterval(autoPlay);
        },function(){
            autoPlay=setInterval(function(){
                play();
                index++;
            },500)
        }).trigger('mouseleave');

})
</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。