2013-05-20 53 views
0

我正在做一個項目在Phone Gap-android.I在java腳本中實現函數。我使用this實現了SWIPE VIEW。如何實現動態幻燈片創建-javascript?

現在,我將分享我用來實現這個的代碼,以便它可以幫助您找出我的錯誤。

var mySwiper = new Swiper('.swiper-container',{ 
//Your options here: 
mode:'horizontal',loop: true, speed : 500, freeMode : true, freeModeFluid : true, 
}); 

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

現在,我的輸出是不希望的一個。

只顯示1張幻燈片。滑動功能未執行,其餘的其他值無法看到。

我該怎麼辦? 請指導我!!

第二個選擇,我實現瞭如下(無輕掃意見後):

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'); 
      superdiv.appendChild(newdiv); 
    --->  var cnt1 ="var newSlide = mySwiper.createSlide('<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>', 'swiper-slide', 'span'); 
      document.getElementById(divIdName).innerHTML=cnt1; 
      document.querySelector('.swiper-slide'); 
      console.log("split value: "+value[k]);  

輸出錯誤我得到的是

05-20 12:11:20.214: E/Web Console(6855): Uncaught SyntaxError: Unexpected identifier at file:///android_asset/www/clinical.html?var%20id=0:171 (the line differentiated with an arrow) 

最重要的事實是, ,所有5個值都顯示在LOG.BUT中,正在觀看1張幻燈片。

用簡單的語言刷卡功能不起作用。

+0

**任何解決方案請** – user

回答

0

在動態創建時再次撥打reInit與您的Swiper聯繫。 在我的情況下,該產品有各種顏色實例,第一個加載正常工作,通過點擊顏色動態加載新內容,swiper插件無法檢測到新添加的dom。

的解決方法是調用reInit();

使用情況

var mySwiper = new Swiper('.swiper-container', {}); 

function dynamic_content(){mySwiper.reInit();} 
0

可能爲時已晚,但似乎對方的回答是,因爲更新的過時。對我來說,下面這行工作

mySwiper.appendSlide('<div class="swiper-slide">My Slides"</div>')