网站幻灯片效果

仿写常见网站的的幻灯片

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 href="http://www.baidu.com"><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="#">《无底洞》金钱、美女、权利、复仇等欲望让人不可自拔...</a></h2></li>
            <li><h2><a href="#">《巴黎宝贝》邓超巴黎当奶爸，上演基情、卖萌、跨国恋..</a></h2></li>
            <li><h2><a href="#">《我的女儿是花儿》[至3集]“富二代”冰王子恋上贫家女..</a></h2></li>
            <li><h2><a href="#">《法证先锋3》[至26集]写字楼惊现“女僵尸”尸体！</a></h2></li>
            <li><h2><a href="#">《非常了得》孟非郭德纲大曝台下私生活，内地Hold姐来挑战</a></h2></li>
            <li><h2><a href="#">第二届九分钟电影11月20日独家首映 视觉盛宴恭迎各位看官</a></h2></li>
            <li><h2><a href="#">《快女微电影》 洪辰脸伤痊愈 快女微电影收官作复拍</a></h2></li>
            <li><h2><a href="#">《称心如意》京城第一“育婴男”Hold住全场 萝莉热舞走光</a></h2></li>
            <li><h2><a href="#">《男人帮》[全30集]悲喜双响炮，一个完美结局</a></h2></li>
            <li><h2><a href="#">《辛亥革命》成龙、赵文瑄、李冰冰、胡歌演绎革命腥风血雨</a></h2></li>
            <li><h2><a href="#">《李献计历险记》房祖名患差时症为寻女友开启超时空冒险</a></h2></li>
            <li><h2><a href="#">Justin bieber女友动感热单全球首发。</a></h2></li>
            <li><h2><a href="#">第八届中国（重庆）国际园林博览会</a></h2></li>
        </ul>

        <div id="ico_list">
            <ul>
                <li class="active"><a href="#"><img src="img/ico_1.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
                <li><a href="#"><img src="img/ico_2.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
                <li><a href="#"><img src="img/ico_3.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
                <li><a href="#"><img src="img/ico_4.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
                <li><a href="#"><img src="img/ico_5.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
                <li><a href="#"><img src="img/ico_6.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
                <li><a href="#"><img src="img/ico_7.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
                <li><a href="#"><img src="img/ico_8.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
                <li><a href="#"><img src="img/ico_9.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
                <li><a href="#"><img src="img/ico_10.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
                <li><a href="#"><img src="img/ico_11.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
                <li><a href="#"><img src="img/ico_12.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
                <li><a href="#"><img src="img/ico_13.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
                <li><a href="#"><img src="img/ico_14.jpg" alt="妙味课堂富有人性化的IT培训"/></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

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 199,340评论 5赞 467
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 83,762评论 2赞 376
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 146,329评论 0赞 329
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 53,678评论 1赞 270
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 62,583评论 5赞 359
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 47,995评论 1赞 275
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,493评论 3赞 390
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,145评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,293评论 1赞 294
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,250评论 2赞 317
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,267评论 1赞 328
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,973评论 3赞 316
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,556评论 3赞 303
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,648评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,873评论 1赞 255
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,257评论 2赞 345
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 41,809评论 2赞 339

网站幻灯片效果

css部分

推荐阅读更多精彩内容