个人中心
gpt4 book ai didi

javascript - 如何使用 javascript/jquery 动态更改图像？

转载 作者：塔克拉玛干 更新时间：2023-11-02 22:37:22 24 4
gpt4 key购买 nike

所以，我有这个 http://jsfiddle.net/ithril/UjGhE/1/请检查一下。

我在这里尝试的是将主图像 img 标记的 src 动态更改为与单击的图像相同的 src 属性。简而言之，无论单击哪个图像，它都会显示在具有 id="main-photo"的较大窗口中。

最佳答案

我看到我的原始代码已经做到了这一点:)因为没有人接受，所以我会尽力而为。我会再次给你一些关于一般问题的指示:

  1. 您的超链接标签 ( <a> ) 未关闭。这肯定会产生验证错误。您可以训练您的 html 技能 validating yourself regularly (听起来很脏吧？)
  2. 在 .main-photo img {} position:relative:不以 ;' 结尾
  3. 在你的.slider-large-image li img {} , margin: 10px没有关闭!

注意事项

  • 您可以将此问题添加到您原来的问题中。我很乐意添加此功能:)
  • 我再次更正了您的代码。
  • 在轮播列表中使用超链接是否有充分的理由？我删除了标签，因为它们使事情不必要地变得复杂。您应该对上一个和下一个触发器执行相同的操作。
  • 我不打算修改布局。你可以自己想办法:)
  • 麦莉摇滚!
  • 我添加了默认图片，所以当页面第一次加载时 -- 不会有空容器。

现场演示

http://jsfiddle.net/hobobne/K439d/

完整版代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>How to dynamically change an image using javascript/jquery? - Kalle H. Väravas</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style>
        html, body {margin: 0px; padding: 0px;}
                html, body, div, th, td, p, a {font-family: "Comic Sans MS", cursive; font-size: 12px; color: #000000;}
                .cb {clear: both;}
                #wrapper {width: 400px; margin: 0px auto;}
                    .main-photo{width: 80%; height: 400px; position: relative; border: 1px solid #000000;}
                        .main-photo img {width:100%; height:100%; position:relative; top: 0; left: 0px;}
                    .main-slider {float: left; position: relative; margin-bottom: 10px; border: 0px solid #000; top: 25px; left: 0px; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 0px 30px 1px #999; -webkit-box-shadow: 0px 0px 30px 1px #999; box-shadow: 0px 0px 30px 1px #999; padding: 0px; color: #FFF; text-align: center; text-decoration: none; /*background-color: #CCC;*/}
                    .window {width: 700px; height: 230px; overflow: hidden; position: relative;}
                        .slider-large-image {position: relative; overflow: hidden; float: left; list-style-type: none; margin: 0px; padding: 0px;}
                            .slider-large-image li {margin: 0px; padding: 0px; float: left; display: inline-block;}
                                .slider-large-image li img {float: left; width: 200px; height: 150px; margin: 10px; cursor: pointer;}
                    .slider-pager {position: relative; z-index: 2; margin: -40px auto 0px;}
                        .slider-pager a {margin: 0px 2px; padding: 2px; text-align: center; text-decoration: none; font-size: 20px; font-weight: bold; color: #ccc;}
                            .slider-pager a:hover,
                            .slider-pager a:active {background-color: #999; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
                            .slider-pager a:hover {color: black;}
                            .slider-pager a.active {/* background-color and border-radius used to be here.. */}
    </style>
</head>
<body>
    <div id="wrapper">
        <div class="main-photo">
            <img id="mainphoto" src="http://www.insanemom.net/wp-content/uploads/miley-cyrus-smoking-bong.jpg" />
        </div>
        <div class="main-slider">
            <div class="window">
                <ul class="slider-large-image">
                    <li><img src="http://images.sneakhype.com/wp-content/uploads/2010/12/Miley-Cyrus-300x200.jpg" /></li>
                    <li><img src="http://wa2.www.3news.co.nz/Portals/0-Articles/185340/miley-cyrus_reuters_420.jpg?width=300" /></li>
                    <li><img src="http://cdn.buzznet.com/media/jjr/headlines/2009/03/miley-cyrus-ryan-seacrest.jpg" /></li>
                    <li><img src="http://images.smh.com.au/2010/12/29/2112265/miley_cyrus_400-300x200.jpg" /></li>
                </ul>
            </div>
            <div class="slider-pager"><a href="#" id="b">&lsaquo;</a><a href="#" id="f">&rsaquo;</a></div>
        </div>
        <br class="cb" />
    </div>
    <script>
        $(document).ready(function() {
            var imagewidth = $('.slider-large-image li').outerWidth();
            var imagesum = $('.slider-large-image li img').size();
            var imagereelwidth = imagewidth * imagesum;
            $(".slider-large-image").css({'width' : imagereelwidth});
            $('.slider-large-image li:first').before($('.slider-large-image li:last'));
            $('.slider-large-image').css({'left' : '-' + imagewidth + 'px'});
            rotatef = function (imagewidth) {
                var left_indent = parseInt($('.slider-large-image').css('left')) - imagewidth;
                $('.slider-large-image:not(:animated)').animate({'left' : left_indent}, 500, function() {
                    $('.slider-large-image li:last').after($('.slider-large-image li:first'));
                    $('.slider-large-image').css({'left' : '-' + imagewidth + 'px'});
                });
            };
            rotateb = function (imagewidth) {
                var left_indent = parseInt($('.slider-large-image').css('left')) + imagewidth;       
                $('.slider-large-image:not(:animated)').animate({'left' : left_indent}, 500, function(){               
                    $('.slider-large-image li:first').before($('.slider-large-image li:last'));
                    $('.slider-large-image').css({'left' : '-' + imagewidth + 'px'});
                });
            };
            $(".slider-pager a#b").click(function () {
                rotateb(imagewidth);
                return false;
            });
            $(".slider-pager a#f").click(function () {
                rotatef(imagewidth);
                return false;
            });
            $(".slider-large-image li img").click(function() {
                $(".main-photo img").attr("src", $(this).attr('src'));
            });
        });
    </script>
</body>
</html>

关于javascript - 如何使用 javascript/jquery 动态更改图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6973927/

24 4 0
文章推荐： javascript - 保管箱 jsonp 文件
文章推荐： Android - 在 Android 2.2 + 中实现抽屉导航
文章推荐： android - Google 游戏服务排行榜的监听器
文章推荐： javascript - 插入一个在已注册之前执行的 JQuery 单击处理程序
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com