網(wǎng)站幻燈片效果

仿寫(xiě)常見(jiàn)網(wǎng)站的的幻燈片

2016-12-27_21-55-10.gif

html部分（含js）

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta http-equiv="content-type" content="text/html" charset="UTF-8 ">
     <title>qq幻燈片</title>
      <link rel="stylesheet" href="css/miaov.css">
         <script src="js/miaov.js"></script>


    <script type="text/javascript">
        window.onload = function () {
            var oDiv = document.getElementById('box');
            var aPicLi = document.getElementById('pic_list').getElementsByTagName('li');
            var aTxtLi = document.getElementById('text_list').getElementsByTagName('li');
            var oIcoUl = document.getElementById('ico_list').getElementsByTagName('ul')[0];
            var aIcoLi = document.getElementById('ico_list').getElementsByTagName('li');
            var oBtnPrev = document.getElementById('btn_prev');
            var oBtnNext = document.getElementById('btn_next');
            var iNowUlLeft = 0;
            var iNow = 0;
            var i = 0;

            for(i = 0; i < aIcoLi.length; i++)
            {
                aIcoLi[i].index = i;
                aIcoLi[i].onclick = function()
                {

                    if (iNow == this.index)
                    {

                        return;
                    }


                    iNow = this.index;
                    tab();


                }

            }

            function  tab()
            {

                for(i = 0;i < aIcoLi.length; i++)
                {
                    aIcoLi[i].className = '';
                    aTxtLi[i].getElementsByTagName('h2')[0].className= '';
                    aPicLi[i].style.filter = 'alpha(opacity:0)';
                    aPicLi[i].style.opacity = 0;
                    miaovStartMove(aPicLi[i]);
                }
                aIcoLi[iNow].className = 'active';
                aTxtLi[iNow].getElementsByTagName('h2')[0].className = 'show';
//                    aPicLi[this.index].style.filter = 'alpha(opacity:100)';
//                    aPicLi[this.index].style.opacity = 1;
                miaovStartMove(aPicLi[iNow],{opacity:100},MIAOV_MOVE_TYPE.BUFFER);

            }

            oBtnPrev.onclick = function () {


                if(iNowUlLeft > 0 )
                {
                    iNowUlLeft--;
                    fixUlLeft();
                }

            };
            oBtnNext.onclick = function () {

                if(iNowUlLeft < aIcoLi.length - 7 )
                {
                    iNowUlLeft++;
                    fixUlLeft();
                }

            };
            function autoPlay ()
            {

                iNow++;
                if(iNow >=aIcoLi.length)
                {
                    iNow = 0;
                }



                if(iNow < iNowUlLeft)
                {
                    iNowUlLeft = iNow;



                }else if(iNow == iNowUlLeft + 7)
                {

                    iNowUlLeft = iNow - 6;
                }
                fixUlLeft();
                tab();

            }

            var timer = setInterval(autoPlay,3000);

            oDiv.onmousemove = function ()
            {

                clearInterval(timer);
            };

            oDiv.onmouseout = function ()
            {
                timer = setInterval(autoPlay,3000);
            };

            function fixUlLeft ()
            {
                oBtnPrev.className = iNowUlLeft==0?'btn':'btn showBtn';
                oBtnNext.className = iNowUlLeft==(aIcoLi.length - 7)?'btn':'btn showBtn';
                miaovStartMove(oIcoUl,{left: -aIcoLi[0].offsetWidth * iNowUlLeft},MIAOV_MOVE_TYPE.BUFFER);
            }

        }
    </script>

