zoukankan      html  css  js  c++  java

  • Web图片轮流显示

    引言:
    图片交替显示 (有文字说明)
    我们经常看到有的网站上 图片以幻灯片的方式 交替显示 我说的就是这个效果

    下面写一下步骤: 我自己整理一下思路 也帮助需要的人

    原理:使用jQuery 做到的

    第1步  建立jquery文件 (jQuery.js)
       这个文件的内容 我就不贴在这里了(自行从网上下载)

    第2步  Slideshow.js

    JQuery代码 
     var $$ = $.fn;

    $$.extend({
      SplitID : function()
      {
            return this.attr('id').split('-').pop();
      },

      Slideshow : {
        Ready : function()
        {
          $(    'div.tmpSlideshowControl')
            .hover(
              function() {
                $(    this).addClass('tmpSlideshowControlOn');
              },
              function() {
                $(    this).removeClass('tmpSlideshowControlOn');
              }
            )
            .click(
              function() {
                $$.Slideshow.Interrupted     = true;

                $(    'div.tmpSlide').hide();
                $(    'div.tmpSlideshowControl').removeClass('tmpSlideshowControlActive');

                $(    'div#tmpSlide-' + $(this).SplitID()).show()
                $(    this).addClass('tmpSlideshowControlActive');
              }
            );

              this.Counter = 1;
              this.Interrupted = false;

              this.Transition();
        },

        Transition : function()
        {
              if (this.Interrupted) {
                return;
          }

              this.Last = this.Counter - 1;

              if (this.Last < 1) {
                this.Last = 3;
          }

          $(    'div#tmpSlide-' + this.Last).fadeOut(
                'slow',
            function() {
              $(    'div#tmpSlideshowControl-' + $$.Slideshow.Last).removeClass('tmpSlideshowControlActive');
              $(    'div#tmpSlideshowControl-' + $$.Slideshow.Counter).addClass('tmpSlideshowControlActive');
              $(    'div#tmpSlide-' + $$.Slideshow.Counter).fadeIn('slow');

              $$.Slideshow.Counter    ++;

                  if ($$.Slideshow.Counter > 3) {
                $$.Slideshow.Counter     = 1;
              }

              setTimeout(    '$$.Slideshow.Transition();', 5000);
            }
          );
        }
      }
    });

    $(document).ready(
      function() {
        $$.Slideshow.Ready();
      }
    );

    第3步 Slideshow.css

    样式表代码 
    body {
        font-family    : Arial, sans-serif;
    }
    div#tmpSlideshow     {
        margin    : 10px;
        padding    : 30px 0 0 0;
        position    : relative;
        height    : 335px;
        width    : 755px;
        border    : 1px solid rgb(200, 200, 200);
    }
    div.tmpSlide     {
        position    : absolute;
        top    : 0;
        left    : 0;
        width    : 730px;
        height    : 332px;
        display    : none;
    }
    div.tmpSlide img     {
        float    : left;
        margin    : 30px 0 0 15px;
        width    : 527px;
        border    : 1px solid rgb(244, 244, 244);
    }
    div#tmpSlideshowControls     {
        position    : absolute;
        bottom    : 2px;
        left    : 20px;
        width    : 175px;
    }
    div.tmpSlideshowControl     {
        border    : 1px solid #e1dece;
        float    : left;
        margin    : 0 5px 0 0;
        background    : url('Feature.png') no-repeat;
        width    : 38px;
        height    : 36px;
        color    : #554d31;
        font    : 14px Arial, sans-serif;
        text-align    : center;
        cursor    : pointer;
    }
    div.tmpSlideshowControl span     {
        line-height    : 36px;
        vertical-align    : middle;
    }
    div.tmpSlideshowControlOn     {
        background-image    : url('FeatureOver.png');
    }
    div.tmpSlideshowControlActive     {
        border    : 1px solid rgb(161, 155, 137);
    }
    div.tmpSlideCopy     {
        position    : absolute;
        left    : 565px;
        top    : 20px;
        width    : 170px;
    }
    div#tmpSlideshow h4     {
        color    : #b90f23;
        text-transform    : uppercase;
        font    : 14px Arial, sans-serif;
        margin    : 10px 0;
    }
    div.tmpSlideCopy p     {
        font    : 11px Arial, sans-serif;
        line-height    : 1.75em;
    }

    第4步 准备好文中提到的几个图片文件(在Html页面中的)
    第5步 index.html

    网页前台代码 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></p>
    <html xmlns='http://www.w3.org/1999/xhtml'>
         <head>
          <meta http-equiv='content-type' content='text/html; charset=utf-8' />
          <meta http-equiv='content-language' content='cn' />
          <title>jquery 图片切换效果 a Fade Slideshow jQuery 网页设计爱好者www.html.org.cn整理</title>

            <link rel='stylesheet' type='text/css' href='Slideshow.css' />
            <script type='text/javascript' src='jQuery.js'></script>
            <script type='text/javascript' src='Slideshow.js' charset='utf-8'></script>

         </head>
         <body>
          <div id='tmpSlideshow'>
            <div id='tmpSlide-1' class='tmpSlide'>
              <img src='3.jpg' alt='Slide' />   
              <div class='tmpSlideCopy'>
                <p  >Lorem ipsum dolor</p>
                <p>
              闻中心图片频道，汇集国内、国际、体育、娱乐、论坛贴图等各频道精
              彩图片，以及纪实、风光、搞笑、火辣、性感、动物和老
              
                </p>

              </div>
            </div>
            <div id='tmpSlide-2' class='tmpSlide'>
              <img src='4.jpg' alt='Slide' />   
              <div class='tmpSlideCopy'>
                <h4>Ut et leo ut quam</h4>
                <p>
               闻中心图片频道，汇集国内、国际、体育、娱乐、论坛贴图等各频道精
              彩图片，以及纪实、风光、搞笑、火辣、性感、动物和老 闻中心图片频道，汇集国内、国际、体育、娱乐、论坛贴图等各频道精
              彩图片，以及纪实、风光、搞笑、火辣、性感、动物和老
                </p>

              </div>
            </div>
            <div id='tmpSlide-3' class='tmpSlide'>
              <img src='2.jpg' alt='Slide' />   
              <div class='tmpSlideCopy'>
                <h4>Sed sapien quam</h4>
                <div style="overflow:scroll; height:220px">
              闻中心图片频道，汇集国内、国际、体育、娱乐、论坛贴图等各频道精
              彩图片，以及纪实、风光、搞笑、火辣、性感、动物和老 闻中心图片频道，汇集国内、国际、体育、娱乐、论坛贴图等各频道精
              彩图片，以及纪实、风光、搞笑、火辣、性感、动物和老 闻中心图片频道，汇集国内、国际、体育、娱乐、论坛贴图等各频道精
              彩图片，以及纪实、风光、搞笑、火辣、性感、动物和老
                </div>
            
              </div>
            </div>
            <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
            <div id='tmpSlideshowControls' style="float:left">
         
              <div class='tmpSlideshowControl' id='tmpSlideshowControl-1'><span>1</span></div>
              <div class='tmpSlideshowControl' id='tmpSlideshowControl-2'><span>2</span></div>
              <div class='tmpSlideshowControl' id='tmpSlideshowControl-3'><span>3</span></div>
            </div>
          </div>
    <br/>
         </body>
    </html>

    最后 如果想将这个效果显示在其他页面的某个地方 则使用iFrame
        <iframe src="photoShow.aspx" width="100%" height = "370" frameborder="no" scrolling="no" id="Iframe2"
                            runat="server" ></iframe> 
  • 相关阅读:
    汉诺塔3（递推）
    逃生（拓扑排序）
    洛谷P2048 [NOI2010]超级钢琴 （优先队列+RMQ）
    有条件的最短路
    hdu 5950 Recursive sequence（矩阵快速幂）
    线性基模板
    P2023 [AHOI2009]维护序列 （线段树区间修改查询）
    hdu 6534 Chika and Friendly Pairs（莫队+树状数组）
    2019 计蒜之道 复赛
    poj 2449 k短路（A*+spfa）
  • 原文地址：https://www.cnblogs.com/zhwl/p/1966877.html
Copyright © 2011-2022 走看看