Javascript 角度打断jQuery幻灯片_Javascript_Jquery_Html_Css_Angularjs

Javascript 角度打断jQuery幻灯片

javascript jquery html css angularjs

Javascript 角度打断jQuery幻灯片,javascript,jquery,html,css,angularjs,Javascript,Jquery,Html,Css,Angularjs,我正在做这个，在应用程序中加入angular之后，很多功能都被破坏了。A设法解决了很多问题，但我无法让这个幻灯片正常工作这是我的HTML <!doctype html>  <html lang="en"><!--<![endif]-

我正在做这个，在应用程序中加入angular之后，很多功能都被破坏了。A设法解决了很多问题，但我无法让这个幻灯片正常工作

这是我的HTML

<!doctype html>
<!--[if IE 9 ]><html class="ie9" lang="en"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<head>
    <link rel="icon" type="image/ico" href="images/fav.ico">
    <!--stylesheet include-->
    <link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="all" href="css/camera.css">
    <link rel="stylesheet" type="text/css" media="all" href="css/owl.carousel.css">
    <link rel="stylesheet" type="text/css" media="all" href="css/owl.transitions.css">
    <link rel="stylesheet" type="text/css" media="all" href="css/jquery.custom-scrollbar.css">
    <link rel="stylesheet" type="text/css" media="all" href="css/style.css">
    <link rel="stylesheet" type="text/css" media="all" href="css/lightbox.css">
    <!--font include-->
    <link href="css/font-awesome.min.css" rel="stylesheet">
</head>
<body ng-app="app">
<!--slider-->
<div class="camera_wrap m_bottom_0" ng-controller="slideShowCtrl" ng-show="slideShow()">
    <div data-src="images/slide_02.jpg" data-custom-thumb="images/slide_02.jpg">
        <div class="camera_caption_1 fadeFromTop t_align_c d_xs_none">
            <div class="f_size_large color_light tt_uppercase slider_title_3 m_bottom_5">Meet New Theme</div>
            <hr class="slider_divider d_inline_b m_bottom_5">
            <div class="color_light slider_title tt_uppercase t_align_c m_bottom_45 m_sm_bottom_20"><b>Attractive &amp; Elegant<br>HTML Theme</b></div>
            <div class="color_light slider_title_2 m_bottom_45">$<b>15.00</b></div>
            <a href="#" role="button" class="tr_all_hover button_type_4 bg_scheme_color color_light r_corners tt_uppercase">Buy Now</a>
        </div>
    </div>
    <div data-src="images/slide_01.jpg" data-custom-thumb="images/slide_01.jpg">
        <div class="camera_caption_2 fadeIn t_align_c d_xs_none">
            <div class="f_size_large tt_uppercase slider_title_3 scheme_color">New arrivals</div>
            <hr class="slider_divider type_2 m_bottom_5 d_inline_b">
            <div class="color_light slider_title tt_uppercase t_align_c m_bottom_65 m_sm_bottom_20"><b><span class="scheme_color">Spring/Summer 2014</span><br><span class="color_dark">Ready-To-Wear</span></b></div>
            <a href="#" role="button" class="d_sm_inline_b button_type_4 bg_scheme_color color_light r_corners tt_uppercase tr_all_hover">View Collection</a>
        </div>
    </div>
    <div data-src="images/slide_03.jpg" data-custom-thumb="images/slide_03.jpg">
        <div class="camera_caption_3 fadeFromTop t_align_c d_xs_none">
            <img src="images/slider_layer_img.png" alt="" class="m_bottom_5">
            <div class="color_light slider_title tt_uppercase t_align_c m_bottom_60 m_sm_bottom_20"><b class="color_dark">up to 70% off</b></div>
            <a href="#" role="button" class="d_sm_inline_b button_type_4 bg_scheme_color color_light r_corners tt_uppercase tr_all_hover">Shop Now</a>
        </div>
    </div>
</div>

<div ng-view></div>

