zoukankan      html  css  js  c++  java
  • 带有缩略图和文字提示的轮播图

    这也是轮播图做了好久,还是刚进入前端岗位工作不久,自己空余时间写的。

    下面是代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>lubo</title>
    <script type="text/javascript" src="js/jquery-1.12.3.js"></script>
    <!--<script type="text/javascript" src="js/headerBg.js"></script>-->
    <style>
    a, img { border: none; }
    #headerBg { position: relative; margin: 40px auto 0 auto; 750px; height: 460px; overflow: hidden; border-radius: 10px 10px;}
    #headerBg .imgbox { 4500px; height: 380px; position: absolute; left: 5px; top: 4px; }
    #headerBg .imgbox img { float: left; 750px; height: 380px; }
    #headerBg .btnbox { 750px; height: 120px; position: absolute; top: 395px; bottom: 0px;}
    #headerBg .btnbox a { cursor: pointer; display: inline-block; float: left; 120px; height: 64px; margin: 0 0 0 4px;}
    #headerBg .btnbox a img { position: relative; display: inline; 116px; height: 58px; float: left; border: 3px solid gray; border-radius: 5px 5px; }
    #headerBg .btnbox a .img_hover { border: 3px solid ghostwhite; border-radius: 5px 5px; }
    #headerBg .btn {
    40px;
    height: 90px;
    ">rgba(0, 0, 0, 0.5);
    position: absolute;
    font-size: 80px;
    color: white;
    font-family: "宋体";
    margin-top: 250px;
    display: none;
    }
    #headerBg .btn:hover { ">rgba(0, 0, 0, 0.7); cursor: pointer; }
    #headerBg .btn_left { left: 0px; top: -105px; }
    #headerBg .btn_right { left: 710px; top: -105px; }
    body{ background: black ; }

    #headerBg .move_text{overflow:hidden;750px;height:40px;position:absolute;top:345px;">rgba(0, 0, 0, 0.5); }
    #headerBg .move_text h3{margin:10px 0 10px 0;font-size:20px;text-indent: 3em;Letter-spacing: 1em;color:ghostwhite;}
    </style>
    </head>
    <body>
    <div id="headerBg">
    <div class="imgbox">
    <img alt="Danx" src="img/1.jpg" width="750" height="380"/>
    <img alt="Danx" src="img/2.jpg" width="750" height="380"/>
    <img alt="Danx" src="img/3.jpg" width="750" height="380"/>
    <img alt="Danx" src="img/4.jpg" width="750" height="380"/>
    <img alt="Danx" src="img/5.jpg" width="750" height="380"/>
    <img alt="Danx" src="img/6.jpg" width="750" height="380"/>
    </div>

    <div class="move_text">

    <div id="move_text0" class="move_text_div">
    <h3>标题1</h3>
    </div>

    <div id="move_text1" class="move_text_div">
    <h3>标题2</h3>
    </div>

    <div id="move_text2" class="move_text_div">
    <h3>标题3</h3>
    </div>

    <div id="move_text3" class="move_text_div">
    <h3>标题4</h3>
    </div>

    <div id="move_text4" class="move_text_div">
    <h3>标题5</h3>
    </div>
    <div id="move_text5" class="move_text_div">
    <h3>标题5</h3>
    </div>
    </div>

    <div class="btnbox">
    <a onmouseover="btn_m_over(0)"><img alt="Danx" id="btn_img0" class="thumb img_hover" src="img/1.jpg"/></a>
    <a onmouseover="btn_m_over(1)"><img alt="Danx" id="btn_img1" class="thumb" src="img/2.jpg"/></a>
    <a onmouseover="btn_m_over(2)"><img alt="Danx" id="btn_img2" class="thumb" src="img/3.jpg"/></a>
    <a onmouseover="btn_m_over(3)"><img alt="Danx" id="btn_img3" class="thumb" src="img/4.jpg"/></a>
    <a onmouseover="btn_m_over(4)"><img alt="Danx" id="btn_img4" class="thumb" src="img/5.jpg"/></a>
    <a onmouseover="btn_m_over(5)"><img alt="Danx" id="btn_img5" class="thumb" src="img/6.jpg"/></a>
    </div>

    <div class="btn btn_left">&lt;</div>
    <div class="btn btn_right">&gt;</div>
    </div>

    <script type="text/javascript">
    $( "#headerBg" ).hover( function()
    {
    $( ".btn" ).css( "display", "block" );
    }, function()
    {
    $( ".btn" ).css( "display", "none" );
    } );

    var nub=$(".imgbox img" ).size();
    var count=nub-1;
    $(".move_text_div").hide();
    $("#move_text0").show();

    $(".img_hover").animate({bottom:'10px'});
    var i=1;
    var m_over=true;

    function zx_slider(){
    if(m_over){
    if(i<0){i=count;}
    //p
    $(".move_text_div").hide();
    $("#move_text"+i).show();
    //p end
    //btn
    $(".btnbox img").stop(true,true);
    $(".btnbox img").removeClass("img_hover");
    $(".btnbox img").animate({bottom:'0px'},200);
    $("#btn_img"+i).addClass("img_hover");
    $("#btn_img"+i).animate({bottom:'10px'},200);
    //btn end
    $(".imgbox").stop();
    $(".imgbox").animate({left:'-750'*i+'px'});
    /*if(i<count){
    i++;
    }else{
    i=0;
    }*/
    i++;
    console.log( i );
    if(i ===count+1){
    i = 0;
    }
    }
    }

    $(".btn_left").click(function(){
    m_over=true;
    if(i==0){i=count-1}else{i=i-2;}
    zx_slider();
    m_over=false;
    });

    $(".btn_right").click(function(){
    m_over=true;
    zx_slider();
    m_over=false;
    });

    //鼠标悬停动画
    function btn_m_over(btn_i){
    if(i-1!=btn_i){
    m_over=true;
    i=btn_i;
    zx_slider();
    m_over=false;
    }
    }

    zx_timer = setInterval( "zx_slider();", 2000 );
    $( "#headerBg" ).mouseover( function()
    {
    m_over = false;
    } );
    $( "#headerBg" ).mouseout( function()
    {
    m_over = true;
    } );
    </script>
    </body>
    </html>
    以上是个人写的,可供参考。

  • 相关阅读:
    Begin Example with Override Encoded SOAP XML Serialization
    State Machine Terminology
    How to: Specify an Alternate Element Name for an XML Stream
    How to: Publish Metadata for a WCF Service.(What is the Metadata Exchange Endpoint purpose.)
    Beginning Guide With Controlling XML Serialization Using Attributes(XmlSerializaiton of Array)
    Workflow 4.0 Hosting Extensions
    What can we do in the CacheMetaData Method of Activity
    How and Why to use the System.servicemodel.MessageParameterAttribute in WCF
    How to: Begin Sample with Serialization and Deserialization an Object
    A Test WCF Service without anything of config.
  • 原文地址:https://www.cnblogs.com/yf-html/p/5674337.html
Copyright © 2011-2022 走看看