新建项目文件夹如下图所示
编写index.html文件，代码如下：
<DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>
lunbo
</title>
<link href="css/style.css" rel="stylesheet"/>
<script src="js/lunbo.js">
</script>
</head>
<body>
<div id="container">
<div id="list" style="left:-600px;">
<img src="images/5.jpg" alt="5.pg"/>
<img src="images/1.jpg" alt="5.pg"/>
<img src="images/2.jpg" alt="5.pg"/>
<img src="images/3.jpg" alt="5.pg"/>
<img src="images/4.jpg" alt="5.pg"/>
<img src="images/5.jpg" alt="5.pg"/>
<img src="images/1.jpg" alt="5.pg"/>
</div>
<div id="buttons">
<span index="1"class="on"> </span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:;" class="arrow" id="prev"><</a>
<a href="javascript:;" class="arrow" id="next">></a>
</div>
</body>
</html>
编写style.css文件，代码如下：
*{ margin:0px; text-decoration:none;}
body{margin-top:50px;}
#container{width:600px; height:400px; position:relative;border:3px solid #333;overflow: hidden; margin:0 auto;}
#list{width:4200px; height:400px; position:absolute; z-index:1;}
#list img{float:left;}
#buttons{position:absolute; height:10px; width:100px; z-index:2; bottom:20px; left:250px;}
#buttons span{cursor:pointer;/*假超链接样式*/ float:left; border:1px solid #fff; width:10px; height:10px; border-radius:10px; background:#333; margin-right:5px;}
#buttons .on{background:orangered;}
.arrow{cursor:pointer; display:none; line-height:39px; text-align:center; font-size:36px;
font-weight:bold; width:40px; height:40px; position:absolute; z-index:2; top:180px;
background-color: RGBA(0,0,0,.3); color:#fff;}
.arrow:hover{background-color:RGBA(0,0,0,.7);}
#container:hover .arrow{display:block;}
#prev{left:20px;}
#next{right:20px;}
编写control.js文件代码如下
window.onload=function(){
var container=document.getElementById('container');
var list=document.getElementById('list');
var buttons=document.getElementById('buttons').getElementsByTagName('span');
var pre=document.getElementById('prev');
var next=document.getElementById('next');
var index=1;
var animated=false;
var timer;
function showButton(){
for(var i=0;i<buttons.length;i++){
if(buttons[i].className=='on'){
buttons[i].className='';
break;
}
}
buttons[index-1].className="on";
}
function animate(offset){
animated=true;
var newleft=parseInt(list.style.left)+offset;
var time=300;//位移总时间
var interval=10;//位移间隔时间
var speed=offset/(time/interval);//每一次的位移量
function go(){
if((speed<0&&parseInt(list.style.left)>newleft)||(speed>0&&parseInt(list.style. left)<newleft)){
list.style.left=parseInt(list.style.left)+speed+'px';
setTimeout(go,interval);
}
else{
animated=false;
list.style.left=newleft+'px';
if(newleft>-600){
list.style.left=-3000+'px';
}
if(newleft<-3000){
list.style.left=-600+'px';
}
}
}
go();
}
function play(){
timer=setInterval(function(){
next.onclick();
},3000);
}
function stop(){
clearInterval(timer);
}
next.onclick=function(){
if(index==5){
index=1;
}
else{
index+=1;
}
showButton();
if(animated==false){
animate(-600);
}
}
pre.onclick=function(){
if(index==1){
index=5;
}
else{
index-=1;
}
showButton();
if(animated==false){
animate(600);
}
}
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=function(){
if(this.className=='on'){
return;
}
var myIndex=parseInt(this.getAttribute('index'));
var offset=-600*(myIndex-index);
index=myIndex;
showButton();
if(animated==false){
animate(offset);
}
}
}
container.onmouseover=stop;
container.onmouseout=play;
play();
}
images文件的图片截图如下
运行效果截图如下：
也可以用CSS控制来实现。
‘鼠标经过图像’ 功能简单明了。不需多讲，多试几次即可掌握。
现在具体讲一下 CSS控制实现 图片切换效果！
首先制作一个 ID为abc 的div 宽度50px; 高度50px; 在abc里面随便打一个字 设置一个空链接。
然后定义 abc 宽度50px; 高度50px; a标签的块形式 代码如下：
<style type="text/css">
<!--
#abc a {
height: 50px;
width: 50px;
display: block;
}
-->
</style>
<!--注意上面才是CSS代码，下面是div-->
<div id="abc"><href="#">字体</a></div>
然后设置 div的背景图片 比如图片名为 bj.gif
CSS代码变为：
<style type="text/css">
<!--
#abc a {
background-image: url(bj.gif);
height: 50px;
width: 50px;
display: block;
}
-->
</style>
最后 设置鼠标经过的样式 比如 鼠标经过图片为 bjj.gif
CSS代码 变为如下：
<style type="text/css">
<!--
#abc a {
background-image: url(bj.gif);
height: 50px;
width: 50px;
display: block;
}
#abc a:hover {
background-image: url(bjj.gif);
}
-->
</style>
这个图片切换
有12345数字一起切换
有小图大图一起切换
里面有教程和源码
参考资料：http://www.blueidea.com/common/shoutbox/redir.asp?6=t&id=11341
本回答被提问者采纳<style type="text/css">
.imglink a{display:inline-block;background-image:url(images/1.gif);}
.imglink a:hover{background-image:url(images/2.gif);}
</style>
<span class="imglink"><a href="http://baidu.com">百度</a></span>