Sublime Text
01首先在Sublime Text下面准备一个html和5张图片，图片宽高为600px和400px，如下图所示
02然后在HTML页面中布局轮播图的结构，如下图所示，主要包括图片区域，圆形按钮，左右箭头
03接下来需要给轮播图页面布局声明一些样式，请按照下图所示的样式代码进行声明
04最后就是实现轮播图的JS脚本功能，如下图所示，主要包括前进，后退，自动播放的功能
05最后运行页面，你就会看到下图所示的轮播图效果，点击圆圈或者左右箭头可以切换轮播图
其实很简单,方法也很多,不知道你想用什么方法实现.先介绍两种比较简单的
注:图片大小之类的自己用CSS控制
页面加入<img id="imgId"/>标签
然后引入javascript:
核心:
//给定图片路径数组
var imgs = ['1.jpg','2.jpg',...]
function switchoverCore(){
var img = document.getElementById("imgId")
img.src = imgs.shift(0)
imgs.push(img.src)
//如果用下面的第一种方法,请删除下行注释,第二种不用下行代码
//setTimeout("switchoverCore()",1000)
}
第一种方法
运用setTimeout()
setTimeout("switchoverCore()",1000)//这里的1000是1秒轮换一次,单位为ms(毫秒)
第二种方法
运用setInterval()
setInterval("switchoverCore()",1000)//1000意义解释同上
自己整理下就可以了...
<!DOCTYPE HTML><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
* {margin:0padding:0}
#div1 {width:712pxheight:108pxmargin:100px autoposition:relativebackground:redoverflow:hidden}
#div1 ul {position:absoluteleft:0top:0}
#div1 ul li {float:leftwidth:178pxheight:108pxlist-style:none}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1')
var oUl=oDiv.getElementsByTagName('ul')[0]
var aLi=oUl.getElementsByTagName('li')
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px'
setInterval(function (){
if(oUl.offsetLeft<-oUl.offsetWidth/2)
{
oUl.style.left='0'
}
oUl.style.left=oUl.offsetLeft-2+'px'
}, 30)
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li><img src="img2/1.jpg" /></li>
<li><img src="img2/2.jpg" /></li>
<li><img src="img2/3.jpg" /></li>
<li><img src="img2/4.jpg" /></li>
</ul>
</div>
</body>
</html>
//js
function getStyle(obj, name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name]
}
else
{
return getComputedStyle(obj, false)[name]
}
}
function startMove(obj, attr, iTarget)
{
clearInterval(obj.timer)
obj.timer=setInterval(function (){
var cur=0
if(attr=='opacity')
{
cur=Math.round(parseFloat(getStyle(obj, attr))*100)
}
else
{
cur=parseInt(getStyle(obj, attr))
}
var speed=(iTarget-cur)/6
speed=speed>0?Math.ceil(speed):Math.floor(speed)
if(cur==iTarget)
{
clearInterval(obj.timer)
}
else
{
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')'
obj.style.opacity=(cur+speed)/100
document.getElementById('txt1').value=obj.style.opacity
}
else
{
obj.style[attr]=cur+speed+'px'
}
}
}, 30)
}
//css
body { background: #666} ul { padding: 0margin: 0} li { list-style: none} img { border: 0}
.play { width: 400pxheight: 430pxmargin: 50px auto 0background: #999font: 12px Arial}
.big_pic { width: 400pxheight: 320pxoverflow: hiddenborder-bottom: 1px solid #cccbackground: #222position: relative}
.big_pic li { width: 400pxheight: 320pxoverflow: hiddenposition: absolutetop: 0left: 0z-index: 0background: url(images/loading.gif) no-repeat center center}
.mark_left { width: 200pxheight: 320pxposition: absoluteleft: 0top: 0background: redfilter: alpha(opacity:0)opacity: 0z-index:3000}
.mark_right { width: 200pxheight: 320pxposition: absoluteleft: 200pxtop: 0background: greenfilter: alpha(opacity:0)opacity: 0z-index:3000}
.big_pic .prev { width: 60pxheight: 60pxbackground: url(images/btn.gif) no-repeatposition: absolutetop: 130pxleft: 10pxz-index: 3001filter:alpha(opacity:0)opacity:0cursor: pointer}
.big_pic .next { width: 60pxheight: 60pxbackground: url(images/btn.gif) no-repeat 0 -60pxposition: absolutetop: 130pxright: 10pxz-index: 3001filter:alpha(opacity:0)opacity:0cursor: pointer}
.big_pic .text { position: absoluteleft: 10pxtop: 302pxz-index: 3000color: #ccc}
.big_pic .length { position: absoluteright: 10pxbottom: 4pxz-index: 3000color: #ccc}
.big_pic .bg { width: 400pxheight: 25pxbackground: #000filter: alpha(opacity=60)opacity: 0.6position: absolutez-index: 2999bottom: 0left: 0}
.small_pic { width: 380pxheight: 94pxposition: relativetop: 7pxleft: 10pxoverflow: hidden}
.small_pic ul { height: 94pxposition: absolutetop: 0left: 0}
.small_pic li { width: 120pxheight: 94pxfloat: leftpadding-right: 10pxbackground: url(images/loading.gif) no-repeat center centercursor: pointerfilter: alpha(opacity=60)opacity: 0.6}
.small_pic img { width: 120pxheight: 94px}
