简易图片轮换功能实现-优快云博客

Js给普通的web页面带来了很多特效，给人们的感觉总是赏心悦目。

下面用Js和Jquery给大家做一个简单的图片轮换功能。

做出来的效果就是下图这样的：

如果你不会，但是又想自己做一个这样的效果，那就你一步一步跟着来：

首先我们创建一个php文件，或者HTML文件都可以。

首先建好div,只设想轮换的图片只有四张，那么这四张图片放右下角的1234就是四个div，再加一个放图片的大div,还有一个就是1234那一排透明的div。一起6个div。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<style type="text/css">
*{padding:0px;margin:0px;}
*
/*这个是大div的样式，给一个边框，边框色是黑色的。给宽高*/
#bigdiv{border:1px solid black;width:352px;height:202px;}

/*下面的四个#div1至#div4是给右下角下面的1234定位*/
#div4{position:absolute;left:325px;top:179px;}
#div3{position:absolute;left:300px;top:179px;}
#div2{position:absolute;left:275px;top:179px;}
#div1{position:absolute;left:250px;top:179px;}
/*下面这个是透明层的div的样式*/
#bgdiv{
        background-color:black;width:352px;
        height:25px;position:absolute;
        left:0px;top:176px;filter:alpha(opacity:50);
        opacity:0.5;}
/*下面的四个#div1至#div4是给右下角下面的1234的css样式*/        
#div1,#div2,#div3,#div4{
    width:20px;height:20px;
    background-color:white;
    text-align:center;           
}


</style>


</head>

<body>

<!--注意：下面这个div，就是装图片的div-->

<div id="bigdiv"><img id="img" src="images/1.jpg" width="350" height="200"/></div>

<!--注意：下面这个div，就是透明层的div-->

<div id="bgdiv"></div>

<!--注意：下面就是1234,4个div，给每个div添加一个当鼠标移上去(onmouseover)的事件，鼠标移上的时候去调用aa这个方法-->
<div id="div1" onmouseover="aa('1.jpg')">1</div>     
<div id="div2" onmouseover="aa('2.jpg')">2</div>
<div id="div3" onmouseover="aa('3.jpg')">3</div>
<div id="div4" onmouseover="aa('4.jpg')">4</div>
<!--注意：此处应用了jquery文件,我的CSND资源里面有jquery，欢迎去免费下载链接：http://download.youkuaiyun.com/detail/u011986449/6415469-->
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

<!--注意：此处写一个方法aa，括号里面的imgName就是images目录下的图片名称-->

function aa(imgName){

<!--#img大div里面放图片的，在同级目录建一个文件夹images用来放4张图片，四张图片的命名为"1.jpg","2.jpg","3.jpg","4.jpg"。 attr() 方法设置或返回被选元素的属性值。css() 方法返回或设置匹配的元素的一个或多个样式属性。fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。-->
        $("#img").attr("src","images/"+imgName);
        $("#img").css("display","none");
       $("#img").fadeIn(800);
 

 }

<!--注意：这里给一个数组，命名是"1.jpg","2.jpg","3.jpg","4.jpg"是有规律的。-->
var list = new Array("1.jpg","2.jpg","3.jpg","4.jpg");

var index=0;

<!--注意：这里加一个bb()的方法，它的作用是四张图片轮换完了之后，再从第一张开始轮换，形成一个循环。同时也要注意命名是"1.jpg","2.jpg","3.jpg","4.jpg"也是有规律的。-->
function bb(){
    if(index==4){
    index=0;
}
    aa(list[index]);

    index++;

<!--注意：setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。我们可以用它来定时每张图片轮换的时间，下面的2000指的是两秒-->
    setTimeout("bb()",2000);
    
   

}

<!--注意：此处调用aa();bb();两个方法，让程序执行的时候自动调用-->
aa();
bb();
</script>

</body>
</html>

如果是按照上面一步一步来的，那么你应该完成了吧。下面给一段清晰的没有注释的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<style type="text/css">
*{padding:0px;margin:0px;}
*
#bigdiv{border:1px solid black;width:352px;height:202px;}
#div4{position:absolute;left:325px;top:179px;}
#div3{position:absolute;left:300px;top:179px;}
#div2{position:absolute;left:275px;top:179px;}
#div1{position:absolute;left:250px;top:179px;}
#bgdiv{
        background-color:black;width:352px;
        height:25px;position:absolute;
        left:0px;top:176px;filter:alpha(opacity:50);
        opacity:0.5;}
#div1,#div2,#div3,#div4{
    width:20px;height:20px;
    background-color:white;
    text-align:center;           
}

</style>

</head>
<body>
<div id="bigdiv"><img id="img" src="images/1.jpg" width="350" height="200"/></div>
<div id="bgdiv"></div>
<div id="div1" onMouseOver="aa('1.jpg')">1</div>
<div id="div2" onMouseOver="aa('2.jpg')">2</div>
<div id="div3" onMouseOver="aa('3.jpg')">3</div>
<div id="div4" onMouseOver="aa('4.jpg')">4</div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function aa(imgName){
        $("#img").attr("src","images/"+imgName);
 $("#img").css("display","none");
 $("#img").fadeIn(800);
 
 }
var list = new Array("1.jpg","2.jpg","3.jpg","4.jpg");
var index=0;
function bb(){
    if(index==4){
    index=0;
}
    aa(list[index]);
    index++;
    setTimeout("bb()",2000);
    
    
}
aa();
bb();
</script>


</body>
</html>

如果有问题，欢迎在下面评论讨论。谢谢。