jQuery + JavaScript で画像の自動スライド効果を実装

2012/04/29 06:37 Update

TAGS: jQuery | JavaScript | 画像 | スライド | 切り替え

jQuery + JavaScript で画像の自動スライド効果を実装する例。

表示例：

コード：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript">    
    $(document).ready(function(){    //初期処理時
        $(".opBtn a").attr("href","javascript:return false;");
        $(".opBtn a").each(function(index){
            $(this).click(function(){//数字をクリック時
                changeImage(this,index);//画像を変換させる
            });
        });
        autoChangeImage();
    });

    function autoChangeImage(){    //画像の自動切り替え
        for(var i = 0; i<=10000;i++){
            window.setTimeout("clickOpBtn("+(i%5+1)+")",i*3000);
        }
    }

    function clickOpBtn(index){    //指定する画像を表示
        $(".opBtn a:nth-child("+index+")").click();
    }

    function changeImage(element,index){    //画像の切り替え
        var arryImgs = ["images/01.jpg","images/02.jpg","images/03.jpg","images/04.jpg","images/05.jpg"];
        $(".opBtn a").removeClass("active");
        $(element).addClass("active");
        $(".imgs img").attr("src",arryImgs[index]);
    }
</script>
<style type="text/css">
<!--
div,a{margin:0;padding:0;}img{border:0px;}
.container{overflow:hidden;width:182px;height:76px;}
.imgs a{display:block;width:182px;height:64px;}
.opBtn{background-color:#888888;width:182px;height:12px;position:relative;top:-1px;_top:-5px;}
.opBtn div{float:right;}
.opBtn a{background-color:#666;border-left:#ccc 1px solid;line-height:12px;height:12px;font-size:10px;float:left;padding:0 7px;text-decoration:none;color:#fff;}
.opBtn a.active,.opBtn a:hover{background-color:#d34600;}
-->
</style>
</head>
<body>
<div class="container">
    <div class="imgs">
        <a href="#">
            <img id="pic" src="images/01.jpg" width="182" height="64" />
        </a>
    </div>
    <div class="opBtn">
        <div>
            <a class="active" href="">1</a>
            <a class="" href="">2</a>
            <a class="" href="">3</a>
            <a class="" href="">4</a>
            <a class="" href="">5</a>
        </div>
    </div>
</div>
</body>
</html>

※jquery.jsを./scriptに置く
※01.jpg～02.jpgを./imagesに置く

Relative Articles

Newest Top10

我要投稿

jQuery + JavaScript で画像の自動スライド効果を実装

Sponsored Link

Comments

Relative Articles

分类

Newest Top10