輪播圖片

html （第一種）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>images slide</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        li {
            list-style: none;
        }
        img {
            border: 0;
        }
        a {
            text-decoration: none;
        }
        #slide {
            width: 800px;
            height: 400px;
            box-shadow: 0px 0px 5px #c1c1c1;
            margin: 20px auto;
            position: relative;
            overflow: hidden;
        }
        #slide ul {
            position: absolute;
            left: 0px;
            top: 0px;
            height: 400px;
            width: 11930px;
        }
        #slide ul li {
            width: 800px;
            height: 400px;
            overflow: hidden;
            float: left;
        }
        #slide .ico {
            width: 800px;
            height: 20px;
            overflow: hidden;
            text-align: center;
            position: absolute;
            left: 0px;
            bottom: 10px;
            z-index: 1;
        }
        #slide .ico a {
            display: inline-block;
            width: 10px;
            height:10px;
            background: url(out.png) no-repeat 0px 0px;
            margin: 0px 5px;
        }
        #slide .ico .active {
            background: url(out1.png) no-repeat 0px 0px;
        }
        #btnLeft {
            width: 60px;
            height: 400px;
            left: 0px;
            top: 0px;
            background: url() no-repeat 0px 0px;
            position: absolute;
            z-index: 2;
        }
        #btnLeft :hover {
            background: url() no-repeat 0px 0px;
        }
        #btnRight {
            width: 60px;
            height: 400px;
            right: 0px;
            top: 0px;
            background: url() no-repeat 0px 0px;
            position: absolute;
            z-index: 2;
        }
        #btnRight :hover {
            background: url() no-repeat 0px 0px;
        }

    </style>

    <script type="text/javascript">
        window.onload = function() {
            var oIco = document.getElementById("ico");
            var aBtn = oIco.getElementsByTagName("a");
            var oSlide = document.getElementById("slide");
            var oUl = oSlide.getElementsByTagName("ul");
            var aLi = oUl[0].getElementsByTagName("li");
            var oBtnLeft = document.getElementById("btnLeft");
            var oBtnRight = document.getElementById("btnRight");

            var baseWidth = aLi[0].offsetWidth;
            //alert(baseWidth);
            oUl[0].style.width = baseWidth * aLi.length + "px";
            var iNow = 0;
            for(var i=0;i<aBtn.length;i++) {
                aBtn[i].index = i;
                aBtn[i].onclick = function() {
                    //alert(this.index);
                    //alert(oUl[0].style.left);
                    move(this.index);
                    //aIco[this.index].className = "active";
                }
            }
            oBtnLeft.onclick = function() {
                iNow ++;
                //document.title = iNow;
                move(iNow);
            }
            oBtnRight.onclick = function() {
                iNow --;
                document.title = iNow;
                move(iNow);
            }

            var curIndex = 0;
            var timeInterval = 1000;
            setInterval(change,timeInterval);
            function change() {
                if(curIndex == aBtn.length) {
                    curIndex =0;
                } else {
                    move(curIndex);
                    curIndex += 1;
                }

            }

            function move(index) {
                //document.title = index;
                if(index>aLi.length-1) {
                    index = 0;
                    iNow = index;
                }
                if(index<0) {
                    index = aLi.length - 1;
                    iNow = index;
                }
                for(var n=0;n<aBtn.length;n++) {
                    aBtn[n].className = "";
                }
                aBtn[index].className = "active";
                oUl[0].style.left = -index * baseWidth + "px";
                //buffer(oUl[0],{
                // left: -index * baseWidth
                // },8)

            }
        }
    </script>
</head>
<body>
<div id="slide">
    <a id="btnLeft" href="javascript:void(0);" ></a>
    <a id="btnRight" href="javascript:void(0);" ></a>
    <!--when change next image:style="left: -(n-1)*800px;"-->
    <ul>
        <li><img src="../image/1.jpg" alt="" /></li>
        <li><img src="../image/2.jpg" alt="" /></li>
        <li><img src="../image/3.jpg" alt="" /></li>
        <li><img src="../image/4.jpg" alt="" /></li>
        <li><img src="../image/5.jpg" alt="" /></li>
        <li><img src="../image/bg.jpg" alt="" /></li>
    </ul>
    <div id="ico" class="ico">
        <a class="active" href="javascript:void(0);"></a>
        <a href="javascript:void(0);"></a>
        <a href="javascript:void(0);"></a>
        <a href="javascript:void(0);"></a>
        <a href="javascript:void(0);"></a>
        <a href="javascript:void(0);"></a>
    </div>
