Question

我遇到的图片无法在jquery ui和no ui标签中加载。奇怪的是，在opera，chrome和firefox上，如果我打开开发人员工具控制台并向上或向下移动控制台，图像将会加载。 IE 11中的图像完全失败

这是一个现场演示：

http://inetwebdesign.com/bxslider2/jquery-ui-tabs-accordion2.html

非常感谢任何帮助。

此致 UMB

Answer 1

jquery-ui标签内 bxslider DEMO

JS代码：

 $(function() {
     var slider2_initialized = false;
     var slider3_initialized = false;

     $( "#tabs" ).tabs({
         activate: function( event, ui ) {
            //console.log("ui = ");console.log(ui);
            var tab_id = $(ui.newPanel).attr('id');//alert(tab_id);

            if(tab_id == "tabs-2" && slider2_initialized == false)
            {    
                $('.bxslider2').bxSlider({
                  auto:true,
                  mode: 'fade',
                  captions: true
                }); 
                //update initialization flag to true
                slider2_initialized = true;
            }
            else if(tab_id == "tabs-3" && slider3_initialized == false)
            {    
                $('.bxslider3').bxSlider({
                  auto:true,
                  mode: 'fade',
                  captions: true
                }); 
                //update initialization flag to true
                slider3_initialized = true;
            }
         }
     });

$('.bxslider1').bxSlider({
  auto:true,
  mode: 'fade',
  captions: true
});     
});

HTML：

<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">
<p>
    <ul class="bxslider1">
  <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" title="Funky roots" /></li>
  <li><img src="http://bxslider.com/images/730_200/hill_road.jpg" title="The long and winding road" /></li>
  <li><img src="http://bxslider.com/images/730_200/trees.jpg" title="Happy trees" /></li>
</ul>
</p>
</div>

<div id="tabs-2">
<p>
    <div style="margin:0;padding:0;">
    <ul class="bxslider2">
  <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" title="Funky roots" /></li>
  <li><img src="http://bxslider.com/images/730_200/hill_road.jpg" title="The long and winding road" /></li>
  <li><img src="http://bxslider.com/images/730_200/trees.jpg" title="Happy trees" /></li>
</ul>
    </div>
</p>
</div>

<div id="tabs-3">
<p>
    <ul class="bxslider3">
  <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" title="Funky roots" /></li>
  <li><img src="http://bxslider.com/images/730_200/hill_road.jpg" title="The long and winding road" /></li>
  <li><img src="http://bxslider.com/images/730_200/trees.jpg" title="Happy trees" /></li>
</ul>
</p>
</div>
</div>

Answer 2

我有同样的问题，但bxslider也会破坏我的媒体查询跳转点。我的解决方案最终是在选项卡中使用Super Simple Slider并将bxslider用于其他所有内容。我希望这会有所帮助。

在jquery ui选项卡中使用时，不会加载bxslider图像

2 个答案: