<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>
发个截图也行呀css文件和jQuery文件、simplefoucs.js文件你是如何防的呀
尽量放在<body>的前面<head>这个最后慢</head>
jQuery文件一定放在simplefoucs.js的前面。
去边框：应该写border:none
变颜色：
a.nav:link,a.nav:visited,a.nav:active{color:#000background:#ccc url()}
a.nav:hover{color:#fffbackground:red url()}
<a href="" class="nav">变颜色</a>