</head>
<body>
    <div id="box">
        <ul id="pic_list">
            <li style="z-index:2;opacity:1;fliter:alpha(opacity=100);">
                <a ><img src="img/pic_1.jpg" alt="妙味課堂JS精品課程"></a>
            </li>
            <li>
                <a href="htttp://www.baidu.com"><img src="img/pic_2.jpg" alt="">妙味課堂JS精品課程</a>
            </li>
            <li>
                <a href="htttp://www.baidu.com"><img src="img/pic_3.jpg" alt="">妙味課堂JS精品課程</a>
            </li>
            <li>
                <a href="htttp://www.baidu.com"><img src="img/pic_4.jpg" alt="">妙味課堂JS精品課程</a>
            </li>
            <li>
                <a href="htttp://www.baidu.com"><img src="img/pic_5.jpg" alt="">妙味課堂JS精品課程</a>
            </li>
            <li>
                <a href="htttp://www.baidu.com"><img src="img/pic_6.jpg" alt="">妙味課堂JS精品課程</a>
            </li>
            <li>
                <a href="htttp://www.baidu.com"><img src="img/pic_7.jpg" alt="">妙味課堂JS精品課程</a>
            </li>
            <li>
                <a href="htttp://www.baidu.com"><img src="img/pic_8.jpg" alt="">妙味課堂JS精品課程</a>
            </li>
            <li>
                <a href="htttp://www.baidu.com"><img src="img/pic_9.jpg" alt="">妙味課堂JS精品課程</a>
            </li>
            <li>
                <a href="htttp://www.baidu.com"><img src="img/pic_10.jpg" alt="">妙味課堂JS精品課程</a>
            </li>
            <li>
                <a href="htttp://www.baidu.com"><img src="img/pic_11.jpg" alt="">妙味課堂JS精品課程</a>
            </li>
            <li>
                <a href="htttp://www.baidu.com"><img src="img/pic_12.jpg" alt="">妙味課堂JS精品課程</a>
            </li>
            <li>
                <a href="htttp://www.baidu.com"><img src="img/pic_13.jpg" alt="">妙味課堂JS精品課程</a>
            </li>
            <li>
                <a href="htttp://www.baidu.com"><img src="img/pic_14.jpg" alt="">妙味課堂JS精品課程</a>
            </li>
        </ul>
        <div class="mark"></div>
        
        <ul id="text_list">
            <li><h2 class="show"><a href="#">《武則天秘史》[至22集]姐姐與皇上偷情泣刹，媚娘抓奸在床...</a></h2></li>
            <li><h2><a href="#">《無(wú)底洞》金錢(qián)、美女语婴、權(quán)利、復(fù)仇等欲望讓人不可自拔...</a></h2></li>
            <li><h2><a href="#">《巴黎寶貝》鄧超巴黎當(dāng)奶爸两入，上演基情蹄殃、賣(mài)萌、跨國(guó)戀..</a></h2></li>
            <li><h2><a href="#">《我的女兒是花兒》[至3集]“富二代”冰王子戀上貧家女..</a></h2></li>
            <li><h2><a href="#">《法證先鋒3》[至26集]寫(xiě)字樓驚現(xiàn)“女僵尸”尸體澜搅！</a></h2></li>
            <li><h2><a href="#">《非常了得》孟非郭德綱大曝臺(tái)下私生活退敦，內(nèi)地Hold姐來(lái)挑戰(zhàn)</a></h2></li>
            <li><h2><a href="#">第二屆九分鐘電影11月20日獨(dú)家首映 視覺(jué)盛宴恭迎各位看官</a></h2></li>
            <li><h2><a href="#">《快女微電影》 洪辰臉傷痊愈 快女微電影收官作復(fù)拍</a></h2></li>
            <li><h2><a href="#">《稱心如意》京城第一“育嬰男”Hold住全場(chǎng) 蘿莉熱舞走光</a></h2></li>
            <li><h2><a href="#">《男人幫》[全30集]悲喜雙響炮粘咖，一個(gè)完美結(jié)局</a></h2></li>
            <li><h2><a href="#">《辛亥革命》成龍、趙文瑄苛聘、李冰冰涂炎、胡歌演繹革命腥風(fēng)血雨</a></h2></li>
            <li><h2><a href="#">《李獻(xiàn)計(jì)歷險(xiǎn)記》房祖名患差時(shí)癥為尋女友開(kāi)啟超時(shí)空冒險(xiǎn)</a></h2></li>
            <li><h2><a href="#">Justin bieber女友動(dòng)感熱單全球首發(fā)。</a></h2></li>
            <li><h2><a href="#">第八屆中國(guó)（重慶）國(guó)際園林博覽會(huì)</a></h2></li>
        </ul>

        <div id="ico_list">
            <ul>
                <li class="active"><a href="#"><img src="img/ico_1.jpg" alt="妙味課堂富有人性化的IT培訓(xùn)"/></a></li>
                <li><a href="#"><img src="img/ico_2.jpg" alt="妙味課堂富有人性化的IT培訓(xùn)"/></a></li>
                <li><a href="#"><img src="img/ico_3.jpg" alt="妙味課堂富有人性化的IT培訓(xùn)"/></a></li>
                <li><a href="#"><img src="img/ico_4.jpg" alt="妙味課堂富有人性化的IT培訓(xùn)"/></a></li>
                <li><a href="#"><img src="img/ico_5.jpg" alt="妙味課堂富有人性化的IT培訓(xùn)"/></a></li>
                <li><a href="#"><img src="img/ico_6.jpg" alt="妙味課堂富有人性化的IT培訓(xùn)"/></a></li>
                <li><a href="#"><img src="img/ico_7.jpg" alt="妙味課堂富有人性化的IT培訓(xùn)"/></a></li>
                <li><a href="#"><img src="img/ico_8.jpg" alt="妙味課堂富有人性化的IT培訓(xùn)"/></a></li>
                <li><a href="#"><img src="img/ico_9.jpg" alt="妙味課堂富有人性化的IT培訓(xùn)"/></a></li>
                <li><a href="#"><img src="img/ico_10.jpg" alt="妙味課堂富有人性化的IT培訓(xùn)"/></a></li>
                <li><a href="#"><img src="img/ico_11.jpg" alt="妙味課堂富有人性化的IT培訓(xùn)"/></a></li>
                <li><a href="#"><img src="img/ico_12.jpg" alt="妙味課堂富有人性化的IT培訓(xùn)"/></a></li>
                <li><a href="#"><img src="img/ico_13.jpg" alt="妙味課堂富有人性化的IT培訓(xùn)"/></a></li>
                <li><a href="#"><img src="img/ico_14.jpg" alt="妙味課堂富有人性化的IT培訓(xùn)"/></a></li>


            </ul>
        </div>

    <a href="#" id="btn_prev" class="btn"></a>
    <a href="#" id="btn_next" class="btn showBtn"></a>
    </div>
