Question

我的主页在导航栏下有一个1024x500px幻灯片正在进行中。我希望标题超过幻灯片。标题应包含一些句子，例如“数字艺术”。我想为这些标题和文字进行转换。它们应该每隔几秒钟更换一次，进出，或淡入淡出，不确定。我该怎么做？谢谢你们。这是一个截图如果情况。 http://pokit.org/get/?9e3304f02be8142576ed1a0fa568efc1.jpg 滑块不是问题。我希望标题能够移过它。

这是html部分，包含幻灯片的div，我已经放了一个h1

 <div class="heroImg" id="heroImg">
    <h1>
        Graphic Design and Digital Art
    </h1>
        <div id=slidercontainer>
            <div id=css3slider>
<img src="images/slideshowimg/malay.jpg" alt="White-tailed kite" >
<img src="images/slideshowimg/jkarta.jpg" alt="Hawk title=Hawk" >
<img src="images/slideshowimg/american.jpg" alt="Osprey" >
<img src="images/slideshowimg/aya.jpg" alt="Square-tailed kite" >
<img src="images/slideshowimg/malay.jpg" alt="White-tailed kite" >
            </div>
        </div>
    </div>

这是css -

 #heroImg h1 {
  color: rgba(255,102,0,1);
  position: absolute;
  top: 250px;
  z-index: 99;
  font-family: "Exo 2", "sans-serif;";
  font-size: 2em;
  left: 170px;
  }



/*  Slider CSS */

@-webkit-keyframes slider {     
 0% { left: 0; opacity: 0; }     
2% { opacity: 1; }     
20% { left: 0; opacity: 1; }     
21% { opacity: 0; }     
24% { opacity: 0; }     
25% { left: -1024px; opacity: 1; }     
45% { left: -1024px; opacity: 1; }     
46% { opacity: 0; }     
48% { opacity: 0; }     
50% { left: -2048px; opacity: 1; }     70% { left: -2048px; opacity: 1; } 
72% { opacity: 0; }     
 74% { opacity: 0; }    
 75% { left: -3072px; opacity: 1; }     
 95% { left: -3072px; opacity: 1; }     
 97%  { left: -3072px; opacity: 0; }    
 100% { left: 0; opacity: 0; }
 }


@-moz-keyframes slider {     
0% { left: 0; opacity: 0; }     
2% { opacity: 1; }     
20% { left: 0; opacity: 1; }     
21% { opacity: 0; }     
24% { opacity: 0; }     
25% { left: -1024px; opacity: 1; }     
45% { left: -1024px; opacity: 1; }     
46% { opacity: 0; }     
48% { opacity: 0; }     
50% { left: -2048px; opacity: 1; } 70% { left: -2048px; opacity: 1; } 
72% { opacity: 0; }     
74% { opacity: 0; }    
75% { left: -3072px; opacity: 1; }      
95% { left: -3072px; opacity: 1; }      
97%  { left: -3072px; opacity: 0; }     
100% { left: 0; opacity: 0; }} 

 @-o-keyframes slider {     
 0% { left: 0; opacity: 0; }     
 2% { opacity: 1; }     
 20% { left: 0; opacity: 1; }     
 21% { opacity: 0; }     
 24% { opacity: 0; }     
 25% { left: -1024px; opacity: 1; }     
45% { left: -1024px; opacity: 1; }     
46% { opacity: 0; }     
48% { opacity: 0; }     
50% { left: -2048px; opacity: 1; } 
70% { left: -2048px; opacity: 1; }     72% { opacity: 0; }     
  74% { opacity: 0; }    
75% { left: -3072px; opacity: 1; }      
95% { left: -3072px; opacity: 1; }      
97%  { left: -3072px; opacity: 0; }     
100% { left: 0; opacity: 0; }} 

 @keyframes slider {     
0% { left: 0; opacity: 0; }     
2% { opacity: 1; }     
20% { left: 0; opacity: 1; }     
21% { opacity: 0; }     
24% { opacity: 0; }     
25% { left: -1024px; opacity: 1; }     
45% { left: -1024px; opacity: 1; }     
46% { opacity: 0; }     
48% { opacity: 0; }     
50% { left: -2048px; opacity: 1; } 
 70% { left: -2048px; opacity: 1; }     72% { opacity: 0; }     
74% { opacity: 0; }    
75% { left: -3072px; opacity: 1; }      
95% { left: -3072px; opacity: 1; }      
97%  { left: -3072px; opacity: 0; }     
100% { left: 0; opacity: 0; }} 



 div#slidercontainer { 
 position: relative; 
  overflow: hidden; 
 background: #000 
 }
 div#slidercontainer { 
width: 1024px;
 height: 500px; 
 }

 div#sidercontainer img { 
  width: 1024px;
  height: 500px; 
  float: left;
  }

  div#css3slider { 
  position: absolute; 
  width:5120px;  
 -webkit-animation-name:slider;
 -webkit-animation-duration:20s;
 -webkit-animation-timing-function: ease-in-out;
 -webkit-animation-iteration-count:infinite;
 -moz-animation-name:slider;
 -moz-animation-duration:20s;
 -moz-animation-timing-function: ease-in-out;
 -moz-animation-iteration-count:infinite;
-o-animation-name:slider;
 -o-animation-duration:20s;
 -o-animation-timing-function: ease-in-out;
 -o-animation-iteration-count:infinite;
  animation-name:slider;
 animation-duration:20s;
 animation-timing-function: ease-in-out;
 animation-iteration-count:infinite;
  }



  div#css3slider img { 
  float: right; 
   }

   div#slidercontainer:after { 

  font-size: 150px; 
   position: absolute; 
   z-index: 12; 
  color: rgba(255,255,255, 0); 
  left: 300px; top: 80px; 
  -webkit-transition: 1s all ease-in-out; 
  -ms-transition: 1s all ease-in-out; 
  -moz-transition: 1s all ease-in-out; 
  -o-transition: 1s all ease-in-out; 
  transition: 1s all ease-in-out; 
  }

  div#slidercontainer:hover:after { 
   color: rgba(255,255,255, 0.6);  
 }

Answer 1

试试这个

 div#sidercontainer div.slidecontent { 
  width: 1024px;
  height: 500px; 
  float: left;
  }

div#css3slider div.slidecontent { 
  float: right; 
   }

然后添加幻灯片内容div而不是像

这样的图像

<div id=css3slider>
 <div class="slidecontent">
   <h1>Text to show</h1>
   <img src="images/slideshowimg/image1.jpg" alt="" >
 </div>
</div>

如何在登陆页面转换标题

1 个答案: