背景图像幻灯片放映 [英] background image slide show

查看：81 发布时间：2019/6/15 5:58:54 Javascript HTML5

本文介绍了背景图像幻灯片放映的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在我的网站后面的网页背面创建一个背景图片幻灯片放映，背景图片幻灯片放映工作正常但网页内容出现在我的背景图片幻灯片放映下实际上背景图片幻灯片放映应该是我的内容背面..怎么做？

以下是我的源代码：

I am creating a background image slide show at the back of my webpage in my website , background image slide show is working correct but the content of webpage is appearing below to my background image slide show actually background image slide show should be at the back of my content ..how to do it?

following is my source code:

<script language="Javascript" type="text/javascript">
$(function() {
var currentPosition = 0;
var slideWidth = 1500;
var slides = $('.slide');
var numberOfSlides = slides.length;
setInterval(changePosition, 3000);
slides.wrapAll('<div id="slidesHolder"></div>');
slides.css({ 'float': 'left' });
$('#slidesHolder').css('width', slideWidth * numberOfSlides);
function changePosition() {
if (currentPosition == numberOfSlides - 1) {
currentPosition = 0;
}
else {
currentPosition++;
}
moveSlide();
}
function moveSlide() {
$('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
}
});
</script>
<style type="text/css">

#slideshow {

position: relative;
}
#slideshow #slideshowWindow {
height: 768px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 1000px;
}
#slideshow #slideshowWindow .slide {
height: 768px;
margin: 0;




padding: 0;
position: relative;
width: 1000px;
}
#slideshow #slideshowWindow .slide .slideText {

background-repeat: repeat;
color: #FFFFFF;
font-family: Myriad Pro,Arial,Helvetica,sans-serif;
height: 130px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 130px;
width: 100%;
}
#slideshow #slideshowWindow .slide .slideText a:link, #slideshow #slideshowWindow .slide .slideText a:visited {
color: #FFFFFF;
text-decoration: none;
}
#slideshow #slideshowWindow .slide .slideText h2, #slideshow #slideshowWindow .slide .slideText p {
color: #FFFFFF;
margin: 10px 0 0 10px;
padding: 0;
}
</style>

<body onload="MM_preloadImages('images/butt1_1.jpg','images/butt2_1.jpg','images/butt3_1.jpg','images/butt4_1.jpg','images/butt6_1.jpg');ShowFlyOver();closeMe();">
 <div id="slideshow">
<div id="slideshowWindow">
<div class="slide">
<img src="Images/bg plotter new.jpg" />

</div>
<div class="slide">
<img src="Images/bgtrai8.jpg" />

</div>

</div>
</div>
<center style="padding-top:13px"> //here starts my webpage contents//

<div id="top-bar">
  <div id="topbar-inner">

<table border="0" cellpadding="0" cellspacing="0" class="top_bg" style="width: 1034px">

背景图像幻灯片放映 [英] background image slide show

问题描述

推荐答案

相关文章

其他开发语言最新文章

热门教程

热门工具

登录关闭

背景图像幻灯片放映 [英] background image slide show

问题描述

推荐答案

相关文章

其他开发语言最新文章

热门教程

热门工具

登录 关闭

登录关闭