如何在JavaScript中创建的div元素实现一个JavaScript？

我使用这个JavaScript从this link。如何在JavaScript中创建的div元素实现一个JavaScript？

.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; 
}

输出谈到：

我曾尝试使用下面的代码

<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代码中创建在JavaScript中一个新的div元素像这样

，但我想获得像这样

上刷卡我应该得到它像这样

请给我建议的方式来解决这个问题..

编辑：我已经给出了以下代码后的风格和之前的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 });

唯一的改进是，只有第一个幻灯片是存在的，它不刷卡。

来源

2013-05-17 user

你在哪里[初始化刷卡（http://www.idangero.us/sliders/swiper/api.php）创建其内容的？ – Bergi

是的，那是什么'刷卡，demos.js'的事情吗？用法文档说你需要一个CSS和一个js文件。 – Bergi

@ BERGI，请编辑version.yeah我刚才看你建议的文件......所以现在我很困惑，我在那里应该有这些2码'document.querySelector（“刷卡容器”） '和'变种mySwiper =新组队，探索（ '刷卡容器。'，{ \t速度：750， \t模式： '垂直' }）。'该第二代码看起来像**自动滑动**我的结论这是因为有一个速度参数。 – user

你的代码中没有Jquery，只有本地JavaScript。

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

编辑这里使用的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-17 12:17:16 TCHdvlp

TCHdvlp，谢谢！我对Jquery没有任何帮助。我是Java Script的新手。 – user

如何在JavaScript中创建的div元素实现一个JavaScript？

回答

相关问题