jquery Banner 图片自动轮换显示

zoukankan html css js c++ java

jquery Banner 图片自动轮换显示

代码
<!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=utf-8" />
<title>无标题文档</title>

<link href="banner.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.timers-1.2.js"></script>
<script type="text/javascript">
$(function(){

    var index=0;//显示图片集合索引
    var speed=4000;//轮转速度
    var showImgSpeed=1000;//图片渐显速度
    var imageBigArray;
    var imageSmallArray;
    var minSmaopacity=0.5;
    var minBigopacity=0.05;
    var isAuto=1;//1=自动，2=停止

    function init(){
        imageBigArray=$(".bigimg");
        imageSmallArray=$(".smallimg");
        $("#top_banner_bottom").html("");
        var tmp="";
        for(var i=0;i<imageSmallArray.length;i++){
            tmp="<img id='bannerImg_"+i+"' src='"+imageSmallArray[i].src+"' width='100' height='60'/></div>"+tmp;
            tmp="<div id='m"+i+"' class='imgblock'>"+tmp;
        }
        $("#top_banner_bottom").html(tmp);

        for(var i=0;i<imageSmallArray.length;i++){
            $("#m"+i).css({opacity: minSmaopacity});
            $("#bannerImg_"+i).hover(
              function () {
                onOver(this.id.replace("bannerImg_",""));
              },
              function () {
                onOut(this.id.replace("bannerImg_",""));
              }
            );
        }
        $("#img_banner").attr("src",imageBigArray[index].src).css({opacity: 0.1}).animate({opacity: 1.0},showImgSpeed);
        $("#m"+index).css({opacity: minSmaopacity}).animate({opacity: 1.0},showImgSpeed);
    }

    function changeImg(i){
        $("#img_banner").animate({opacity: 1.0},{duration:showImgSpeed});
        $("#m"+i).animate({opacity: 1.0},{duration:showImgSpeed});
    }
    function every(){
        if(isAuto==1){
            $("#m"+index).animate({opacity:minSmaopacity},{duration:showImgSpeed});
            $("#img_banner").animate({opacity:minBigopacity },{duration:showImgSpeed,complete:function(){
                if((index+1)<imageSmallArray.length){
                    index=index+1;
                }else{
                    index=0;
                }
                $("#img_banner").attr("src",imageBigArray[index].src)
                $(document).stopTime();
                $(document).everyTime(speed, every);
                changeImg(index);
            }});
        }
    }
    function onOver(i){
        $(document).stopTime();
        isAuto=0;
        for(var j=0;j<imageSmallArray.length;j++){
            if(j!=i){
                $("#m"+j).css({opacity: minSmaopacity});
            }else{
                index=i;
                $("#img_banner").attr("src",imageBigArray[i].src).css({opacity: 0.1}).animate({opacity: 1.0},showImgSpeed);
                $("#m"+j).css({opacity: 1.0});
            }
        }
    }
    function onOut(i){
        isAuto=1;
        $("#m"+i).css({opacity: minSmaopacity});
        $(document).everyTime(speed, every);
    }
    init();
    $(document).everyTime(speed, every)
});

</script>

</head>

<body>
<div id="top_banner" class="banner_style"  >
<img id="img_banner" width="800" height="250px" />
    <div id="top_banner_bottom" class="banner_bottom">

    <img src="1.jpg" class="bigimg" />
    <img src="2.jpg" class="bigimg" />
    <img src="3.jpg" class="bigimg" />

    <img src="1-1.jpg" class="smallimg" />
    <img src="2-2.jpg" class="smallimg" />
    <img src="3-3.jpg" class="smallimg" />
    </div>
</div>

</body>
</html>

CSS
代码
.banner_style{
    width:800px;
    height:250px;
    position:relative;
    padding:0px; border:0px;
}
.banner_bottom{
    width:100%;
    text-align:right;
    bottom:0px;
    position:absolute;
    height:90px;
    line-height:90px;
    vertical-align:middle;
    overflow:hidden;
    display:table-cell;
    background-image:url(banner_bg.png)
}
.imgblock{
    float:right;
    width:100px;
    height:60px;
    margin-top:12px;
    margin-right:5px;
    border:2px solid #FFF;
    display:inline-block;
    cursor:pointer;
}

banner_bg.png 是个透明的背景图片

查看全文

相关阅读:
Intellij IDEA 使用spring-boot-devtools无效解决办法一
 使用docker安装myql/redis等软件
 mybatis generator插件系列--分页插件
 mybatis generator插件系列--lombok插件（减少百分之九十bean代码）
linux设置端口转发（一键设置）
redis教程(The little redis book中文版)
Redis 5种数据结构及其使用场景举例--STRING
String中hashCode方法的线程安全
 java ShutdownHook介绍与使用
 ACM 模板库

原文地址：https://www.cnblogs.com/skyblue/p/1892131.html