<li><img src="lunbo-img/liehuo_net_600x400_4.jpg" width="600" height="400" /></li>
<li><img src="lunbo-img/liehuo_net_600x400_5.jpg" width="600" height="401" /></li>
<li><img src="lunbo-img/liehuo_net_600x400_2.jpg" width="600" height="400" /></li>
<li><img src="lunbo-img/liehuo_net_600x400_3.jpg" width="600" height="400" /></li>
简单的图片轮播
效果图：
图片轮播DW代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
height:320px;
}
#pic ul{
list-style-type:none;
position:absolute;
width:3560px;
}
#pic ul li{
float:left;
width:890px;
}
#pic img{
width:890px;
height:320px;
}
#tip {
var numslen=nums.length;
function over(arg){
this.mouseover=function(){
movePic(-arg*width,-arg*height,interval);
classNormal();
classCurrent(arg);
}
}
for(var i=0; i<numslen; i++){
font-size:16px;
font-weight:normal;
}
#tip .current{
color:#F00;
font-size:20px;
font-weight:bolder;
}
#mybox {
//加载window.onload函数
function addEventLoad(func){
var oldonload=window.onload;
if(typeof(window.onload)!="function"){
window.onload=func;
}else{
window.onload=function(){
var repeat="movePic("+fx+","+fy+","+interval+")";
elem.movement=setTimeout(repeat,interval);////建立定时事件，使图片动态向pic层图片的x轴位置移动
}
//当鼠标移动到数字上时切换图片
function changePic(width,height,interval){////width为图片宽度，height为图片高度，inerval为定时器延时
}
#jianting {
height: 40px;
width: 600px;
margin: 0 auto;
border: 1px solid #D03204;
}
#pic {
position:relative;
overflow: hidden;
width:3000px;
height:400px;
}
#pic ul{
list-style-type:none;
position:absolute;
width:3000px;
}
#pic ul li{
float:left;
width:600px;
}
#pic img{
width:600px;
height:400px;
}
#tip {
height: 25px;
width: 240px;
</ul>
</div>
<div id="tip">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
<div id="jianting"></div>
<script type="text/javascript">
var newOver=new over(i);////使用闭包函数over来传递参数i
nums[i].onmouseover=newOver.mouseover;////应用闭包中的方法mouseover
}
}
//图片定时切换
var autoKey=false;////设置定时开关初始值为假
var t=window.setInterval("autoChange(600,0,5)",3000);
height: 25px;
width: 240px;
position:absolute;
right:0;
bottom:0;
}
#tip span{
padding:5px 15px;
text-align:center;
cursor:pointer;
color:#FFF;
}
#tip .normal{
color:#fff;
curTip[0].className="current";
}
addEventLoad(current);
//初始化数字序号样式
function classNormal(){
var nums=document.getElementById("tip").getElementsByTagName("span");
for(var i=0; i<nums.length; i++){
nums[i].className="normal";
}
}
//初始化当前数字序号样式
function classCurrent(n){
var nums=document.getElementById("tip").getElementsByTagName("span");
nums[n].className="current";
}
//移动图片
function movePic(fx,fy,interval){
var elem,xpos,ypos;
elem=document.getElementById("pic");
xpos=parseInt(elem.style.left);////取不到style.left和style.top的值，因此下面先做一下判断，如果是NaN就初始化赋值为0
var o=document.getElementById("mybox");
o.onmouseover=function(){
autoKey=true;
}
o.onmouseout=function(){
autoKey=false;
}
var nums=document.getElementById("tip").getElementsByTagName("span");
oldonload();
func();
}
}
}
////初始化文件加载时默认图片及默认样式
function current(){
var curImg,curTip;
curImg=document.getElementById("pic");
curImg.style.left="0px";
curTip=document.getElementById("tip").getElementsByTagName("span");
elem.style.top="0px";
}
if(xpos==fx && ypos==fy){
return true;////此判断为当前图片，返回值为真
}
//动画移动图片
var dist;
if(xpos<fx){////做水平判断，由于是横向移动，因此没做垂直方向判断