</body>
</html>

css部分

body,ul,h2 {
margin: 0;
padding: 0;
font: 12px/20px Tahoma, "hiragino sans gb", Helvetica, Arial;
}
img {
border:none;

}
li {
list-style:none;
}
/*body {*/
/*background: #101010;*/
/*}*/
#box {
        width:660px;
        height:330px;
        position: relative;
        overflow: hidden;
        margin:60px auto 0;
}
#pic_list {
        position: relative;
        z-index:1;

}
#pic_list li {
        position: absolute;
        left:0;
        top:0;
        opacity:0;
        filter:alpha(opacity=0);
        z-index:1;
}
.mark {
        height:90px;
        width:660px;
        background: #000;
        position: absolute;
        left:0;
        bottom:0;
        opacity:0.3;
        filter:alpha(opacity=30);
        z-index:1;


}
#text_list {
        position: absolute;
        bottom:60px;
        left:50px;
        z-index:1;
        height:20px;
        overflow: hidden;
}

#text_list h2 {
    display: none;
}

#text_list .show {
    display: block;

}
#text_list a{
    color: #FFFFFF;
    font-family:"Microsoft Sans Serif";
    font-size: 18px;
    font-weight:normal;
    text-decoration:none;
}
#ico_list {
    position: absolute;
    bottom:10px;
    left:12px;
    width:525px;
    overflow: hidden;
    height:46px;
    z-index: 3;
}
#ico_list ul {
    width:1050px;
    position: absolute;
    left:0;
    top:0;
    
}
#ico_list li {
    width:75px;
    float: left;
}
#ico_list li a {
    width:68px;
    padding-top: 6px;
    display: block;
}
#ico_list li a img   {
    border:2px solid #DFE8E4;
    height:36px;
    width:64px;
    background: #040303;
    opacity:0.7;
    filter:alpha(opacity=70);


}
#ico_list .active {
    background: url("../img/a_hover.gif") no-repeat center 0;

}

