网页实现图片滚动

卖卖123 2018-07-02 09:41:36

本人刚学网页，在网上下载了一份代码，后把图片的宽度和高度修改之后，图片只会显示第一张图片，后面的只有滚动没有图片。大神们帮忙看一下。



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>测试文件</title>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <style type="text/css">

        *{ padding:0px; margin:0px;list-style:none;}

        .banner { width:1422px; height:500px; margin:100px auto; border:1px solid #808080; position:relative; overflow:hidden;}

        .banner .img{width:1422px; position:absolute; left:0px;top:0px;}

        .banner .img img{width:1422px; height:500px;}

        .banner .img li{float:left;}

        .banner .num { position:absolute; width:100%; bottom:10px; left:0px; text-align:center; font-size:0px;}

        .banner .num li { width:10px; height:10px; background-color:#888; border-radius:50%;display:inline-block; margin:0px 3px; cursor:pointer;}

        .banner .num li.on {background-color: #ff6a00;}

        .banner .btn {width: 30px;height: 50px;background-color: #808080;opacity: 0.5; filter:alpha(opacity:0.5); position:absolute;top:50%; margin-top:-25px;

            cursor:pointer;

            text-align:center;

            line-height:50px;

            font-size:40px;

            color:#fff;

            font-family:"宋体";

            display:none;

        }

        .banner .btn_l { left:0px;}

        .banner .btn_r { right:0px;}

        .banner:hover .btn { display:block;}

    </style>

    <script type="text/javascript">



        $(document).ready(function () {



            var i = 0;



            var clone = $(".banner .img li").first().clone();//克隆第一张图片

            $(".banner .img").append(clone);//复制到列表最后

            var size = $(".banner .img li").size();

            console.log(size);





            for (var j = 0; j < size-1; j++) {

                $(".banner .num").append("<li></li>");

            }



            $(".banner .num li").first().addClass("on");



            /*自动轮播*/



            var t = setInterval(function () { i++; move();},2000);



            /*鼠标悬停事件*/



            $(".banner").hover(function () {

                clearInterval(t);//鼠标悬停时清除定时器

            }, function () {

                t = setInterval(function () { i++; move(); }, 2000); //鼠标移出时清除定时器

            });



            /*鼠标滑入原点事件*/



            $(".banner .num li").hover(function () {



                var index = $(this).index();//获取当前索引值

                i = index;

                $(".banner .img").stop().animate({ left: -index * 1422 }, 500);

                $(this).addClass("on").siblings().removeClass("on");

            });



            /*向左按钮*/

            $(".banner .btn_l").click(function () {

                i++;

                move();

            })



            /*向右按钮*/

            $(".banner .btn_r").click(function () {

                i--;

                move();

            })



            /*移动事件*/

            function move() {

                if (i == size) {

                    $(".banner .img").css({ left: 0 });

                    i = 1;

                }

                if (i == -1) {

                    $(".banner .img").css({ left: -(size - 1) * 1422 });

                    i = size - 2;

                }

                $(".banner .img").stop().animate({ left: -i * 1422 }, 500);



                if (i == size - 1) {

                    $(".banner .num li").eq(0).addClass("on").siblings().removeClass("on");

                } else {

                    $(".banner .num li").eq(i).addClass("on").siblings().removeClass("on");

                }

            }

        });





    </script>

</head>

<body>

<div class="banner">

    <ul class="img">

        <li><img src="https://img-bbs.csdn.net/upload/201807/02/1530495519_843956.jpg" alt=""/></li>

        <li><img src="https://img-bbs.csdn.net/upload/201807/02/1530495549_595430.jpg" alt="" /></li>

        <li><img src="https://img-bbs.csdn.net/upload/201807/02/1530495556_168930.jpg" alt="" /></li>

        <li><img src="https://img-bbs.csdn.net/upload/201807/02/1530495563_111554.jpg" alt="" /></li>

    </ul>

    <ul class="num">



    </ul>

    <div class="btn btn_l"><</div>

    <div class="btn btn_r">></div>

</div>

</body>

</html>