正則儲(chǔ)存抗愁,輪播圖

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

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

    var liWidth = ul.children[0].offsetWidth;// 獲得每個(gè)li的寬度
操作元素

因?yàn)橐鰺o(wú)縫滾動(dòng),所以要克隆第一張鲤孵,放到最后一張后面

克隆元素

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

創(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中的第一個(gè)li背景色為purple

此時(shí)ol li元素即小圓點(diǎn)創(chuàng)建完畢 我們接著用js做動(dòng)畫(huà)

動(dòng)畫(huà)部分包括:
1.鼠標(biāo)經(jīng)過(guò)第幾個(gè)小圓點(diǎn),就要展示第幾張圖片辰如,并且小圓點(diǎn)的顏色也發(fā)生變化

2.圖片自動(dòng)輪播普监,(這需要一個(gè)定時(shí)器)

3.鼠標(biāo)經(jīng)過(guò)圖片,圖片停止自動(dòng)播放(這需要清除定時(shí)器)

4.鼠標(biāo)離開(kāi)圖片琉兜,圖片繼續(xù)自動(dòng)輪播 (重新開(kāi)始定時(shí)器)

這里我們封裝了一個(gè)animate()動(dòng)畫(huà)函數(shù)

// 動(dòng)畫(huà)函數(shù) 第一個(gè)參數(shù)凯正,代表誰(shuí)動(dòng) 第二個(gè)參數(shù) 動(dòng)多少

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

    function animate(obj,target){

        // 首先清除掉定時(shí)器

        clearInterval(obj.timer);

        // 用來(lái)判斷 是+ 還是 -  即說(shuō)明向左走還是向右走

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

        obj.timer = setInterval(function(){

            var result = target - obj.offsetLeft;//它們的差值不會(huì)超過(guò)speed

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

            // 有可能有小數(shù)的存在豌蟋,所以在這里要做個(gè)判斷             

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

                clearInterval(obj.timer);

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

            }

        },10);

    }
定時(shí)器 函數(shù)

var timer = null; // 輪播圖的定時(shí)器

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

var circle = 0;// 控制小圓點(diǎn)

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

function autoplay(){

/自動(dòng)輪播時(shí),要對(duì)播放的張數(shù)key進(jìn)行一個(gè)判斷,如果播放的張數(shù)超過(guò)ulLis.length-1,就要重頭開(kāi)始播放. 因?yàn)槲覀兛寺×说谝粡埐⑵浞旁谧詈竺?所以我們要從第二張圖片開(kāi)始播放/

key++; // 先++

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末廊散,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子梧疲,更是在濱河造成了極大的恐慌允睹,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,002評(píng)論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件幌氮,死亡現(xiàn)場(chǎng)離奇詭異缭受,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)该互,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門(mén)米者,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事蔓搞∫榷。” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,787評(píng)論 0 365
  • 文/不壞的土叔 我叫張陵喂分,是天一觀的道長(zhǎng)锦庸。 經(jīng)常有香客問(wèn)我,道長(zhǎng)妻顶,這世上最難降的妖魔是什么酸员? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,237評(píng)論 1 300
  • 正文 為了忘掉前任蜒车,我火速辦了婚禮讳嘱,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘酿愧。我一直安慰自己沥潭,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,237評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布嬉挡。 她就那樣靜靜地躺著钝鸽,像睡著了一般。 火紅的嫁衣襯著肌膚如雪庞钢。 梳的紋絲不亂的頭發(fā)上拔恰,一...
    開(kāi)封第一講書(shū)人閱讀 52,821評(píng)論 1 314
  • 那天,我揣著相機(jī)與錄音基括,去河邊找鬼颜懊。 笑死,一個(gè)胖子當(dāng)著我的面吹牛风皿,可吹牛的內(nèi)容都是我干的河爹。 我是一名探鬼主播,決...
    沈念sama閱讀 41,236評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼桐款,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼咸这!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起魔眨,我...
    開(kāi)封第一講書(shū)人閱讀 40,196評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤媳维,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后遏暴,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體侨艾,經(jīng)...
    沈念sama閱讀 46,716評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,794評(píng)論 3 343
  • 正文 我和宋清朗相戀三年拓挥,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了唠梨。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,928評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡侥啤,死狀恐怖当叭,靈堂內(nèi)的尸體忽然破棺而出茬故,到底是詐尸還是另有隱情,我是刑警寧澤蚁鳖,帶...
    沈念sama閱讀 36,583評(píng)論 5 351
  • 正文 年R本政府宣布磺芭,位于F島的核電站,受9級(jí)特大地震影響醉箕,放射性物質(zhì)發(fā)生泄漏钾腺。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,264評(píng)論 3 336
  • 文/蒙蒙 一讥裤、第九天 我趴在偏房一處隱蔽的房頂上張望放棒。 院中可真熱鬧,春花似錦己英、人聲如沸间螟。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,755評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)厢破。三九已至,卻和暖如春治拿,著一層夾襖步出監(jiān)牢的瞬間摩泪,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,869評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工劫谅, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留见坑,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,378評(píng)論 3 379
  • 正文 我出身青樓同波,卻偏偏與公主長(zhǎng)得像鳄梅,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子未檩,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,937評(píng)論 2 361

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

  • varscroll=document.getElementById("scroll");//獲得大盒子 varul...
    會(huì)會(huì)_3a05閱讀 150評(píng)論 0 0
  • 輪播圖制作主要思路:實(shí)現(xiàn)輪播圖滾動(dòng)的效果戴尸,主要是使用animate()函數(shù)來(lái)實(shí)現(xiàn)這個(gè)過(guò)渡的動(dòng)畫(huà)效果。當(dāng)向左點(diǎn)擊時(shí)冤狡,...
    XingIven閱讀 562評(píng)論 2 2
  • js: ////思路: 1 獲取相關(guān)元素 2 左右箭頭點(diǎn)擊事件 3 圓點(diǎn)樣式 //// 4 圓點(diǎn)點(diǎn)擊事件 5...
    raining_804f閱讀 468評(píng)論 1 4
  • 今早寫(xiě)了一個(gè)發(fā)布之后孙蒙,又修改了一下,優(yōu)化一下代碼 html: <!-- 圖片 --> <!--按鈕 -...
    花花0825閱讀 620評(píng)論 0 1
  • 你是不是時(shí)常也會(huì)有這些感受: 原本幾天想好了要給父母或老人打電話坦胶,最后忙碌到晚上才想起,一看時(shí)間又覺(jué)太晚了會(huì)打擾他...
    花琪兒閱讀 346評(píng)論 0 1