頁面滾動 和 幻燈片

var scroll = document.getElementById("scroll"); // 獲得大盒子

    var ul = document.getElementById("ul"); // 獲得ul

    var ulLis = ul.children;// 獲得ul的盒子 以此來生成ol中l(wèi)i的個數(shù)

    var liWidth = ul.children[0].offsetWidth;// 獲得每個li的寬度

    // 操作元素

    // 因為要做無縫滾動枫浙,所以要克隆第一張逝慧,放到最后一張后面

    // 1\. 克隆元素

    ul.appendChild(ul.children[0].cloneNode(true));

    // 2.創(chuàng)建ol 和li

    vaar ol = document.createElement("ol");//創(chuàng)建ol元素

    scroll.appendChild(ol);// 把ol放到scroll盒子里面去

    for (var i=0;i

        var li = document.createElement("li");// 創(chuàng)建li元素

        li.innerHTML = i + 1;// 給li里面添加文字  1 2 3 4 5

        ol.appendChild(li);// 將li元素添加到ol里面

    }

    ol.children[0].className = "current";// ol中的第一個li背景色為purple

此時ol li元素即小圓點創(chuàng)建完畢 我們接著用js做動畫

動畫部分包括:

1.鼠標經(jīng)過第幾個小圓點谭网,就要展示第幾張圖片,并且小圓點的顏色也發(fā)生變化

2.圖片自動輪播冠骄,(這需要一個定時器)

3.鼠標經(jīng)過圖片锁摔,圖片停止自動播放(這需要清除定時器)

4.鼠標離開圖片,圖片繼續(xù)自動輪播 (重新開始定時器)

這里我們封裝了一個animate()動畫函數(shù)

// 動畫函數(shù) 第一個參數(shù)凿蒜,代表誰動 第二個參數(shù) 動多少

    // 讓圖片做勻速運動,勻速動畫的原理是 當(dāng)前的位置 + 速度  即 offsetLeft + speed

    function animate(obj,target){

        // 首先清除掉定時器

        clearInterval(obj.timer);

        // 用來判斷 是+ 還是 -  即說明向左走還是向右走

        var speed = obj.offsetLeft < target ? 15 : -15;

        obj.timer = setInterval(function(){

            var result = target - obj.offsetLeft;//它們的差值不會超過speed

            obj.style.left = obj.offsetLeft + speed + "px";

            // 有可能有小數(shù)的存在胁黑,所以在這里要做個判斷             

            if (Math.abs(result) <= Math.abs(speed)) {

                clearInterval(obj.timer);

                obj.style.left = target + "px";

            }

        },10);

    }

定時器 函數(shù)

var timer = null; // 輪播圖的定時器

    var key = 0;// 控制播放的張數(shù)

    var circle = 0;// 控制小圓點

    timer = setInterval(autoplay,1000);// 自動輪播

    function autoplay(){

        /*自動輪播時,要對播放的張數(shù)key進行一個判斷,如果播放的張數(shù)超過ulLis.length-1,

        就要重頭開始播放.  因為我們克隆了第一張并將其放在最后面,所以我們要從第二張圖片開始播放*/

        key++; // 先++
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末废封,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子别厘,更是在濱河造成了極大的恐慌虱饿,老刑警劉巖拥诡,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件触趴,死亡現(xiàn)場離奇詭異,居然都是意外死亡渴肉,警方通過查閱死者的電腦和手機冗懦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來仇祭,“玉大人披蕉,你說我怎么就攤上這事∥谄妫” “怎么了没讲?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵,是天一觀的道長礁苗。 經(jīng)常有香客問我爬凑,道長,這世上最難降的妖魔是什么试伙? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任嘁信,我火速辦了婚禮于样,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘潘靖。我一直安慰自己穿剖,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布卦溢。 她就那樣靜靜地躺著糊余,像睡著了一般。 火紅的嫁衣襯著肌膚如雪单寂。 梳的紋絲不亂的頭發(fā)上啄刹,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天,我揣著相機與錄音凄贩,去河邊找鬼誓军。 笑死,一個胖子當(dāng)著我的面吹牛疲扎,可吹牛的內(nèi)容都是我干的昵时。 我是一名探鬼主播,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼椒丧,長吁一口氣:“原來是場噩夢啊……” “哼壹甥!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起壶熏,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤句柠,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后棒假,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體溯职,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年帽哑,在試婚紗的時候發(fā)現(xiàn)自己被綠了谜酒。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡妻枕,死狀恐怖僻族,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情屡谐,我是刑警寧澤述么,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站愕掏,受9級特大地震影響度秘,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜亭珍,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一敷钾、第九天 我趴在偏房一處隱蔽的房頂上張望枝哄。 院中可真熱鬧,春花似錦阻荒、人聲如沸挠锥。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蓖租。三九已至,卻和暖如春羊壹,著一層夾襖步出監(jiān)牢的瞬間蓖宦,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工油猫, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留稠茂,地道東北人。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓情妖,卻偏偏與公主長得像睬关,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子毡证,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,937評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品电爹,去做同樣的事情,實現(xiàn)同樣的效果;這時候需要使用工廠模式料睛。簡單...
    舟漁行舟閱讀 7,784評論 2 17
  • 單例模式 適用場景:可能會在場景中使用到對象丐箩,但只有一個實例,加載時并不主動創(chuàng)建恤煞,需要時才創(chuàng)建 最常見的單例模式屎勘,...
    Obeing閱讀 2,076評論 1 10
  • 1、通過CocoaPods安裝項目名稱項目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地數(shù)據(jù)庫組件 SD...
    陽明先生_X自主閱讀 15,988評論 3 119
  • 1.ios高性能編程 (1).內(nèi)層 最小的內(nèi)層平均值和峰值(2).耗電量 高效的算法和數(shù)據(jù)結(jié)構(gòu)(3).初始化時...
    歐辰_OSR閱讀 29,427評論 8 265
  • 我們常以為灌腸是針對腸-----大腸阱州,小腸等挑秉。原來不然,咖啡灌腸其實是針對肝臟的苔货。 肝臟解毒的時候,需要一種稱為G...
    瓔珞有話說閱讀 2,336評論 0 3