1

問題が発生していますが、答えが見つからないようです。もちろん、スライダー パネルを作成するために、sliderjs.com のsliderjs を使用します。このスクリプトは、ハードコーディングされた html (

  • 要素は nicesliding パネルでレンダリングされます)。

    これらの ul、li 要素を JavaScript で動的に挿入したいと思います。問題は、sliderjs が新しく挿入されたコードを正しくフォーマットしていないことです。私は何を間違っていますか、これを修正するにはどうすればよいですか。どんな助けでも大歓迎です。スライド パネルは電話デバイスでのみ機能します.....

    これをハードコードするとうまくいく

    <div id='slider' class='swipe' style='width:150px'>
<ul>
<li style='display:block'><div>1</div></li>
<li style='display:none'><div>2</div></li>
<li style='display:none'><div>3</div></li>
<li style='display:none'><div>4</div></li>
<li style='display:none'><div>5</div></li>
</ul>
</div>

    これは、機能していない JavaScript を使用した私の完全なコードです。

     <html>
<head>
    <title></title>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" name="viewport" />
    <style type="text/css">
        html{background-color:transparent;height:100%;width:100%;}
        body{background-color:transparent;font-size:11pt;font-family:helvetica;}
        img{border:0px;}        </style>
    <link rel="stylesheet" href="BTA_Blog_Leather_colors/brown/BTA_Blog_Leather_brown.css" type="text/css" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                          if ($(".date").text() === "--")
                          $(".datecontainer").hide();
                          if($('.thevideo iframe').attr('src') === ""){
                          console.log('11');
                          $(".videocontainer").hide();
                          }

                          var names = "http://profile.ak.fbcdn.net/hprofile-ak-snc4/187660_100002435611825_501947_q.jpg,http://www.deerns.nl/gfx/image.phtml?image=/images/_images_2012_website/employees/Nederland/Martijn%20Timmer_DIE2082.jpg&width=50&height=50&type=crop,http://profile.ak.fbcdn.net/hprofile-ak-snc4/187660_100002435611825_501947_q.jpg";

var namesArray = names.split(",");
var item, items = [];

for (var i = 0; i < namesArray.length; i++) {
    item = {};
    item.name = namesArray[i];
    items.push(item);
}

var main = $("<ul>");
var str = "<li style='display:block;'><div><img src='http://profile.ak.fbcdn.net/hprofile-ak-snc4/187660_100002435611825_501947_q.jpg' /></div></li>";
for (var i = 0; i < items.length; i++) {
    str += "<li style='display:none;'><div><img src='" + items[i].name + "' /></div></li></ul>";

}
main.html(str);
        $('#slider').append(main);

                          });
        </script>
</head>
<body>
    <div id="container">
        <div class="navbar">
            <div class="titlebox">
                <div class="title">Gaat Europa het redden met de Euro? en met weet ik wat nog allemaal</div>
            </div><!-- end titlebox -->
        </div><!-- end navbar -->
        <div id="body">
            <div class="header">
                <div class="theimage">
                    <div class="imagecontainer">
                        <div class="image"><!-- <img src="http://www.celfoon.nl/bt-addons/testimage130x130.png" /> -->
                            <div class="datecontainer">
                                <div class="monthcontainer">
                                    <div class="dmonth">[[DATEMONTH]]
                                    </div> <!-- en monthcontainer -->
                                    <div class="daycontainer">
                                        <div class="dday">[[DATEDAY]]
                                        </div><!-- end daycontainer -->
                                        <div class="yearcontainer">
                                            <div class="dyear">[[DATEYEAR]]
                                            </div> <!-- end yearcontainer -->
                                        </div>
                                    </div>
                                </div>
                            </div><!-- end datecontainer -->
                        </div>
                    </div>
                </div><!--end theimage -->
            </div><!-- end header -->   
            <div class="content">

                <div class="introtextcontainer">
                    <div class="introtext">
        <div id='slider' class='swipe'>

</div>
<a href='#' onclick='slider.prev();return false;'>prev</a>
<a href='#' onclick='slider.next();return false;'>next</a>
<br><br>
                    </div>
                </div>
                <div class="fulltextcontainer">
                    <div class="fulltext">
                        [[FULLTEXT]]
                    </div><!--end fulltext-->
                </div><!--end fulltextcontainer-->


                <div class="videocontainer">
                    <div class="thevideo">
                        <iframe allowfullscreen="" frameborder="0" height="174" src="[[YOUTUBE]]" width="280"></iframe>
                    </div><!-- end videocontainer -->
                </div><!-- end thevideo -->                 
            </div><!-- end content -->
        </div><!-- end body -->
        <div id="footer">
            <div class="footertextcontainer">
                <div class="footertext">[[FOOTERTEXT]]

                </div>

            </div>
        </div>
    </div><!-- end container -->
    <script src='swipe.js'></script>
<script>
new Swipe(document.getElementById('slider'));
new Swipe(document.getElementById('slider2'));
var slider = new Swipe(document.getElementById('slider'));
var slider3 = new Swipe(document.getElementById('slider3'));
var slider4 = new Swipe(document.getElementById('slider4'));
</script>
</body>
</html>
    • 4

    0 に答える 0