Справочная слайд-шоу - JQuery

Я пытаюсь создать слайд-шоу, которое будет работать в DIV в фоновом режиме, имея ссылки поверх него. Проблема, с которой я сталкиваюсь, заключается в том, что когда я перехожу через картинки с помощью функций fadeIn и fadeOut JQuery, это также затухает в ссылках. Есть ли способ угасать только фоновое изображение? Мой код ниже:Справочная слайд-шоу - JQuery

<html> 
<head> 
<script type="text/javascript" src="jquery.js"> 
var bgimage=new Array() 
    bgimage[0] = 'bg_pic2.jpg'; 
    bgimage[1] = 'bg_pic3.jpg'; 
    bgimage[2] = 'bg_pic4.jpg'; 
    bgimage[3] = 'cbg_pic5.jpg'; 
    bgimage[4] = 'bg_pic1.jpg'; 

    var abc=-1 

    function t() 
    { 
    if (abc<bgimage.length-1) 
{ 
    abc++; 
} 
else 
{ 
    abc=0; 
} 
    document.getElementById("mainpic").style.backgroundImage = 'url("'+bgimage[abc]+'")'; 
$('#mainpic').fadeIn(); 
$('#mainpic').delay(3900).fadeOut(); 

    } 
      window.onload = load; 

    function load() 
    { 
$('#mainpic').hide(); 
    $('#mainpic').delay(500).fadeIn(); 
    document.getElementById("mainpic").style.backgroundImage =  'url(css/images/bg_pic1.jpg)'; 
    setInterval("t()",5000); //change every 4 seconds, can be changed. 
$('#mainpic').delay(3600).fadeOut(); 
    } 


//--> 
</script> 
</head> 

<body> 
    <div id="container" > 
    <div id="mainpic" class="mainpic"> 
     <div style="float:right; height: 531px; width: 20px"></div> 
     <br />   
     <div class="coaches"><a href=""></a></div> 
     <br /> 
     <br /> 
     <br /> 
     <br />  
     <div class="hours"><a href=""></a></div> 
     <br /> 
     <br /> 
     <br /> 
     <br />  
     <div class="pics"><a href=""></a></div> 
     <br /> 
     <br /> 
     <br /> 
     <br />    
     <div class="blog"><a href=""></a></div> 
     </div>   
    </div> 
</body>

источник

2010-10-12 user473669

Вы должны быть в состоянии получить эффект, который вы хотите, если вы поместите текст в отдельный DIV с изображением. Таким образом, исчезновение изображения div не приведет к исчезновению текста.
Разделитель, содержащий текст и изображения, должен иметь относительное позиционирование с двумя дочерними div, имеющими абсолютное позиционирование. Текст div должен иметь более высокий индекс z, чем div для изображения, чтобы убедиться, что текст «выше» изображений.

Попробуйте что-то вроде:

 
<body> 
    <div id="container" > 
    <div id="mainpic" class="mainpic" style="position:relative;"> 
     <div style="position: absolute; top: 0px; left: 0px; height: 531px; width: 400px"></div> 
     <div id="text" style="position: absolute; top: 0px; left: z-index=1"> 
     <br />   
     <div class="coaches"><a href=""></a></div> 
     <br /> 
     <br /> 
     <br /> 
     <br />  
     <div class="hours"><a href=""></a></div> 
     <br /> 
     <br /> 
     <br /> 
     <br />  
     <div class="pics"><a href=""></a></div> 
     <br /> 
     <br /> 
     <br /> 
     <br />    
      <div class="blog"><a href=""></a></div> 
     </div> 
     </div>   
    </div> 
</body>

Обратите внимание, что я настроил ширину вашего DIV изображения. Вероятно, вы хотите установить это на фактическую ширину ваших изображений.

источник

2010-10-12 18:32:30

Я пробовал ваш код выше, и он все еще не работает. , , ссылки все еще исчезают вместе с #mainpic DIV. – user473669

Извините, мой образец кода не сработал для вас. Я все еще думаю, что проблема заключается в том, как divs являются вложенными, и я думал, что это изменение изменит это. Если у вас есть плагин firebug для Firefox, вы можете немного поиграть с ним, чтобы увидеть, как взаимодействуют DIV. Вы даже можете изменить CSS в режиме реального времени с помощью firebug, чтобы это тоже помогло. –

Мне удалось заставить это работать в Firefox и Chrome, но IE нажал изображение WAY вправо. , ,

<div style="width:755px; height:507px; border: #888 5px solid;"> 
    <div id="container" > 
    <div id="mainpic" class="mainpic" style="position: absolute"> 
    </div>   
    <div id="links" style="position: relative"> 
     <div style="float:right; height: 531px; width: 20px"></div> 
     <br /> 
     <div class="coaches"><a href=""></a></div> 
     <br /> 
     <br /> 
     <br /> 
     <br />  
     <div class="hours"><a href=""></a></div> 
     <br /> 
     <br /> 
     <br /> 
     <br />  
     <div class="pics"><a href=""></a></div> 
     <br /> 
     <br /> 
     <br /> 
     <br />    
     <div class="blog"><a href=""></a></div> 
    </div>  
    </div>   
</div>

источник

2010-10-12 19:21:15 user473669

Справочная слайд-шоу - JQuery

ответ

Смежные вопросы