网站幻灯片效果

作者: 话少为环保 | 来源:发表于2016-12-27 23:07 被阅读27次

仿写常见网站的的幻灯片

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;
}

网站幻灯片效果

css部分

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读