js图片轮播

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>

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


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值