Фоновое слайд-шоу - Jquery - PullRequest
Новая
       2

Фоновое слайд-шоу - Jquery

0 голосов
/ 12 октября 2010

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

<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>

Ответы [ 2 ]

0 голосов
/ 12 октября 2010

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

<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>
0 голосов
/ 12 октября 2010

Вы сможете получить желаемый эффект, если поместите текст в отдельный DIV из изображения.Таким образом, исчезновение 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.Вы, вероятно, хотите установить фактическую ширину ваших изображений.

...