减小字体
增大字体- ·上一篇文章：从老外网站上的javascript图片效果
- ·下一篇文章：支持IE,Firefox的日历控件
当前位置：K88软件开发 → 文章中心 → 编程语言 → JavaScript → JS01 → 文章内容
CSS和JS打造的幻灯片代码
见到最多的幻灯片是由FLASH+JS，或者FLASH+xml实现的，从外部读取信息，显示在FLASH中，特点是变化的样式多，但flash文件有些大，IE需要等这个flash文件下载完后再才可看到效果的。
如果遇到一些变化不多的地址，可采用以下这种CSS+JS实现的幻灯片，相比flash幻灯片来说，速度快多了。
以下内容为程序代码<
!DOCTYPE html PUBLIC "
-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html xmlns="
http://www.w3.org/1999/xhtml"
>
<
head>
<
meta http-equiv="
Content-Type"
content="
text/html
charset=gb2312"
/>
<
meta http-equiv="
X-UA-Compatible"
content="
IE=EmulateIE7"
/>
<
title>
DIV+CSS实现的幻灯片例子<
/title>
<
link href="
http://www.aspprogram.cn/test/hdp/css/ycStyle200905.css"
rel="
stylesheet"
type="
text/css"
/>
<
/head>
<
body>
<
div style="
height:100px
"
>
<
/div>
<
!--[if !IE]>
|xGv00|3b5e6c431e9b560f40893a978e9edc81<
![endif]-->
<
div id="
topArea"
>
<
div class="
leftBox1"
>
<
div class="
foc"
>
<
div id="
bigImg"
style="
filter:progid:DXImageTransform.Microsoft.Fade(duration=0.5,overlap=1.0)"
>
<
div class="
dis"
>
<
a href="
http://www.g.cn/"
target="
_blank"
>
<
img src=http://www.aspbc.com/Index/showtech/id/"
http://www.aspprogram.cn/test/hdp/images/93401.jpg"
width="
231"
height="
319"
onmouseover="
clearAuto()
"
onmouseout="
setAuto()"
/>
<
/a>
<
br />
<
span>
<
a href="
http://www.g.cn/"
target="
_blank"
>
血色康乃馨：夜幕下的的葬爱<
/a>
<
/span>
<
/div>
<
div class="
undis"
>
<
a href="
http://www.aspprogram.cn/"
target="
_blank"
>
<
img src=http://www.aspbc.com/Index/showtech/id/"
http://www.aspprogram.cn/test/hdp/images/93407.jpg"
width="
231"
height="
319"
onmouseover="
clearAuto()
"
onmouseout="
setAuto()"
/>
<
/a>
<
br />
<
span>
<
a href="
http://www.aspprogram.cn"
target="
_blank"
>
江湖天很晴<
/a>
<
/span>
<
/div>
<
div class="
undis"
>
<
a href="
http://www.baidu.com"
target="
_blank"
>
<
img src=http://www.aspbc.com/Index/showtech/id/"
http://www.aspprogram.cn/test/hdp/images/93411.jpg"
width="
231"
height="
319"
onmouseover="
clearAuto()
"
onmouseout="
setAuto()"
/>
<
/a>
<
br />
<
span>
<
a href="
http://www.baidu.com"
target="
_blank"
>
绝色女子：情魅凤陵王<
/a>
<
/span>
<
/div>
<
div class="
undis"
>
<
a href="
http://www.163.com"
target="
_blank"
>
<
img src=http://www.aspbc.com/Index/showtech/id/"
http://www.aspprogram.cn/test/hdp/images/93409.jpg"
width="
231"
height="
319"
onmouseover="
clearAuto()
"
onmouseout="
setAuto()"
/>
<
/a>
<
br />
<
span>
<
a href="
http://www.163.com"
target="
_blank"
>
耗子赖上小仙女：眷恋五百年<
/a>
<
/span>
<
/div>
<
/div>
<
div class="
rbox"
>
<
div id="
thumbImg"
>
<
div class="
cur"
>
<
img src=http://www.aspbc.com/Index/showtech/id/"
http://www.aspprogram.cn/test/hdp/images/93402.jpg"
alt="
"
onclick="
Mea(0)
"
onmouseover="
clearAuto()
"
onmouseout="
setAuto()"
/>
<
/div>
<
p>
<
/p>
<
div class="
normal"
>
<
img src=http://www.aspbc.com/Index/showtech/id/"
http://www.aspprogram.cn/test/hdp/images/93408.jpg"
alt="
"
onclick="
Mea(1)
"
onmouseover="
clearAuto()
"
onmouseout="
setAuto()"
/>
<
/div>
<
p>
<
/p>
<
div class="
normal"
>
<
img src=http://www.aspbc.com/Index/showtech/id/"
http://www.aspprogram.cn/test/hdp/images/93412.jpg"
alt="
"
onclick="
Mea(2)
"
onmouseover="
clearAuto()
"
onmouseout="
setAuto()"
/>
<
/div>
<
p>
<
/p>
<
div class="
normal"
>
<
img src=http://www.aspbc.com/Index/showtech/id/"
http://www.aspprogram.cn/test/hdp/images/93410.jpg"
alt="
"
onclick="
Mea(3)
"
onmouseover="
clearAuto()
"
onmouseout="
setAuto()"
/>
<
/div>
<
/div>
<
div class="
more color_717"
>
<
/div>
<
/div>
<
div class="
cb"
>
<
/div>
<
script language="
javascript"
>
var n=0
var showImg = document.getElementById("
bigImg"
)
var showNum = document.getElementById("
thumbImg"
)
function Mea(value)
{
n=value
setBg(value)
plays(value)
}
function setBg(value)
{
for(var i=0
i<
4
i++)
if(value==i)
{showNum.getElementsByTagName("
div"
)[i].className='cur'
}
else
{showNum.getElementsByTagName("
div"
)[i].className='normal'
}
}
function plays(value)
{
with (document.getElementById("
bigImg"
))
{
if(navigator.userAgent.indexOf("
MSIE"
)>
0)
{
filters[0].Apply()
}
for(i=0
i<
4
i++)i==value?showImg.getElementsByTagName("
div"
)[i].className='dis':showImg.getElementsByTagName("
div"
)[i].className='undis'
if(navigator.userAgent.indexOf("
MSIE"
)>
0)
{
filters[0].play()
}
}
}
function clearAuto()
{clearInterval(autoStart)}
function setAuto()
{autoStart=setInterval("
auto(n)"
, 3000)}
function auto()
{
n++
if(n>
3)n=0
Mea(n)
}
setAuto()
<
/script>
<
/div>
<
/div>
<
/div>
<
div id="
vipBox"
class="
warp960"
>
<
/div>
<
div id="
artList"
>
<
/div>
<
script language="
javascript"
>
function foda(obj,cid)
{
var pa = obj.parentNode.parentNode
var pa1 = obj.parentNode.getElementsByTagName("
div"
)
var ta=pa.getElementsByTagName('ul')[0].getElementsByTagName('li')
for(i=0
i<
pa1.length
i++)
{
if(pa1[i] == obj)
{
cid==''?pa1[i].className = "
cur"
:pa1[i].className = "
cur"
+(i+1)
ta[i].className = "
dis"
}
else
{
cid==''?pa1[i].className = "
normal"
:pa1[i].className = "
normal"
+(i+1)
ta[i].className = "
undis"
}
}
}
<
/script>
<
/body>
<
/html>
CSS和JS打造的幻灯片代码
