码迷,mamicode.com
首页 > 其他好文 > 详细

一个简单的图片轮播效果,

时间:2015-12-25 18:47:27      阅读:118      评论:0      收藏:0      [点我收藏+]

标签:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style type="text/css">
.asd{
background-color:#1ADC9D;
border:2px solid:#F30A0E;
width:25px;
height:25px;
color:#1A3CDC;    
}
</style>
<script>
<!--
var n=1;
var qwe=0;
function init()
{
    var list=document.getElementsByTagName("label");
    for(var i=0;i<list.length;i++)
    list[i].onmouseover=function()
    {
        qwe=1;
        var b=this.innerText*1;
        var img=document.getElementById("img");
        img.src="images/"+b+".jpg";
        document.getElementById("l"+b).className="asd";        
    }
    for(var i=0;i<list.length;i++)
    list[i].onmouseout=function()
    {
        qwe=0;
        var b=this.innerText*1;
        document.getElementById("l"+b).className="zxc";
        
    }
    fun1();
}
function clean()
{
    kiss=document.getElementsByTagName("label");
    for(var i=0;i<kiss.length;i++)
    kiss[i].className="zxc";
    
}
    function fun1()
    {
    if(qwe==0)
    {
        if(n==7)
          n=1;
        var p=document.getElementById("img");
    p.src="images/"+n+".jpg";
    clean();
    kiss=document.getElementsByTagName("label");
    kiss[n-1].className="asd";
    n++;
    }
    else
    kiss[n-2].className="zxcv";
    
        
    setTimeout("fun1()",1000);
}


//-->
</script>
<body onLoad="init()">
<div id="qwe">
<img width="800" height="600" id="img" src="images/6.jpg">
<div>
<label id="l1">&nbsp;1&nbsp;</label>
<label id="l2">&nbsp;2&nbsp;</label>
<label id="l3">&nbsp;3&nbsp;</label>
<label id="l4">&nbsp;4&nbsp; </label>
<label id="l5">&nbsp;5&nbsp; </label>
<label id="l6">&nbsp;6&nbsp; </label>
</div>
</div>
</body>
</html>

 

一个简单的图片轮播效果,

标签:

原文地址:http://www.cnblogs.com/JLUyeyu/p/5076526.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!