HTML自动幻灯片 [英] HTML Automatic SlideShow
本文介绍了HTML自动幻灯片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好，
我是网络开发的新手，但我正在尝试创建一个带有自动幻灯片放映的网页。我在谷歌上阅读了很多文章，并且在我的生活中不能让它正常工作。
我是在幻灯片放映后有3张图片在760 x 240并且有一个淡入淡出过渡。
任何人都可以通过正确的幻灯片代码帮助我吗？我目前的代码如下 - 请原谅，如果它看起来很乱哈哈。
非常感谢，
Kyle
HTML
Hi all,
I am a complete novice to web development however I am trying to create a web page with an automatic slide show. I have read many articles on Google and can't for the life of me get it to work properly.
I am after a slide show that has 3 images at 760 x 240 and that has a fade transition.
Could anyone please help me out by putting the correct slide show code in place?? My current code is below - Please excuse it if it looks a mess haha.
Many Thanks,
Kyle
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="Home.css" rel="stylesheet" type="text/css" />
<title>TGCPC - Home</title>
</head>
<body>
<h1><center></center></h1>
<div class="Home">
<div class="Home_header_image"></div>
<div class="Home_middle"></div>
<div class="lower">
<div>
<h1></h1>
</div>
</div>
<div class="Home_content1">
<div>
<h2></h2>
<h2></h2>
<h2></h2>
<h2></h2>
<p><center></center> </p>
</div>
</div>
<div class="Home_menuHome"><a class="Home_menuHomeLink" href="Home.htm">HOME</a></div>
<div class="Home_menuAboutUs"><a class="Home_menuAboutUsLink" href="AboutUs.htm">ABOUTUS</a></div>
<div class="Home_menuProducts"><a class="Home_menuProductsLink" href="Products.htm">PRODUCTS</a></div>
<div class="Home_menuTestimonials"><a class="Home_menuTestimonialsLink" href="Testimonials.htm">TESTIMONIALS</a></div>
<div class="Home_menuContactUs"><a class="Home_menuContactUsLink" href="ContactUs.htm">CONTACTUS</a></div>
</div>
</body>
</html> < br $>
CSS
CSS
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family: Calibri, Arial, sans-serif;
background: #000 url(images/CotswoldWall.jpg) no-repeat;
color: white;
background-repeat: no-repeat;
background-position: top center;
}
a:link {
outline: 0;
color: #979797;
text-decoration: none;
}
a:visited {
color: #979797;
}
a:hover {
color: #2E9CE6;
}
a.different {
color: black;
}
p {
color: black;
font-size: 14px;
text-align: justify;
padding-left: 10px;
padding-top: 15px;
}
h1 {
color: white;
font-size: 22px;
padding-top: 35px;
padding-left: 36px;
font-weight: 100;
font-family: Dotum;
}
h2 {
color: black;
font-size: 18px;
padding-top: 15px;
padding-left: 10px;
font-weight: normal;
}
.Home {
width: 900px;
min-height: 216px;
margin: 34px auto 0 auto;
position: relative;
}
.Home_middle {
background: url(images/TGCPC-Logo.png) no-repeat 67px 55px;
height: 240px;
width: 736px;
margin-top: -800px;
border-radius: 7px;
margin-bottom: -20px;
}
.Home_header_image {
background: #3A3A3C url(images/wooden-path.jpg) no-repeat 70px 160px;
height: 800px;
width: 900px;
margin-top: -85px;
margin-bottom: -110px;
}
.Home_menuHome {
position: absolute;
top: 135px;
left: 352px;
}
.Home_menuHomeLink:link {
background: url(images/Home.png) no-repeat left top;
width: 62px;
height: 20px;
display: block;
text-indent: -10000px;
}
.Home_menuHomeLink:hover {
background: url(images/Home.png) no-repeat left bottom;
}
.Home_menuAboutUs {
position: absolute;
top: 135px;
left: 410px;
}
.Home_menuAboutUsLink:link {
background: url(images/AboutUs.png) no-repeat left top;
width: 100px;
height: 22px;
display: block;
text-indent: -10000px;
}
.Home_menuAboutUsLink:hover {
background: url(images/AboutUs.png) no-repeat left bottom;
}
.Home_menuProducts {
position: absolute;
top: 135px;
left: 504px;
}
.Home_menuProductsLink:link {
background: url(images/Products.png) no-repeat left top;
width: 100px;
height: 22px;
display: block;
text-indent: -10000px;
}
.Home_menuProductsLink:hover {
background: url(images/Products.png) no-repeat left bottom;
}
.Home_menuTestimonials {
position: absolute;
top: 135px;
left: 598px;
}
.Home_menuTestimonialsLink:link {
background: url(images/Testimonials.png) no-repeat left top;
width: 128px;
height: 22px;
display: block;
text-indent: -10000px;
}
.Home_menuTestimonialsLink:hover {
background: url(images/Testimonials.png) no-repeat left bottom;
}
.Home_menuContactUs {
position: absolute;
top: 135px;
left: 720px;
}
.Home_menuContactUsLink:link {
background: url(images/ContactUs.png) no-repeat left top;
width: 122px;
height: 22px;
display: block;
text-indent: -10000px;
}
.Home_menuContactUsLink:hover {
background: url(images/ContactUs.png) no-repeat left bottom;
}
.Home_header_image h1 {
padding-top: 0;
margin-top: 0;
}
.Home .Home_header_image .centre {
float: left;
width: 830px;
margin: 0 0 0 30px;
}
推荐答案
相反你可以使用jQuery插件用于幻灯片放映，
这里是jQuery提供的插件之一： jQuery幻灯片
-Amit
Hi,
Instead you can use jQuery plugins for slideshow,
here is the one of the plugins provided by jQuery : jQuery Slideshow
-Amit
这篇关于HTML自动幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
