Sublime Text
01首先在Sublime Text下面准备一个html和5张图片，图片宽高为600px和400px，如下图所示
02然后在HTML页面中布局轮播图的结构，如下图所示，主要包括图片区域，圆形按钮，左右箭头
03接下来需要给轮播图页面布局声明一些样式，请按照下图所示的样式代码进行声明
04最后就是实现轮播图的JS脚本功能，如下图所示，主要包括前进，后退，自动播放的功能
05最后运行页面，你就会看到下图所示的轮播图效果，点击圆圈或者左右箭头可以切换轮播图
//轮播器var crs_num=1
function interval(){
carousel=setInterval(function(){
num2=crs_num*-800
$('.crs_img').animate({
attr:'x',
target:num2,
time:50,
speed:10,
})
$('.crs_words p').html($('.crs_img img').getnum(crs_num).attr('alt'))
$('#carousel li').css('color','#999')
$('#carousel li').getnum(crs_num).css('color','#333')
crs_num++
if(crs_num==3)crs_num=0
},3000)
}
interval()
$('#carousel li').hover(function(){
var num=$(this).childNum()*-800
clearInterval(carousel)
$('.crs_img').animate({
attr:'x',
target:num,
time:50,
speed:5,
})
$('.crs_words p').html($('.crs_img img').getnum($(this).childNum()).attr('alt'))
$('#carousel li').css('color','#999')
$(this).css('color','#333')
},function(){
interval()
})
animate是自己封装的，可能和jq不兼容
<input id="tt" type="button" value="点我开始播放" /><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>
