不二如是 发表于 2017-3-29 16:26:32

已有 4 人购买  本主题需向作者支付 5 鱼币 才能浏览 购买主题

AroundTheFire 发表于 2018-2-27 19:39:17

that's coooool

继续思索 发表于 2019-5-25 11:22:57

本帖最后由 继续思索 于 2019-5-25 11:24 编辑

交一下作业，在请问一下各位鱼油，在轮播的时候，下边几个点，怎么不受控制的呢？
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>鱼C - 7周年庆典</title>
    <style type="text/css">
                *{
                        margin:0;
                        padding:0;
                }
               
                body{
                        background:#000;
                        margin:66px;
                       
                        font-family: "Abadi MT Condensed Extra Bold";
            color: rgba(255,255,255,.88);
            text-align: center;
                }
               
                h1{
                        font-size: 55px;
            align-content: center;
                }
               
                #show{
                        width:950px;
                        height:600px;
                       
                        overflow:hidden;
                        margin:0 auto;
                        position:relative;
                }
               
                #show ul,#show ul li,#show-nav{
                        list-style:none;
                        position:absolute;
                }
               
                #show-nav{
                        width:100%;
                        bottom:22px;
                        text-align:center;
                }
               
                #show-nav span{
                        display:inline-block;
                        user-select:none;
                        border-radius:50%;
                        width:13px;
                        height:13px;
                       
                        font-size:0;
                        background:rgba(255,255,255,.4);
                       
                        transition:all .6s;
                        margin:0 7px;
                       
                        cursor:hand;
                }
               
                #show-nav span.active{
                        background:#fff;
                }
               
    </style>
</head>
<body>
    <h1>鱼C - 7周年庆典</h1>
    <div id="show">
      <ul>
            <li><img src="1.jpg"></li>
            <li><img src="2.jpg"></li>
            <li><img src="3.jpg"></li>
            <li><img src="4.jpg"></li>
      </ul>
      <div id="show-nav"></div>
    </div>
    <script type="text/javascript" src="../jquery-2.1.4.min.js"></script>
        <script type="text/javascript">
                $(document).ready(function() {
                        var duration = 3000;                                                        
                        var speed = 4000;                                                                        
                        var width = $('#show').width();                          
                        var curIndex = 0;                                                                        
                        var totalIndex = $('#show > ul > li').length;                
                        var timer;                                                                                        
                       
                        $('#show > ul > li').each(function(index) {
                                $(this).css("left", index*width+"px");                                        
                                $('#show-nav').append("<span>"+(index+1)+"</span>");                
                        });
                       
                        $('#show-nav > span').each(function(index) {
                                $(this).attr("index", index);                                        
                                $(this).click(function(){                                                
                                        curIndex = $(this).attr("index")-1;                        
                                        clearTimeout(timer);
                                        move();
                        });
                       
                        $('#show-nav > span').eq(0).addClass("active");
                        var firstChild = $('#show > ul > li').eq(0).clone();
                        $('#show > ul').append(firstChild);        
                        firstChild.css("left", totalIndex*width+"px");
                       
                        function move(){
                                curIndex++;                
                                if(curIndex>totalIndex){        
                                        curIndex = 1;                        
                                        $('#show > ul').css("left", "0px");
                                }
                                for(var i=0; i < totalIndex; i++){
                                                $('#show-nav > span').eq(i).removeClass("active");
                                }
                                if(curIndex === totalIndex){
                                                $('#show-nav > span').eq(0).addClass("active");        
                                }else{
                                                $('#show-nav > span').eq(curIndex).addClass("active");        
                                }
                                $('#show > ul').animate({left:width*curIndex*-1+"px"},speed);        
                                timer = setTimeout(move,duration+speed);                                                                        
                        }
                        timer = setTimeout(move,duration);
                        });
                       
                });
        </script>
</script>
       
</body>
</html>

https://xxx.ilovefishc.com/album/201905/25/112144rhnnngxa73qk8qxq.jpg

小脑斧 发表于 2020-4-29 21:57:23


页: [1]
查看完整版本: 0 1 0 1 - 打造“鱼C庆典”轮播窗