</div>
</body>
</html>

html （第二種）

<!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>images</title>
    <script type="text/javascript">
        var curIndex = 0;
        var timeInterval = 1000;
        var arr = new Array();
        arr[0] = "../image/1.jpg";
        arr[1] = "../image/2.jpg";
        arr[2] = "../image/3.jpg";
        arr[3] = "../image/4.jpg";
        arr[4] = "../image/5.jpg";
        arr[5] = "../image/dot.png";
        arr[6] = "../image/icon.png";
        setInterval(changeImg,timeInterval);
        function changeImg() {
            var obj = document.getElementById("obj");
            if (curIndex == arr.length-1) {
                curIndex = 0;
            } else {
                curIndex += 1;
            }
            obj.src = arr[curIndex];
        }
    </script>

    <!-- <script language="javascript">
     setInterval(test,1000);
     var array = new Array();
     var index = 0;
     var array = new Array("image/1.jpg","image/2.jpg","image/3.jpg","image/4.jpg","image/5.jpg","image/6.jpg","image/7.jpg","image/8.jpg","image/9.jpg","image/10.jpg");
     function test() {
      var myimg=document.getElementById("imgs");
      if(index==array.length-1)
      { index=0; }else{ index++; }
      myimg.src=array[index];
     }
    </script> -->
</head>
<body>
<img id = "obj" src = "1.jpg" border = 0 />
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子器腋，更是在濱河造成了極大的恐慌，老刑警劉巖横漏，帶你破解...
    沈念sama閱讀 206,602評(píng)論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異熟掂，居然都是意外死亡缎浇，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,442評(píng)論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門赴肚，熙熙樓的掌柜王于貴愁眉苦臉地迎上來华畏，“玉大人鹏秋，你說我怎么就攤上這事尊蚁⊥鲂Γ” “怎么了？”我有些...
    開封第一講書人閱讀 152,878評(píng)論 0贊 344
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵横朋，是天一觀的道長(zhǎng)仑乌。 經(jīng)常有香客問我，道長(zhǎng)琴锭，這世上最難降的妖魔是什么晰甚？ 我笑而不...
    開封第一講書人閱讀 55,306評(píng)論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮决帖，結(jié)果婚禮上厕九，老公的妹妹穿的比我還像新娘。我一直安慰自己地回，他們只是感情好扁远，可當(dāng)我...
    茶點(diǎn)故事閱讀 64,330評(píng)論 5贊 373
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著刻像，像睡著了一般畅买。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上细睡，一...
    開封第一講書人閱讀 49,071評(píng)論 1贊 285
  • 城市分裂傳說
    那天谷羞，我揣著相機(jī)與錄音，去河邊找鬼溜徙。 笑死湃缎，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的蠢壹。 我是一名探鬼主播嗓违，決...
    沈念sama閱讀 38,382評(píng)論 3贊 400
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼知残！你這毒婦竟也來了靠瞎？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 37,006評(píng)論 0贊 259
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤求妹，失蹤者是張志新（化名）和其女友劉穎乏盐，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體制恍，經(jīng)...
    沈念sama閱讀 43,512評(píng)論 1贊 300
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡父能，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,965評(píng)論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了净神。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片何吝。...
    茶點(diǎn)故事閱讀 38,094評(píng)論 1贊 333
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡溉委，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出爱榕，到底是詐尸還是另有隱情瓣喊，我是刑警寧澤，帶...
    沈念sama閱讀 33,732評(píng)論 4贊 323
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布黔酥，位于F島的核電站藻三，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏跪者。R本人自食惡果不足惜棵帽，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,283評(píng)論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望渣玲。 院中可真熱鬧逗概，春花似錦、人聲如沸忘衍。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,286評(píng)論 0贊 19
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽淑履。三九已至隶垮，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間秘噪，已是汗流浹背狸吞。 一陣腳步聲響...
    開封第一講書人閱讀 31,512評(píng)論 1贊 262
  • 情欲美人皮
    我被黑心中介騙來泰國(guó)打工， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留指煎，地道東北人蹋偏。 一個(gè)月前我還...
    沈念sama閱讀 45,536評(píng)論 2贊 354
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長(zhǎng)得像至壤，于是被迫代替她去往敵國(guó)和親威始。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,828評(píng)論 2贊 345

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