0

我正在使用这个链接中的这个 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; 
}

输出是这样的

当前输出

但我想像这样得到它

刷卡前

在刷卡时，我应该像这样得到它

在此处输入图像描述

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

编辑：我在样式之后和 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
 });

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

4

1 回答 1

2

您的代码中没有 Jquery，只有本机 javascript。

我建议你看看这个插件。http://plugins.jquery.com/jcarousel/ 这是一个 jquery 轮播。我已经使用过它，它很简单，有据可查且灵活。点击右上角的“查看主页”，在开发者页面查看demo。

在此处编辑使用 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.

于 2013-05-17T12:17:16.663 回答