一、数字键控制代码：
<div style="position:relative top:-50px left:240px">
<a href="javascript:show(1)"><span id="I1" style="width:18px text-align:left background:gray">1</span></a>
<a href="javascript:show(2)"><span id="I2" style="width:18pxtext-align:leftbackground-color:gray">2</span></a>
<a href="javascript:show(3)"><span id="I3" style="width:18pxtext-align:leftbackground-color:gray">3</span></a>
<a href="javascript:show(4)"><span id="I4" style="width:18pxtext-align:leftbackground-color:gray">4</span></a>
<a href="javascript:show(5)"><span id="I5" style="width:18pxtext-align:leftbackground-color:gray">5</span></a>
<a href="javascript:show(6)"><span id="I6" style="width:18pxtext-align:leftbackground-color:gray">6</span></a></div>
<script language="javaScript">
var nowIndex=1
var maxIndex=6
function show(index)
{
if(Number(index)){
clearTimeout(theTimer)
nowIndex=index
}
for(var i=1i<(maxIndex+1)i++){
if(i==nowIndex)
{document.getElementById('pic'+nowIndex).style.display=''
document.getElementById('I'+nowIndex).style.backgroundColor='red'}
else
{document.getElementById('pic'+i).style.display='none'
document.getElementById('I'+i).style.backgroundColor='gray'}
}{
if(nowIndex==maxIndex)
nowIndex=1
else
nowIndex++
}
theTimer=setTimeout('show()',3000)
}
</script>
</div>
二、图片自动播放：
<div id="butong_net_left" style="overflow:hiddenwidth:1000px">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="butong_net_left1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
可以上jquery插件库这个网站看看，大部分资源是免费的。轮播图也有好多。bootstrap也提供轮播模板。
自己写的话，假如放3张轮播图，pic1，pic2，pic3。创建一个ul，ul中放5张图片，顺序是pic3，pic1，pic2，pic3，pic1，这样衔接起来。设置ul的宽度是500%，li的宽度是20%，这样图片就能一字排开，设置ul的父元素的样式为overflow:hidden再用CSS3的动画属性，让li中的图片元素位移或者让ul位移。
静态获取图片写法，给定图片的个数，用js实现轮播图自动转换。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- *******设置样式********** -->
<style type="text/css">
.show_div{
width: 400px
height: 400px
margin: 0 auto
border: 2px solid block
overflow: hidden
}
.scroll_div{
width: 2000px
height: 400px
}
.scroll_div img{
width: 400px
height: 400px
float: left
}
</style>
<!-- end -->
</head>
<body>
<div class="show_div">
<div class="scroll_div">
<img src="img/b.jpg" alt="">
<img src="img/c.jpg" alt="">
<img src="img/d.jpg" alt="">
<img src="img/a.jpg" alt="">
<img src="img/b.jpg" alt="">
</div>
</div>
</body>
<!-- *********js代码******** -->
<script type="text/javascript">
var scrollDiv = document.getElementsByClassName("scroll_div")[0]
// 定义初始值
var left =0
// 定义一个定时器 走一步
function move(){
var timer = setInterval(function(){
left --
if (left <= -1600) {
left = 0
}
if (left % -400 == 0) {
clearInterval(timer)
timer = null
}
scrollDiv.style.marginLeft = left + "px"
},10)
}
// 定义一个定时器 每隔固定时间 走一张
setInterval(function(){
move()
},5000)
</script>
</html>
