Question

我正在使用this link中的这个javascript。

我使用以下代码在javascript中创建了一个新的div元素

<script type="text/javascript" src="idangerous.swiper-1.9.1.min.js"></script>
<script type="text/javascript" src="swiper-demos.js"></script>
 value= VALUE_FROM_DB.split("||");
 for (k=0;k<value.length;k++)
 {
    if (value[0] == paramName1)
   {
      return unescape(value[k]);
      console.log("no of swipe views ");
   }
    var val = k+1;
    var superdiv = document.getElementById('swiper-wrapper');
    var newdiv = document.createElement('div');
    var divIdName = 'swiper-slide'+val;
    console.log("div name: "+divIdName);
    newdiv.setAttribute('id',divIdName);
    newdiv.setAttribute('class','swiper-slide');
    newdiv.style.width = "25%";
newdiv.style.height = "30%";
    superdiv.appendChild(newdiv);
    var cnt1 = '<div id="container" class="container"><span><img src="img/cause_'+val+'.png" style="float:left;"></span><div id="clinicals'+val+'" class="clinical"><span ><h5>'+value[k]+'</h5></span></div></div>';
    console.log("check value"+cnt1);
    document.getElementById(divIdName).innerHTML=cnt1;
    console.log("clinical values: "+value[k]);
console.log("processsing parameter loop ");
var searchString = window.location.search.substring(1),i,val,params = searchString.split("&");
}

html代码

<div id="swipe_body">
    <div class="swiper-container swiper-threshold">
        <div class="swiper-wrapper" id="swiper-wrapper">

        </div>
    </div>
</div>

css代码：

.clinical       
{
    font-size:15px;text-justify:inter-word;margin-right:10px; margin-left:10px; margin-top:10px; margin-right:10px; margin-bottom:10px;
}
.container
{
 background:url(img/value_bg.png) no-repeat scroll 0 0 transparent; background-size:100% 100%; display:block; width:304px; height:250px;text-align:justify;
}
.container span
{
 width:auto; height:30%; display:block; overflow:hidden;float:left; 
}

输出就像这样

current out put

但我希望得到这样的

before SWIPING

在滑动时我应该像这样得到它

enter image description here

请建议我解决这个问题的方法..

编辑：我在样式之后和javascript之前给出了以下代码。

</style>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/idangerous.swiper.css" />
    <link rel="stylesheet" type="text/css" href="css/swiper-demos.css" />
    <script type="text/javascript" charset="utf=8" src="cordova-2.1.0.js"></script> 
    <script type="text/javascript" charset="utf-8" src="SQLitePlugin.js"></script>
    <script type="text/javascript" charset="utf-8" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="main.js"></script>
    <script type="text/javascript" src="idangerous.swiper-1.9.1.min.js"></script>
    <script type="text/javascript" src="swiper-demos.js"></script>
    <script type="text/javascript" charset="utf-8">

编辑2：

 var cnt1 = '<div id="container" class="container"><span><img    src="img/cause_'+val+'.png" style="float:left;"></span><div id="clinicals'+val+'" class="clinical"><span ><h5>'+value[k]+'</h5></span></div></div>';
 console.log("check value"+cnt1);
 document.getElementById(divIdName).innerHTML=cnt1;
 document.querySelector('.swiper-container');

我添加了此document.querySelector('.swiper-container');以及

function onDeviceReady() 
{   var mySwiper = new Swiper('.swiper-container',{
mode:'horizontal',loop: true
 });

唯一的改进是只有第一张幻灯片在那里，它没有滑动。

Answer 1

您的代码中没有Jquery，只有原生javascript。

我建议你看一下这个插件。http://plugins.jquery.com/jcarousel/ 这是一个jquery Carousel。我已经使用过它，它很简单，文档齐全，灵活。点击右上角的“查看主页”，然后在开发者页面中查看演示。

编辑这里有一个使用JCarousel帮助您的示例代码：

<script type="text/javascript" src="/path/to/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/path/to/lib/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />

<html>
    <body>
      <div id="swipe_body">
        <div class="swiper-container swiper-threshold" id="mycarousel">
          <div class="swiper-wrapper" id="swiper-wrapper">
              <div id="container1" class="container"><span><img...</span></div>';
              <div id="container2" class="container"><span><img...</span></div>';
              <div id="container3" class="container"><span><img...</span></div>';
              ... ...
          </div>
        </div>
      </div>
    </body>
</html>

<script>
   jQuery(document).ready(function() {
       jQuery('#mycarousel').jcarousel({
            // optional configuration goes here
       });
   });
</script>

正如你所看到的，只有2行jquery才能得到这个。您可以在上面给出的网址下载jquery.jcarousel.min.js。只需使用服务器中的数据创建几个竞争对手。请记住，避免将相同的id提供给不同的元素

for (k=0;k<value.length;k++){
    ...
   var cnt1 = '<div id="container" cla
    ...

他们都将拥有相同的id。

如何实现javascript到javascript中创建的div元素？

1 个答案: