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不兼容
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style>
.show{
display:inline-block
}
.hide{
display:none
}
div{
border:1px solid red
width:218px
height:218px
}
</style>
</head>
<body>
<!--
onmouseover: 鼠标悬停事件
onmouseout: 鼠标离开事件
-->
<div onmouseover = "pause1()" onmouseout = "lunbo()">
<img src = "../images/01.jpg" class = "show"/>
<img src = "../images/02.jpg" class = "hide"/>
<img src = "../images/03.jpg" class = "hide"/>
<img src = "../images/04.jpg" class = "hide"/>
<img src = "../images/05.jpg" class = "hide"/>
<img src = "../images/06.jpg" class = "hide"/>
</div>
<script>
//轮播
var id = null
//轮播次数
var index = 0
function lunbo(){
id = setInterval(function(){
index++
//获取所有的图片(数组)
var imgs = document.getElementsByTagName("img")
//将它们都隐藏
for(var i=0i<imgs.lengthi++){
imgs[i].className = "hide"
}
console.log(imgs.length)
//将下一张图片显示
var next = index%imgs.length
imgs[next].className = "show"
},1000)
}
//暂停轮播
function pause1(){
clearInterval(id)
}
//页面加载后，自动调用轮播
lunbo()
</script>
</body>
</html>
