图片库将第一张图片放大

我从本教程中制作了一个轮播图片，我希望第一张图片较大，当我单击“下一步”时，下一张图片将显示在大div上，当单击该图片时，该图片将显示在大div中尝试过这样的事情

$("bigimage_container").ready(function() {
            document.getElementById("bigimage_container").style.background = 'url('+  +') ';
            document.getElementById("bigimage_container").style.backgroundPosition = "center center";
            document.getElementById("bigimage_container").style.backgroundRepeat = "no-repeat";
            document.getElementById("bigimage_container").style.backgroundSize = "100% 100%";
        });

但我的问题是如何获取url或第一个图像，然后我想到了这个

$('#carousel_ul li:first').each(function() {
        alert($(this).attr('src'))
        });

但是当警报显示时，它表示未定义..任何帮助表示赞赏，请说明如何制作此教程或教程将非常有用..如果您知道如何制作像这样的画廊，那将是非常棒的..像这样制作图片画廊苹果商店真的很棒。

更新：html

<div id="bigimage_container"></div>
        <div id='carousel_container'>
          <div id='left_scroll'><img src='left.png' /></div>
            <div id='carousel_inner'>
                <ul id='carousel_ul'>
                    <li><a href='#'><img src='1.png' /></a></li>
                    <li><a href='#'><img src='2.png' /></a></li>
                    <li><a href='#'><img src='3.png' /></a></li>
                    <li><a href='#'><img src='4.png' /></a></li>
                    <li><a href='#'><img src='5.png' /></a></li>
                </ul>
            </div>
          <div id='right_scroll'><img src='right.png' /></div>
          </div>