<!--scripts include-->
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/retina.js"></script>
<script src="js/camera.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.custom-scrollbar.js"></script>
<script src="js/scripts.js"></script>
<script src="js/lightbox.js"></script>
<script src="js/angular.js"></script>
<script src="js/angular-resource.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-ui.min.js"></script>
<script src="js/angular-animate.js"></script>
<script src="js/sortable.js"></script>
<script src="js/ng-file-upload.js"></script>
<script src="js/ng-file-upload-shim.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers.js"></script>
<script src="app/factory.js"></script>
<script src="app/filters.js"></script>

</body>
</html>

这是用于创建幻灯片的jQuery

// camera slideshow
(function(){
    var cs = $('.camera_wrap');
    if(cs.length){
        cs.camera({
            height: '41%',
            navigation: true,
            pagination: true,
            playPause:false,
            thumbnails: false,
            time: 4000,
            transPeriod : 1000,
            navigationHover: false,
            onLoaded: function() {
                var image = $('.camera_wrap .camera_src > [data-src]'),
                    len = image.length,
                    bullet = $('.camera_wrap .camera_pag_ul > li');
                if(bullet.find('.custom_thumb').length) return;
                for(var i = 0; i < len; i++){
                    bullet.eq(i).append('<div class="custom_thumb tr_all_hover"><img src="' + image.eq(i).data('custom-thumb') + '" alt=""></div>');
                }
                bullet.on("mouseenter mouseleave",function(){
                    $(this).children('.custom_thumb').toggleClass("active");
                });
            }
        });
        cs.find('.camera_prev').append('<i class="fa fa-angle-left"></i>');
        cs.find('.camera_next').append('<i class="fa fa-angle-right"></i>');
    }
})();

