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

Posted 精密～顽石

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了滚动轮播效果，.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>

 

以上是关于滚动轮播效果，.net 没得混看来只能去写js 了的主要内容，如果未能解决你的问题，请参考以下文章

H5滚动轮播插件

天猫京东app中常见的上下滚动轮播效果如何实现？

UIDatePickerView实现时间滚动轮播效果

JS纯生实现无缝滚动轮播图

用贪吃蛇小游戏的思路手写一个无限循环滚动轮播图

js原生选项（包含无缝滚动轮播图）一