js/html/css做一个简单的图片自动（auto）轮播效果//带注释

最新推荐文章于 2022-11-12 16:48:15 发布

weixin_30898109

最新推荐文章于 2022-11-12 16:48:15 发布

阅读量129

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/xkzy/p/3953961.html

版权

FF（firefox）/chrom/ie稳定暂无bug...
注意：请自己建立一个images文件，放入几张900*238的图片（注意图片格式和名字与程序中一致）。

1. [图片] 1.JPG

2. [图片] 2.JPG

3. [文件] style.css ~ 443B


#contain{
    float:left;
    width: 900px;
    height: 240px;
    border: 1px dotted red;
}
.imageShow{
    width: 900px;
    height: 238px;
    border: 1px dashed Olive;
    background: url(images/0.png);
}
#posi{
    margin: -30px 0 0 700px;
    width: 100px;
    height: 25px;
}
.radio{
    width: 15px;
    height: 15px;
    margin-left: -8px;
    cursor: pointer;
    background: red;
}
4. [文件] autoChangeImages.js ~

var i = 1;
function autoChangeImage(i){                //自动改变图片
        setTimeout("changeImage(i++); ", 1500);
        setTimeout("back(i); ", 1000);
        setTimeout("autoChangeImage(i = (i%5)); ", 1500);
}
function changeImage(idNum){
        document.getElementById("radio" + idNum).checked = "checked";
        switch(idNum){
            case 0:
                document.getElementById("imgIndex").style.backgroundImage = "url(images/0.png)";//改变首页图片
                break;
            case 1:
                document.getElementById("imgIndex").style.backgroundImage = "url(images/1.png)";
                break;
            case 2:
                document.getElementById("imgIndex").style.backgroundImage = "url(images/2.png)";
                break;
            case 3:
                document.getElementById("imgIndex").style.backgroundImage = "url(images/3.png)";
                break;
            case 4:
                document.getElementById("imgIndex").style.backgroundImage = "url(images/4.png)";
                break;
        }
}
5. [文件] autoChangeImages.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">韩式婚纱照片
    <head>http://www.huiyi8.com/hunsha/hanshi/
        <title>autoChangeImages</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type = "text/javascript" language = "javascript" src = "autoChangeImages.js"></script>
        <link rel = "stylesheet" type = "text/css" href = "style.css" />
    </head>

<body onLoad = "autoChangeImage();">
        <div id = "contain"> 
                <div id = "imgIndex" class = "imageShow">     
                </div>
                <div id = "posi">
                    <input id = "radio0" class = "radio" name = "lit" type = "radio" value = "0" onClick="changeImage(0)" />
                    <input id = "radio1" class = "radio" name = "lit" type = "radio" value = "0" onClick="changeImage(1)" />
                    <input id = "radio2" class = "radio" name = "lit" type = "radio" value = "0" onClick="changeImage(2)" />
                    <input id = "radio3" class = "radio" name = "lit" type = "radio" value = "0" onClick="changeImage(3)" />
                    <input id = "radio4" class = "radio" name = "lit" type = "radio" value = "0" onClick="changeImage(4)" />
                </div>
        </div>
</body>
</html>

转载于:https://www.cnblogs.com/xkzy/p/3953961.html

weixin_30898109

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js/html/css做一个简单的图片自动（auto）轮播效果//带注释

FF（firefox）/chrom/ie稳定暂无bug...注意：请自己建立一个images文件，放入几张900*238的图片（注意图片格式和名字与程序中一致）。1.[图片] 1.JPG2.[图片] 2.JPG3. [文件] style.css ~ 443B #contain{ float:left; w...
复制链接

扫一扫