如何防止我的jQuery庫重疊？

-1

我的jQuery圖像庫重疊，阻止視圖能夠來回選擇。任何人都可以幫我解決這個問題嗎？這是鏈接到頁面http://www.etterengineering.com/sliderDEMO.php。如何防止我的jQuery庫重疊？

HTML：

<script src="jquery-ui-full-1.5.2.min.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript" src="includes/SliderGallery.js"> </script> 
<script type="text/javascript" charset="utf-8"> 
    window.onload = function() { 
     var container = $('div.sliderGallery'); 
     var ul = $('ul', container); 

     var itemsWidth = ul.innerWidth() - container.outerWidth(); 

     $('.slider', container).slider({ 
      min: 0, 
      max: itemsWidth, 
      handle: '.handle', 
      stop: function (event, ui) { 
       ul.animate({'left' : ui.value * -1}, 500); 
      }, 
      slide: function (event, ui) { 
       ul.css('left', ui.value * -1); 
      } 
     }); 
    }; 
</script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$('a.Product').click(function() { 
var popID = $(this).attr('rel'); 
var popURL = $(this).attr('href'); 
$('#' + popID).fadeIn('slow').css({ 'width': Number(popWidth) }).prepend(); 
}); 
}); 
</script> 
</head> 
<body> 
    <div id="Wrapper"> 
    <div id="PLC-Operator-Interface" class="popup_block_Parts"> 
      <h3>PLC Operator Interface</h3> 
       <p>Flameless Catalytic heating which has brought energy cost savings to numerous thermo formers and paint finishers, now has a well proven method of control - Gas Pulse System (GPS). 
     <br/>The GPS unit is simple, cost effective and offers the option of multi zone configuration, permitting accurate and repeatable heating profiles for the catalytic heating system. Vulcan has pioneered Gas Pulse Technology, having installed many hundreds in both the finishing and thermo forming industries to control catalytic heaters. Typical gas industrial control valves, are totally unsuitable for controlling catalytic heaters. GPS has been proven to save gas consumption over other industry control valves.</p> 
     <div id="fullsize"><img border="0" src="Parts_by_Man_OK_By_Jon/Vulcan/plc-operator-interface-2.gif" alt="Gas Booster Approvals"/></div> 
     </div>  
<div id="Vert-Oven" class="popup_block_Parts"> 
     <h3>Catalytic Oven Applications</h3> 
      <p>Control of the GPS is via one of two operator control types. For systems with less than five control zones, a simple percentage timer may be used. For systems with a greater number of zones, a PLC based control with an intuitive operator interface, offers the customer the best solution for multi zone systems, with recipe storage, system diagnostics functions and global increase/decrease of any heating profile.</p> 
     <div id="fullsize"><img border="0" src="Parts_by_Man_OK_By_Jon/Vulcan/vert-oven-lg.gif" alt="Gas Booster Approvals"/></div> 
     </div> 
<div id="Gas-Pulse" class="popup_block_Parts"> 
     <h3>Gas Pulse</h3> 
      <p>Gas pulse technology uses electrically actuated solenoid valves, to cycle the gas supply between flow rates of 100% and 20%. Longevity and reliability have been the hallmarks for this technology, and synchronizes very well with the mechanics of the flameless oxidation process within Vulcan's patented catalytic heaters. By alternating between the high and low flow rates, the entire depth of catalyst is used, ensuring an even heat distribution across entire heater face at all percentage settings.</p> 
     <div id="fullsize"><img border="0" src="Parts_by_Man_OK_By_Jon/Vulcan/GasPulse_sm.gif" alt="Gas Booster Approvals"/></div> 
     </div> 



<div class="sliderGallery"> 
    <ul> 
      <li><a href="#?w=400" rel="PLC-Operator-Interface" class="Product"><img src="Parts_by_Man_OK_By_Jon/Vulcan/thumbnails/plc-operator-interface-2_Thumbnail.gif" border="0" /></a></li> 
    <li><a href="#?w=400" rel="Vert-Oven" class="Product"><img src="Parts_by_Man_OK_By_Jon/Vulcan/thumbnails/vert-oven-lg_Thumbnail.gif" border="0"/></a></li> 
    <li><a href="#?w=400" rel="Gas-Pulse" class="Product"><img src="Parts_by_Man_OK_By_Jon/Vulcan/thumbnails/GasPulse_sm_Thumbnail.gif" border="0"/></a></li> 
    </ul> 
    <div class="slider"> 
    <div class="handle"></div> 
     </div> 
    </div> 


</div> 
</body> 
</html>

CSS：

.popup_block_Parts { 
display: none; 
background: transparent; 
height:300px; 
padding: 20px; 
float: left; 
font-size: .95em; 
position: absolute; 
top: 520px; 
left:680px; 
z-index: 99998; 
} 

#PLC-Operator-Interface{ 
top:50px; 
position:absolute; 
z-index:5; 
} 
#Vert-Oven{ 
top:50px; 
position:absolute; 
z-index:5;} 
#Gas-Pulse{ 
top:50px; 
position:absolute; 
z-index:5;} 

#fullsize { 
position:relative; 
width:25px; 
height:238px; 
top:5px; 
left:5px; 
padding:2px; 
z-index:10; 
}

來源

2011-04-29 Stephanie

我看過的頁面，但我沒有看到這個問題。你能更清楚地知道什麼是錯的，怎麼看它？ – KatieK 2011-04-29 15:19:37

當您點擊產品時，較大的圖像和解釋顯示正確。圖像重疊的問題例如：如果您單擊第三張圖像，則嘗試單擊第一張圖像。第一個出現在第三個下面。我希望觀衆能夠以任何順序點擊。總是讓他們選擇的產品照片和解釋顯示在最上面。 – Stephanie 2011-04-29 15:24:03

<script type="text/javascript"> 
$(document).ready(function() { 
    $('a.Product').click(function() { 
     var popID = $(this).attr('rel'); 
     var popURL = $(this).attr('href'); 

     $('.popup_block_Parts').each(function(){ $(this).hide(); }); 

     $('#' + popID).fadeIn('slow').css({ 'width': Number(popWidth) }).prepend(); 
    }); 
}); 
</script>

來源

2011-04-29 15:29:13 Tomas

非常感謝你非常感謝你完美的工作。我知道這是隱藏功能，我只是不能正確執行它，我是jQuery的新手。 – Stephanie 2011-04-29 15:32:44

高興地幫助:) – Tomas 2011-04-29 15:35:07

如何防止我的jQuery庫重疊？

回答

相關問題