zoukankan html css js c++ java

滚动轮播效果，.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>

查看全文

相关阅读:
KVC该机制
 JS多语种方式
 面试经典（1)---翻转字的顺序在一个句子
 正确Linux新手很实用20命令
 代码添加背景音乐的日记
 什么是比特币（Bitcoin）?
李开复：该算法的重要性
 javascript推断的浏览器类型
 libyuv编
 Linux下将UTF8编码批量转换成GB2312编码的方法

原文地址：https://www.cnblogs.com/zlfucku/p/6227831.html