找回密码
当前位置：前端开发者 > 教程 > 正文

前端图片轮播带弹性效果

2018-11-05 20:53:11 分类：教程 阅读(252) 评论(0)
前端开发必备技能
web前端开发专业技能
web前端开发专业技能介绍

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”>
    <title>javascript有弹性的上下滑动幻灯片</title>
    <script type=”text/javascript” src=”http://www.bird100.cn/wp-content/uploads/2016/demo/javascript23/domove.js”></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        li {
            list-style: none;
        }
        img {
            border: none;
        }
        body {
            background: #ecfaff;
        }
        .play {
            width: 470px;
            height: 150px;
            overflow: hidden;
            position: relative;
            margin: 150px auto 0;
        }
        .play .text {
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 60px;
        }
        .play .text div {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: black;
            filter: alpha(opacity, 40);
            opacity: 0.4;
            z-index: 99;
        }
        .play .text span {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            line-height: 60px;
            color: white;
            z-index: 999;
            text-align: center;
            font-size: 20px;
        }
        ol {
            position: absolute;
            right: 5px;
            bottom: 5px;
            z-index: 99999;
        }
        ol li {
            float: left;
            margin-right: 3px;
            display: inline;
            cursor: pointer;
            background: #fcf2cf;
            border: 1px solid #f47500;
            padding: 2px 6px;
            color: #d94b01;
            font-family: arial;
            font-size: 12px;
        }
        .active {
            padding: 3px 8px;
            font-weight: bold;
            color: #ffffff;
            background: #ffb442;
            position: relative;
            bottom: 2px;
        }
        ul {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
        ul li {
            width: 470px;
            height: 150px;
            float: left;
        }
        ul img {
            float: left;
            width: 470px;
            height: 150px;
        }
    </style>
    <script>
        window.onload = function () {
            var oBox = document.getElementById(“play”);
            var aOl = oBox.getElementsByTagName(“ol”)[0];
            var aUl = oBox.getElementsByTagName(“ul”)[0];
            var oBtn = aOl.children;
            var oLi = aUl.children;
            var iNow = 0;
            var timer = null;
            timer = setInterval(motion2, 2000);
            function motion2() {
                motion1() < br />
if (iNow==oBtn.length-1) {
                    iNow = -1 < br />
}
                iNow++</p >
                    <p> }
                        for(var i=0;i<oBtn.length; i++){
                            (function (index) {
                                oBtn[i].onclick = function () {
                                    iNow = index
                                    motion()</p>
                    <p> }
                                })(i)
                                }
                        function motion1(){
for(vari=0;i<oBtn.length; i++){
                                (function (index) {
                                    for (var i = 0; i < oBtn.length; i++) {
                                        oBtn[i].className = ”;
                                    }
                                    oBtn[iNow].className = ‘active’;
                                    var fx = Tween.Bounce.easeOut;
                                    doMove(aUl, { top: -iNow * oLi[0].offsetHeight }, { easing: fx });
                                })(i)
                            }
                            }
                        function motion(){
for(vari=0;i<oBtn.length; i++){
                                oBtn[i].className = ”;
                            }
                            oBtn[iNow].className=’active’;
                            var fx = Tween.Bounce.easeOut;
                        doMove(aUl,{top: -iNow*oLi[0].offsetHeight},{easing: fx});
                                }
                        oBox.onmouseover=function(){
                                clearInterval(timer)
                            }
                            oBox.onmouseout=function(){
                                timer = setInterval(motion2, 1000);
                        }
                                }
    </script>
</head>
<body>
    <div class=”play” id=”play”>
        <ol>
            <li class=”active”>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        <ul>
            <li><a href=”#”><img src=”http://www.bird100.cn/wp-content/uploads/2016/demo/javascript23/img/1.jpg” alt=”广告一” /></a></li>
            <li><a href=”#”><img src=”http://www.bird100.cn/wp-content/uploads/2016/demo/javascript23/img/2.jpg” alt=”广告二” /></a></li>
            <li><a href=”#”><img src=”http://www.bird100.cn/wp-content/uploads/2016/demo/javascript23/img/3.jpg” alt=”广告三” /></a></li>
            <li><a href=”#”><img src=”http://www.bird100.cn/wp-content/uploads/2016/demo/javascript23/img/4.jpg” alt=”广告四” /></a></li>
            <li><a href=”#”><img src=”http://www.bird100.cn/wp-content/uploads/2016/demo/javascript23/img/5.jpg” alt=”广告五” /></a></li>
        </ul>
    </div>
</body>
</html>
web前端开发所需技能
前端开发要掌握的技能
前端掌握开发技能描述
» 本文来自：前端开发者 » 《前端图片轮播带弹性效果》
» 本文链接地址：https://www.rokub.com/6298.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论