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>
如果有问题,欢迎在下面评论讨论。谢谢。