我有一個問題,當我嘗試將我的網站更改爲角應用程序。 我有一些jquery滑塊,當我把我的網站分成部分和我使用角JS鏈接他們我沒有工作,我不知道是什麼問題。jquery不能使用角
它採用了棱角分明這病鏈接這是我的帳篷代碼在我的主頁:
<div class="marquee">
<div class="marquee_data">
<!-- FIRST PANEL-->
<div class="marquee_panel" data-image="images/sliderImages/photo_beach">
<h3>Secluded beaches</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="cta" href="">Learn more</a>
</div>
<!-- SECOND PANEL-->
<div class="marquee_panel" data-image="images/sliderImages/photo_city">
<h3>Beautiful cityscape</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a class="cta" href="">Learn more</a>
</div>
<!-- THIRD PANEL-->
<div class="marquee_panel" data-image="images/sliderImages/photo_mountains">
<h3>Magestic mountain peaks</h3>
<p>Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia.</p>
<a class="cta" href="">Learn more</a>
</div>
</div>
</div>
,這就是它的jQuery的:我是我的JS在指數
/* JavaScript Document */
var marqueeVars = {
screenSize : '',
width : 0,
mobileSize : 600,
autoPlay : 'true',
currentPanel : 1,
totalPanels : 0,
timePassed : 0,
timeToChange : 30,
duration : 1250,
inTransition : false,
panelContent : Array
};
jQuery.noConflict();
$(document).ready(function(){
marqueeGatherData();
});
function marqueeGatherData(){
$('.marquee_data .marquee_panel').each(function(index){
// WE are counting the panels
marqueeVars.totalPanels = index + 1;
var panel_image_l = $(this).attr('data-image')+'_l.jpg';
var panel_image_s = $(this).attr('data-image')+'_s.jpg';
var panel_caption = $(this).html();
marqueeVars.panelContent[index] = '<div class="marquee_panel" data-image-s="'+panel_image_s+'" style="background-image:url('+panel_image_l+');"><div class="overlay"></div><div class="panel_caption">'+panel_caption+'</div></div>';
// alert(panel_image_l);
});
var maqueeTimer = setInterval(marqueeAdvance,100);
}
function marqueeAdvance(){
var marqueeWidth = $('.marquee').width();
var currentSize = marqueeVars.screenSize;
if(marqueeWidth > marqueeVars.mobileSize){
var newSize = 'large';
}else{
var newSize = 'small';
}
marqueeVars.screenSize = newSize;
if(currentSize != newSize){
if(marqueeVars.screenSize == 'large'){
marqueeMultipanel();
}else{
marqueeSinglePanel();
}
}
if (marqueeVars.timePassed == marqueeVars.timeToChange){
marqueeVars.timePassed = 0;
if(marqueeVars.autoPlay == true){
if(marqueeVars.currentPanel == marqueeVars.totalPanels){
$('.marquee_nav div:nth-child(1)').trigger('click');
}else{
$('.marquee_nav div:nth-child('+(marqueeVars.currentPanel+1)+')').trigger('click');
}
}
}else{
marqueeVars.timePassed += 1;
}
}
function marqueeMultipanel(){
marqueeVars.timePassed = 0;
marqueeVars.autoPlay = true;
var newHTML = '<div class="marquee_stage_large"><div class="marquee_container_1"></div><div class="marquee_nav"></div><div class="btn prev"></div><div class="btn next"></div></div>';
$('.marquee').html('').append(newHTML);
for(i=0; i<marqueeVars.totalPanels; i++){
$('.marquee_nav').append('<div></div>');
}
$('.marquee').hover(function(){
marqueeVars.autoPlay = false;
},function(){
marqueeVars.autoPlay = true;
marqueeVars.timePassed = Math.floor(marqueeVars.timeToChange/2);
});
$('.marquee .btn').on('click',function(){
if(!marqueeVars.inTransition){
if($(this).hasClass('prev')){
marqueeVars.currentPanel -= 1;
if(marqueeVars.currentPanel < 1){
marqueeVars.currentPanel = marqueeVars.totalPanels;
}
}else{
marqueeVars.currentPanel += 1;
if(marqueeVars.currentPanel > marqueeVars.totalPanels){
marqueeVars.currentPanel = 1;
}
}
$('.marquee_nav div:nth-child('+marqueeVars.currentPanel+')').trigger('click');
}
});
$('.marquee_nav div').on('click',function(){
// tell which one is selected clicked
if(!marqueeVars.inTransition){
marqueeVars.inTransition = true;
var navClicked = $(this).index();
marqueeVars.currentPanel = navClicked + 1;
$('.marquee_nav div').removeClass('selected');
$(this).addClass('selected');
$('.marquee_stage_large').append('<div class="marquee_container_2" style="opacity:0;"></div>');
$('.marquee_container_2').html(marqueeVars.panelContent[navClicked]).animate({opacity:1},marqueeVars.duration,function(){
$('.marquee_container_1').remove();
$(this).addClass('marquee_container_1').removeClass('marquee_container_2');
marqueeVars.inTransition = false;
});
}
});
$('.marquee_nav div:first').trigger('click');
}
function marqueeSinglePanel(){
$('.marquee').html('').append('<div class="marquee_stage_small">'+marqueeVars.panelContent[0]+'</div>');
var panel_image_s = $('.marquee .marquee_stage_small .marquee_panel').attr('data-image-s');
$('.marquee .marquee_stage_small .marquee_panel').css('background-image','url('+panel_image_s+')')
}
//debugger
//
//var debugTimer = setInterval(setDebugger,100);
//
//function setDebugger(){
//
//
// $('.var1').html('screenSize = '+marqueeVars.screenSize);
//
// $('.var2').html('width = '+marqueeVars.width);
// $('.var3').html('mobileSize = '+marqueeVars.mobileSize);
//
// $('.var4').html('autoPlay = '+marqueeVars.autoPlay);
//
// $('.var5').html('currentPanel = '+marqueeVars.currentPanel);
//
// $('.var6').html('totalPanels = '+marqueeVars.totalPanels);
//
// $('.var7').html('timePassed = '+marqueeVars.timePassed);
//
// $('.var8').html('timeToChange = '+marqueeVars.timeToChange);
// $('.var9').html('duration = '+marqueeVars.duration);
// $('.var10').html('inTransition = '+marqueeVars.inTransition);
//
//
//
//}
這裏前來角度
<script type="text/javascript" src="js/includes/marquee.js"></script>
我的網頁頁面,我的角,做工精細,但我不知道爲什麼Jquery的不要工作
任何人都可以請幫我我做什麼
我把創建了一個指令,我打電話給我的功能在jQuery的,但它仍然不工作myprojectApp.directive(「sliderMarquee」,函數(){ 回報{ 限制:「A」, 鏈接:功能(範圍,元素,attrs){ }; };(元素).marqueeGatherData(範圍。$ eval和多數民衆當我使用該指令在
–