#ico_list .active img {
    opacity:1;
    filter:alpha(opacity=100);
    border:3px solid #fff;
    height:34px;
    width:62px;


}
.btn {
    background:url("../img/btn.gif") no-repeat;
    height:38px;
    width:38px;
    position: absolute;
    bottom:11px;
    opacity:0.5;
    filter:alpha(opacity=50);
    cursor: default;
    z-index: 3;


}
.showBtn{
    opacity:1;
    filter:alpha(opacity=100);
    cursor:pointer;
    z-index:4;}

#btn_prev{
    right:56px;
    /*background: red;*/
}
#btn_next{
    right:20px;
    background-position: right 0;
}

最后編輯于：2017.12.05 03:48:17

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末设哗，一起剝皮案震驚了整個(gè)濱河市唱捣，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌网梢，老刑警劉巖震缭，帶你破解...
沈念sama閱讀 216,591評(píng)論 6贊 501
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異战虏，居然都是意外死亡拣宰，警方通過(guò)查閱死者的電腦和手機(jī)党涕，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,448評(píng)論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)巡社，“玉大人膛堤，你說(shuō)我怎么就攤上這事∩胃茫” “怎么了肥荔？”我有些...
開(kāi)封第一講書(shū)人閱讀 162,823評(píng)論 0贊 353
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)朝群。經(jīng)常有香客問(wèn)我燕耿，道長(zhǎng)，這世上最難降的妖魔是什么姜胖？我笑而不...
開(kāi)封第一講書(shū)人閱讀 58,204評(píng)論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任誉帅，我火速辦了婚禮，結(jié)果婚禮上右莱，老公的妹妹穿的比我還像新娘蚜锨。我一直安慰自己，他們只是感情好慢蜓，可當(dāng)我...
茶點(diǎn)故事閱讀 67,228評(píng)論 6贊 388
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布踏志。她就那樣靜靜地躺著，像睡著了一般胀瞪。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上饲鄙，一...
開(kāi)封第一講書(shū)人閱讀 51,190評(píng)論 1贊 299
城市分裂傳說(shuō)
那天凄诞，我揣著相機(jī)與錄音，去河邊找鬼忍级。笑死帆谍，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的轴咱。我是一名探鬼主播汛蝙，決...
沈念sama閱讀 40,078評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼朴肺！你這毒婦竟也來(lái)了窖剑？” 一聲冷哼從身側(cè)響起，我...
開(kāi)封第一講書(shū)人閱讀 38,923評(píng)論 0贊 274
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤戈稿，失蹤者是張志新（化名）和其女友劉穎西土，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體鞍盗，經(jīng)...
沈念sama閱讀 45,334評(píng)論 1贊 310
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡需了，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,550評(píng)論 2贊 333
?白月光啟示錄
正文我和宋清朗相戀三年跳昼，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片肋乍。...
茶點(diǎn)故事閱讀 39,727評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡鹅颊，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出墓造，到底是詐尸還是另有隱情堪伍，我是刑警寧澤，帶...
沈念sama閱讀 35,428評(píng)論 5贊 343
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布滔岳，位于F島的核電站杠娱，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏谱煤。R本人自食惡果不足惜摊求，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,022評(píng)論 3贊 326
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望刘离。院中可真熱鬧室叉，春花似錦、人聲如沸硫惕。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 31,672評(píng)論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)恼除。三九已至踪旷，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間豁辉，已是汗流浹背令野。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 32,826評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留徽级，地道東北人气破。一個(gè)月前我還...
沈念sama閱讀 47,734評(píng)論 2贊 368
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像餐抢，于是被迫代替她去往敵國(guó)和親现使。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,619評(píng)論 2贊 354

網(wǎng)站幻燈片效果

css部分

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