论坛 › Web开发 › 想问下谁有轮播图的代码

Python初学 发表于 2016-7-13 21:57:44

想问下谁有轮播图的代码

想问下谁有轮播图的代码，

鹰搏空 发表于 2016-7-13 22:50:41

html:
<div id="box">
                <ul>
                        <li class="color1 active"></li>
                        <li class="color2"></li>
                        <li class="color3"></li>
                        <li class="color4"></li>
                </ul>
        </div>
css:
*{
                        padding:0;
                        margin:0;
                }
                #box{
                        width: 800px;
                        height: 400px;
                        margin: 100px auto;
                }
                ul,li{
                        width: 100%;
                        height: 100%;
                }
                li{
                        list-style: none;
                        display: none;
                }
                .color1{
                        background: #F00;
                }
                .color2{
                        background: #FF0;
                }
                .color3{
                        background: #0F0;
                }

                .color4{
                        background: #DDD;
                }
                #box li.active{
                        display: block;
                }
js:
<script type="text/javascript">
                var $li = $("#box ul li");
                var timer = null;
               
                console.log($li);
                function autoPlay(){
                        var index_ = 0;
                        timer = setInterval(function(){
                                $li.eq(index_).addClass('active').siblings('li').removeClass('active');

                                index_ ++;

                                if (index_ >= $li.length) {
                                        index_ = 0;
                                }
                                console.log(index_);
                        },2000);
                }
                autoPlay();
               
        </script>


这个只是最简单的一种方法，你可以参考一下，不懂的欢迎提问

Python初学 发表于 2016-7-14 16:24:23

多谢啊。<script type="text/javascript">
function autoScroll () {
        var oRoll = document.getElementById('roll');
        var oUl = oRoll.getElementsByTagName('ul');
        var aLi = oUl.getElementsByTagName('li');
        var timer = null;
        var iSpeed = 2;

        oUl.innerHTML += oUl.innerHTML;
        oUl.style.width = aLi.length * aLi.offsetWidth + 'px';

        timer = setInterval(init,35);

        oUl.onmouseover = function () {
                clearInterval(timer);
        };

        oUl.onmouseout = function () {
                timer = setInterval(init,35);
        };

        function init () {
                oUl.style.left = oUl.offsetLeft - iSpeed + 'px';
                if (oUl.offsetLeft < -oUl.offsetWidth/2) {
                        oUl.style.left = 0;
                }
        }
}       
autoScroll();
</script>

这一串是啥意思，我在百度上搜是说 上下滚动？

肖采 发表于 2016-7-17 11:58:03

鹰搏空 发表于 2016-7-13 22:50
html:

css:


没明白您的那个$函数是什么意思

鹰搏空 发表于 2016-7-18 15:47:02

肖采 发表于 2016-7-17 11:58
没明白您的那个$函数是什么意思

$()是jQuery

鹰搏空 发表于 2016-7-18 15:50:01

Python初学 发表于 2016-7-14 16:24
多谢啊。
function autoScroll () {
        var oRoll = document.getElementById('roll');


这一串应该是做无缝滚动的吧，是左右滚动

肖采 发表于 2016-7-22 13:16:35

各位楼上的鱼友谢谢

肖采 发表于 2016-7-22 13:44:45

鹰搏空 发表于 2016-7-18 15:47
$()是jQuery

谢谢

查看完整版本: 想问下谁有轮播图的代码