//摄影机幻灯片放映
（功能（）{
var cs=$（'.camera_wrap'）；
if（cs.长度）{
摄像机({
身高：41%，
导航：对，
分页：正确，
暂停：错，
缩略图：错误，
时间：4000，
跨周期：1000，
导航悬停：false，
onload:function（）{
var image=$（'.camera\u wrap.camera\u src>[data src]'），
len=image.length，
bullet=$（'.camera_wrap.camera_pag_ul>li'）；
if（bullet.find（'.custom_thumb'）.length）返回；
对于（变量i=0；i


问题就在这里。在第一次加载或重新加载（f5）时，滑块看起来正常，播放效果良好

在点击页面并再次访问主页（#/home）后，滑块有时会断开，有时不会断开，有时会自行修复

再次刷新网页后，滑块工作正常，发挥良好
如果你们需要任何额外的代码块，让我知道，我会提供
当你在角度视图中放置JQ幻灯片时，理论上感谢你。每次访问视图时都需要初始化。因为在视图/路线更改时，您的幻灯片将从DOM中丢弃，因此您的幻灯片的所有内容和实例也将被丢弃
问题就在这里。在第一次加载或重新加载（f5）时，滑块看起来正常，播放效果良好
是的，它应该工作，因为幻灯片得到了最初的良好效果
在点击页面并再次访问主页（#/home）后，滑块有时会断开，有时不会断开，有时会自行修复
幻灯片没有正确初始化，因为当路线/视图更改时，它从DOM中被丢弃
=>要使其正常工作，只需在视图渲染后再次重新初始化即可
//这是一个脏补丁，只以最基本的方式显示修复程序。因此，您可以通过其他DOM操作（如JQ）理解角度的概念。
//您应该尝试在angular中学习更多关于DOM操作的知识。为了获得更好的解决方案，您可以使用指令
controllers.slideShowCtrl=函数（$scope、$location、$timeout）{
$scope.slideShow=函数（）{
如果（$location.url（）='/'| |$location.url（）='/home'）{
$scope.slideShowView=true；
返回true；
}否则{
$scope.slideShowView=false；
返回false；
}
//我只是把slideshow的首字母放在$scope后面。slideshow（）返回true。
//以确保在ng show条件返回true后幻灯片显示为初始状态。
$scope.$watch（函数（）{
返回$scope.slideShow（）；
}，功能（isShow）{
//此$timeout to 100%sure slideshow初始值仅在视图呈现其所有基本内容后发生
$timeout（函数（）{
国际单项体育联合会（isShow）{
var cs=$（'.camera_wrap'）；
if（cs.长度）{
摄像机({
身高：41%，
导航：对，
分页：正确，
暂停：错，
缩略图：错误，
时间：4000，
跨周期：1000，
导航悬停：false，
onload:function（）{
var image=$（'.camera\u wrap.camera\u src>[data src]'），
len=image.length，
bullet=$（'.camera_wrap.camera_pag_ul>li'）；
if（bullet.find（'.custom_thumb'）.length）返回；
对于（变量i=0；i

p.S.
请注意，由于我们没有任何fiddle/plunker
，因此为了确保解决方案有效，我应用了一些技巧，以尽可能地提供工作代码。您可以尝试删除$timeout
，以便在角度视图中放置JQ幻灯片时，从理论上看它是否有效。每次访问视图时都需要初始化。因为在视图/路线更改时，您的幻灯片将从DOM中丢弃，因此您的幻灯片的所有内容和实例也将被丢弃
问题就在这里。在第一次加载或重新加载（f5）时，滑块看起来正常，播放效果良好
是的，它应该工作，因为幻灯片得到了最初的良好效果
在点击页面并再次访问主页（#/home）后，滑块有时会断开，有时不会断开，有时会自行修复
幻灯片未正确初始化，因为它在路由/查看时从DOM中被丢弃
// camera slideshow
(function(){
    var cs = $('.camera_wrap');
    if(cs.length){
        cs.camera({
            height: '41%',
            navigation: true,
            pagination: true,
            playPause:false,
            thumbnails: false,
            time: 4000,
            transPeriod : 1000,
            navigationHover: false,
            onLoaded: function() {
                var image = $('.camera_wrap .camera_src > [data-src]'),
                    len = image.length,
                    bullet = $('.camera_wrap .camera_pag_ul > li');
                if(bullet.find('.custom_thumb').length) return;
                for(var i = 0; i < len; i++){
                    bullet.eq(i).append('<div class="custom_thumb tr_all_hover"><img src="' + image.eq(i).data('custom-thumb') + '" alt=""></div>');
                }
                bullet.on("mouseenter mouseleave",function(){
                    $(this).children('.custom_thumb').toggleClass("active");
                });
            }
        });
        cs.find('.camera_prev').append('<i class="fa fa-angle-left"></i>');
        cs.find('.camera_next').append('<i class="fa fa-angle-right"></i>');
    }
})();

        angular.module('app', [])
    .directive('cameraSlider', function($timeout){
      return {
        restrict: 'AC',
        templateUrl: function(element, attrs) {

                return attrs.templateUrl | 'your_remplate_url.html'; 
        }
       link: function($scope, element, attrs){
        $timeout(function(){

        element.camera({
            height: '41%',
            navigation: true,
            pagination: true,
            playPause:false,
            thumbnails: false,
            time: 4000,
            transPeriod : 1000,
            navigationHover: false,
            onLoaded: function() {
                var image = $('.camera_wrap .camera_src > [data-src]'),
                    len = image.length,
                    bullet = $('.camera_wrap .camera_pag_ul > li');
                if(bullet.find('.custom_thumb').length) return;
                for(var i = 0; i < len; i++){
                    bullet.eq(i).append('<div class="custom_thumb tr_all_hover"><img src="' + image.eq(i).data('custom-thumb') + '" alt=""></div>');
                }
                bullet.on("mouseenter mouseleave",function(){
                    $(this).children('.custom_thumb').toggleClass("active");
                });
            }
        });

        element.find('.camera_prev').append('<i class="fa fa-angle-left"></i>');
        element.find('.camera_next').append('<i class="fa fa-angle-right"></i>');
        },200)

       }
      };

})