輪播圖

支持左右按鈕和圓圈的切換

樣式
       *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style-type: none;
        }
        #box{
            width: 720px;
            height: 225px;
            margin: 100px auto;
            border: 1px solid black;
            position: relative;
        }
        #box-img{
            height: 100%;
        }
        #box-img li{
            height: 100%;
            border: 1px solid sienna;
            display: none;

        }
        #box-list{
            overflow: hidden;
            display: inline-block;
            position: absolute;
            bottom: 10px;
            left:290px;
        }
        #box-list li{
            width: 20px;
            height: 20px;
            float: left;
            margin-left: 10px;
            border-radius: 50%;
            border: 1px solid green;
            cursor: pointer;
        }
        #box-right,#box-left{
            width: 50px;
            height: 60px;
            font-size: 30px;
            background-color: #dedede;
            text-align: center;
            line-height: 60px;position: absolute;
            opacity: 0.5;
        }
        #box-right{
            right: 10px;
            top:70px;
            cursor: pointer;
        }
        #box-left{
            left: 10px;
            top:70px;
            cursor: pointer;
        }

標(biāo)簽
 <body> |
   <div id="box"> |
     <ul id="box-img"> 
       <li><img src="[./img/0.jpg](./img/0.jpg)" alt=""></li> 
       <li><img src="[./img/1.jpg](./img/1.jpg)" alt=""></li> 
       <li><img src="[./img/2.jpg](./img/2.jpg)" alt=""></li> 
       <li><img src="[./img/3.jpg](./img/3.jpg)" alt=""></li> 
     </ul> 
     <ul id="box-list"> 
       <li></li> 
       <li></li> 
       <li></li> 
      <li></li> 
     </ul> 
     <div id="box-right"> 
       <span> > </span> 
     </div> 
     <div id="box-left"> 
       <span> < </span> 
    </div> 
   </div> 
</body> 
js
<script>
    var box_right = document.getElementById("box-right");
    var box_left = document.getElementById("box-left");
    var box_img = document.getElementById("box-img").children;
    var box_list = document.getElementById('box-list').children;
    var x =0;

    box_img[0].style.display = "block";
    box_list[0].style.backgroundColor="red";
    box_right.onclick = function(){
        box_img[x].style.display = "none";
        box_list[x].style.backgroundColor = "";
        x++;
        if(x>box_img.length-1){
          x=0;
        }
        box_img[x].style.display="block";
        box_list[x].style.backgroundColor="red";
        console.log(x)
    };

    box_left.onclick = function () {
        box_img[x].style.display = "none";
        box_list[x].style.backgroundColor = "";
        x--;
        if(x<0){
            x=box_img.length-1;
        }
        box_img[x].style.display="block";
        box_list[x].style.backgroundColor="red";
        console.log(x)
    };

    for(var j=0;j<box_list.length;j++){
        box_list[j].index =j;
        box_list[j].onclick = function () {
            box_list[x].style.backgroundColor='';
            this.style.backgroundColor="red";
            box_img[x].style.display = "none";
            box_img[this.index].style.display = "block";
            x=this.index;
        }

    }
</script>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末格郁,一起剝皮案震驚了整個(gè)濱河市赚爵,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌挤巡,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,743評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件酷麦,死亡現(xiàn)場(chǎng)離奇詭異矿卑,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)沃饶,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門母廷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人糊肤,你說我怎么就攤上這事琴昆。” “怎么了馆揉?”我有些...
    開封第一講書人閱讀 157,285評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵业舍,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我升酣,道長(zhǎng)舷暮,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,485評(píng)論 1 283
  • 正文 為了忘掉前任噩茄,我火速辦了婚禮下面,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘绩聘。我一直安慰自己沥割,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評(píng)論 6 386
  • 文/花漫 我一把揭開白布凿菩。 她就那樣靜靜地躺著机杜,像睡著了一般。 火紅的嫁衣襯著肌膚如雪衅谷。 梳的紋絲不亂的頭發(fā)上叉庐,一...
    開封第一講書人閱讀 49,821評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音会喝,去河邊找鬼。 笑死玩郊,一個(gè)胖子當(dāng)著我的面吹牛肢执,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播译红,決...
    沈念sama閱讀 38,960評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼预茄,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起耻陕,我...
    開封第一講書人閱讀 37,719評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤拙徽,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后诗宣,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體膘怕,經(jīng)...
    沈念sama閱讀 44,186評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評(píng)論 2 327
  • 正文 我和宋清朗相戀三年召庞,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了岛心。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,650評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡篮灼,死狀恐怖忘古,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情诅诱,我是刑警寧澤髓堪,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布,位于F島的核電站娘荡,受9級(jí)特大地震影響干旁,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜它改,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評(píng)論 3 313
  • 文/蒙蒙 一疤孕、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧央拖,春花似錦祭阀、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至遏餐,卻和暖如春伦腐,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背失都。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工柏蘑, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人粹庞。 一個(gè)月前我還...
    沈念sama閱讀 46,370評(píng)論 2 360
  • 正文 我出身青樓咳焚,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親庞溜。 傳聞我的和親對(duì)象是個(gè)殘疾皇子革半,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評(píng)論 2 349

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

  • 1、通過CocoaPods安裝項(xiàng)目名稱項(xiàng)目信息 AFNetworking網(wǎng)絡(luò)請(qǐng)求組件 FMDB本地?cái)?shù)據(jù)庫(kù)組件 SD...
    陽(yáng)明先生_X自主閱讀 15,969評(píng)論 3 119
  • 那時(shí)候還上小學(xué),正是調(diào)皮的時(shí)候又官。印象中也就是三年級(jí)左右延刘,我們還忙碌于警察抓小偷,下河捉青蛙六敬,地里逮螞蚱的年紀(jì)碘赖。家是...
    牛糞茶壺閱讀 516評(píng)論 13 8
  • 清明小長(zhǎng)假,你們放假回家觉阅,給你們布置的作業(yè)中崖疤,其中一項(xiàng)是拍十張故鄉(xiāng)春天的照片。 記得布置這個(gè)作業(yè)時(shí)典勇,教室里一下子就...
    如月如月閱讀 1,136評(píng)論 8 10
  • 你的思維模式?jīng)Q定了你的行為劫哼, 你的行為決定了你的習(xí)慣, 你的習(xí)慣決定了你的人生層次割笙。
    summerzsf閱讀 198評(píng)論 0 0
  • 坐在高處的避風(fēng)臺(tái)上权烧,一隊(duì)幼兒園小朋友們,估計(jì)有30幾個(gè)伤溉,兩兩牽著手在我面前走過般码,好奇的望著我。 “他怎么能上那么高...
    80天旅行閱讀 212評(píng)論 0 0