Question

我从this教程做了一个旋转木马，我希望第一张图片很大，当我点击下一张图片时，下一张图片会显示在大图片上以及图片点击图片时在大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%";
        });

但我的问题是如何获取网址或第一张图片然后我想出了这个

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

但是当警报显示它显示未定义时...非常感谢您解释如何制作这个或教程会很棒..如果您知道如何制作像this这样的画廊，那将是非常棒的。像苹果商店一样制作一个图像库真的很酷..

更新： 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>

Answer 1

img 标记在li里面，所以你必须这样做：

 alert($('#carousel_ul li:first img').attr("src"));

FIDDLE DEMO

你可以这样在div上设置它：

$("#bigimage_container").css("background-image","url('"+$('#carousel_ul li:first img').attr("src")+"')")

UPDATED FIDDLE

Answer 2

document.getElementById("bigimage_container").style.background = 'url('+$('#carousel_ul li:first img').attr("src") +') ';
            document.getElementById("bigimage_container").style.backgroundPosition = "center center";
            document.getElementById("bigimage_container").style.backgroundRepeat = "no-repeat";
            document.getElementById("bigimage_container").style.backgroundSize = "100% 100%";

根据先生Ehsan Sajjad的回答......这对我有用

图像库使第一张图像变大

2 个答案: