Let the storm money come!

滚动轮播效果，.net 没得混看来只能去写js 了 

<!DOCTYPE html>
<html>
<head>
    <title>
        滚动图片
    </title>
    <style type="text/css">
        .imageBox{
            height: 438px;
            width: 960px;
            overflow: hidden;
            position:relative;
            margin: auto;
        }
        .scrollContainer{
            width: 4800px;
            height: 438px;
            padding: 0px;
            position: absolute;
            top: 0px;
            left:0px;
        }
        .scrollImg{
            width: 960px;
            height: 435px;
        }
        .scrollContainer li{
            float: left;
            display: list-item;
        }
        .content{
            margin: auto;
        }
    </style>
    <meta charset="utf-8" />
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
</head>
<body>
    <div class="content">
        <div class="imageBox">
            <ul class="scrollContainer">
                <li>
                    <img class="scrollImg" src="http://www.gettyimagesgallery.com/Images/services/ph_01.jpg" />
                </li>
                <li>
                    <img class="scrollImg" src="http://www.gettyimagesgallery.com/Images/services/ph_02.jpg" />
                </li>
                <li>
                    <img class="scrollImg" src="http://www.gettyimagesgallery.com/Images/services/ph_03.jpg" />
                </li>
                <li>
                    <img class="scrollImg" src="http://www.gettyimagesgallery.com/Images/services/ph_04.jpg" />
                </li>
                <li>
                    <img class="scrollImg" src="http://www.gettyimagesgallery.com/Images/services/ph_01.jpg" />
                </li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        var baseNum = 960;
        var imgNum = 5, initNum = 0;
        var interval = setInterval(function(){
            if(initNum == imgNum){
                initNum = 0;
                $(".scrollContainer").css({"marginLeft" : "0px"});
            }
            $(".scrollContainer").animate({"marginLeft": -baseNum * initNum + "px"}, 1500);
            initNum++;
        }, 2000);
        

        
    </script>
</body>
</html>

 

posted @ 2016-12-27 22:56  精密～顽石  阅读(495)  评论(0)  编辑  收藏  举报
在通往地狱的路上，加班能使你更快到达。