<input id="dd" type="button" value="点我停止播放" />
<script type="text/javascript">
document.getElementById("tt").onclick=function(){
start()
}
document.getElementById("dd").onclick=function(){
stop()
}
var t
var chg = new Array()
chg[0]="images/chgimg1.jpg"
chg[1]="images/chgimg2.jpg"
chg[2]="images/chgimg3.jpg"
chg[3]="images/chgimg4.jpg"
function nextPT() {
alert(123)
var first = 1
var last = chg.length
var ppt = document.getElementById("news")
while (first <(last+1)){
if (first > last) {
first = 1
} else {
first++
}
ppt.src = chg[first - 1]
}
}
function start(){
t = setInterval('nextPT()',1000)
}
function stop(){
clearInterval(t)
}
</script>
漂亮jQuery 3D动画图片轮播切换特效插件jquery.slicebox.js，基于jQuery，插件采用CSS 3D动画效果，支持事件Callback调用，支持参数自定义配置，如：
speed：600 切换速度、autoplay:true
是否自动播放，在浏览器兼容方面，需要浏览器支持CSS3变换变形属性，不支持的将看不到3D特效！
<html><head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">
<title>slider幻灯片 - 纯JS简化版</title>
<style type="text/css">
*{margin: 0padding: 0}
#sliderbox { width: 500height:313pxposition: relativeoverflow: hiddenmargin: 20px}
#slider {list-style: nonemargin: 0padding: 0}
#slider li {float:leftmargin: 0padding: 0}
#slidertab {position: absoluteright: 10pxbottom:10pxwidth: 80pxheight: 20pxlist-style: none}
#slidertab li {float: leftwidth: 20pxheight: 20pxmargin: 2pxbackground: #eeetext-align: centerline-height: 20pxfont-size: 12px}
#slidertab li.sliderclass {background: #f00}
</style>
<script type="text/javascript">
window.onload = function() {
var sliderbox = document.getElementById('sliderbox')
var slider = document.getElementById('slider')
var sliderli = slider.getElementsByTagName('li')
var slidertab = document.getElementById('slidertab')
var slidertabli = slidertab.getElementsByTagName('li')
var inow = 0
sliderbox.onmouseover = function() {
clearInterval(timer)
}
sliderbox.onmouseout =function() {
timer = setInterval(autoplay, 1000)
}
for(var i=0i<slidertabli.lengthi++) {
slidertabli[i].index = i
slidertabli[i].onclick = function() {
clearInterval(timer)
for(var a=0a<slidertabli.lengtha++) {
slidertabli[a].className = ""
sliderli[a].style.display = "none"
}
this.className = "sliderclass"
sliderli[this.index].style.display = "block"
inow = this.index
}
}
function autoplay() {
for(var i=0i<sliderli.lengthi++) {
sliderli[i].style.display = 'none'
slidertabli[i].className = ""
}
sliderli[inow].style.display = 'block'
slidertabli[inow].className = "sliderclass"
inow = inow==sliderli.length-1 ? 0 : inow+1
}
timer = setInterval(autoplay, 5000)
}
</script>
</head>
<body>
<div id="sliderbox">
<ul id="slider">
<li><img src="tab1.jpg" /></li>
<li><img src="tab2.jpg" /></li>
<li><img src="tab3.jpg" /></li>
</ul>
<ul id="slidertab">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>
