jQuery：图片展示效果

最新推荐文章于 2024-09-16 14:55:55 发布

atpains

最新推荐文章于 2024-09-16 14:55:55 发布

阅读量3.1k

点赞数

分类专栏： JavaScript 文章标签： jquery function tts border div ie

本文链接：https://blog.csdn.net/atpains/article/details/3075248

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

 
 <!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery</title>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
    var imgDivs;
    var imgNums = 0; //图片数量
    var isAutoPlay;
    var ShowIndex = -1;
    $(document).ready(function(){
        imgDivs = $("#photoShow>.photo");
        imgNums = imgDivs.length; //图片数量
        isAutoPlay = true;
        imgDivs.each(function(i){
            $(imgDivs[i]).css({"display": "none"});
            $("<span class='tt'>" + (i+1) + "</span>").appendTo(".t1");
        });
        var TTs = $(".t1>.tt");
        TTs.each(function(j){
            $(TTs[j]).hover(function(){
                isAutoPlay = false;
                var TTs_i = (parseInt($(this).text()) - 1);
                play(TTs_i);
            },function(){
                setTimeout("",5000);
                $(imgDivs[ShowIndex]).stop();
                isAutoPlay = true;
                autoPlay(ShowIndex);
            });
        });
        autoPlay(0);
    });
    
    function autoPlay(num)
    {
        if(!isAutoPlay){ return; }
        if(num < (imgNums - 1)){ numnum = num + 1; } else { num = 0; }
        play(num);
        setTimeout("autoPlay(ShowIndex);",5000);
    }
    
    function play(num2)
    {
        if (ShowIndex > -1){ $(imgDivs[ShowIndex]).fadeOut("slow"); }
        $(".phototxt>.txt").text(" ");
        $(imgDivs[num2]).fadeIn("slow");
        $(".phototxt>.txt").text($(imgDivs[num2]).find("img").attr("title"));
        ShowIndex = num2;
    }
    
    
    
</script>
<style type="text/css">
    #photoShow{
        border: solid 1px #C5E88E;
        overflow: hidden; /**//*图片超出DIV的部分不显示*/
        width: 490px;
        height: 169px;
        background: #C5E88E;
        position: absolute;
    }
    .photo{
        position: absolute;
        top: 0px;
        width: 490px;
        height: 169px;
    }
    .photo img{
        width: 490px;
        height: 169px;
    }
    .phototxt{
        width: 490px;
        height: 20px;
        position: absolute;
        left: 0px;
        bottom: 0px; /**//*介绍内容开始的时候不显示*/
        background: black;
        filter: alpha(opacity=50); /**//*IE透明*/
        opacity: 0.5; /**//*FF透明*/
        color: #FFFFFF;
    }
    .phototxt .txt{
        width: 360px;
        height: 20px;
        float:left;
    }
    .phototxt .t1{
        width:130px;
        height:20px;
        float: left;
    }
    .phototxt .t1 .tt{
        margin: 1px 6px;
        height: 16px;
        border: solid 1px #C5E88E;
    }
</style>
</head>
<body>
<div id="photoShow">
    <div class="photo">
        <img src="p1.jpg" title="张娜拉，韩国的" />
    </div>
    <div class="photo">
        <img src="p2.jpg" title="My Digital Story" />
    </div>
    <div class="photo">
        <img src="p3.jpg" title="不知道是什么图来的" />
    </div>
    <div class="photo">
        <img src="p4.jpg" title="我的Logo，Studio拼错了都不知道，汗一个。" />
    </div>
    <div class="photo">
        <img src="p5.jpg" title="四季图吧这是，但我分不清夏和秋" />
    </div>
    
    <div class="phototxt">
        <div class="txt"></div>
        <div class="t1">
            
        </div>
    </div>
</div>
</body>
</html>
 