js定时器实现

html标签

		<div id="box"><img src="img/pic1.jpg" /><span id="page">1</span></div><div id="btn1" onclick="back()"><img src="img/btn1.png" /></div><div id="btn2" onclick="next()"><img src="img/btn2.png" /></div>

js代码

	<script>var box = document.getElementById('box');// var img = document.createElement("img");// img.setAttribute('src', 'img/pic1.jpg'); //给标签定义src链接// box.appendChild(img);box.style.float = "left";var imgs = document.getElementsByTagName('img')[0];var spans= document.getElementsByTagName('span')[0];var arrUrl = ['img/pic1.jpg', 'img/pic2.jpg', 'img/pic3.jpg'];var num = 0;//添加定时器function autoPlay() {timer = setInterval(function() {num++;num %= arrUrl.length; //以数组长度来循环切换imgs.src = arrUrl[num]; //显示第num张图片spans.innerHTML = num+1+'/'+arrUrl.length;}, 2000);}autoPlay(); //函数直接调用，打开页面就开始轮播// setTimeout(autoPlay, 2000); //打开页面2秒钟之后再开始轮播//下一张function next() {num++;num %= arrUrl.length; //以数组长度来循环切换imgs.src = arrUrl[num]; //显示第num张图片spans.innerHTML = num+1+'/'+arrUrl.length;}</script>

css

#box{position: absolute;left: 200px;right: 200px;top: 22px;
}
#btn1{float: left;position: absolute;left: 20px;top: 50%;
}
#btn2{float: right;position: absolute;right: 20px;top: 50%;
}
span{position: absolute;left: 50%;bottom: -20px;color: blueviolet;
}

css使用animation实现

html部分

<div></div>	

css

div {position: absolute;left: 200px;right: 200px;top: 22px;width: 1000px;height: 561px;background: #ffffff;/* animation-iteration-count: infinite; //动画播放次数 无限次 */animation: myfirst 8s linear 1s infinite normal;-moz-animation: myfirst 8s linear 1s infinite normal;/* Firefox */-webkit-animation: myfirst 8s linear 1s infinite normal;/* Safari and Chrome */-o-animation: myfirst 8s linear 1s infinite normal;/* Opera */
}@keyframes myfirst {0% {background-image: url(../img/pic1.jpg);}35% {background-image: url(../img/pic2.jpg);}70% {background-image: url(../img/pic3.jpg);}100% {background-image: url(../img/pic1.jpg);}
}@-moz-keyframes myfirst/* Firefox */{0% {background-image: url(../img/pic1.jpg);}35% {background-image: url(../img/pic2.jpg);}70% {background-image: url(../img/pic3.jpg);}100% {background-image: url(../img/pic1.jpg);}
}@-webkit-keyframes myfirst/* Safari and Chrome */{0% {background-image: url(../img/pic1.jpg);}35% {background-image: url(../img/pic2.jpg);}70% {background-image: url(../img/pic3.jpg);}100% {background-image: url(../img/pic1.jpg);}
}@-o-keyframes myfirst/* Opera */{0% {background-image: url(../img/pic1.jpg)}25% {background-image: url(../img/pic2.jpg)}50% {background-image: url(../img/pic3.jpg)}100% {background-image: url(../img/pic1.jpg)}
}

css使用animation实现往左逐渐移动效果

html部分

		<div><ul><li><img src="img/pic1.jpg" /></li><li><img src="img/pic2.jpg" /></li><li><img src="img/pic3.jpg" /></li></ul></div>

css

dl, ol, ul {padding: 0;
}
div {position: absolute;left: 200px;right: 200px;top: 22px;width: 1000px;height: 561px;background: #ffffff;overflow: hidden;
}li {float: left;width: 1000px;height: 561px;
}ul {width: 3000px;height: 561px;/* animation-iteration-count: infinite; //动画播放次数 无限次 */animation: myfirst 50s ease-in-out 0s infinite normal;-moz-animation: myfirst 50s ease-in-out 0s infinite normal;/* Firefox */-webkit-animation: myfirst 50s ease-in-out 0s infinite normal;/* Safari and Chrome */-o-animation: myfirst 50s ease-in-out 0s infinite normal;/* Opera */
}@keyframes myfirst {0% {margin-left: 0px;}20% {margin-left: -1000px;}25% {margin-left: -1000px;}45% {margin-left: -2000px;}50% {margin-left: -2000px;}70% {margin-left: -1000px;}75% {margin-left: -1000px;}95% {margin-left: 0px;}100% {margin-left: 0px;}}@-moz-keyframes myfirst/* Firefox */{0% {margin-left: 0px;}20% {margin-left: -1000px;}25% {margin-left: -1000px;}45% {margin-left: -2000px;}50% {margin-left: -2000px;}70% {margin-left: -1000px;}75% {margin-left: -1000px;}95% {margin-left: 0px;}100% {margin-left: 0px;}
}@-webkit-keyframes myfirst/* Safari and Chrome */{0% {margin-left: 0px;}20% {margin-left: -1000px;}25% {margin-left: -1000px;}45% {margin-left: -2000px;}50% {margin-left: -2000px;}70% {margin-left: -1000px;}75% {margin-left: -1000px;}95% {margin-left: 0px;}100% {margin-left: 0px;}
}@-o-keyframes myfirst/* Opera */{0% {margin-left: 0px;}20% {margin-left: -1000px;}25% {margin-left: -1000px;}45% {margin-left: -2000px;}50% {margin-left: -2000px;}70% {margin-left: -1000px;}75% {margin-left: -1000px;}95% {margin-left: 0px;}100% {margin-left: 0px;}
}