利用jquery实现百度预测焦点图自动切换效果



62 247 83



特效描述:利用jquery实现 焦点图 自动切换,利用jquery实现百度预测焦点图自动切换效果

代码结构

1. 引入CSS

<link rel="stylesheet" href="static/worldcup/home/jquery.bxslider_d1e7b3f1.css">
<link rel="stylesheet" href="static/worldcup/home/index_af8874d4.css">

2. HTML代码

    <h1>
      <a href="">
        百度预测
      </a>
    </h1>
    <div class="top_slide_wrap">
      <ul class="slide_box bxslider">
        <li>
          <a href="#" target="_blank">
            <img src="static/worldcup/home/01_d56c756b.jpg" alt="">
          </a>
          <div class="slide_info">
            <div class="slide_info_card">
              <a href="worldcup/" target="_blank">
                <div class="slide_info_card_text">
                  <h2>
                    世界杯预测
                  </h2>
                  <p>
                    巴西世界杯疯狂来袭,谁会成为最终的王者?谁会扮演神秘的黑马?百度预测再现章鱼保罗的神话
                  </p>
                  <p>
                    <strong>
                      点击进入&gt;
                    </strong>
                  </p>
                </div>
              </a>
              <div class="slide_info_card_bg">
              </div>
            </div>
          </div>
        </li>
        <li>
          <a href="#" target="_blank">
            <img src="static/worldcup/home/02_fea8ef37.jpg" alt="" title="城市预测">
          </a>
          <div class="slide_info">
            <div class="slide_info_card">
              <a href="trip/" target="_blank">
                <div class="slide_info_card_text">
                  <h2>
                    城市预测
                  </h2>
                  <p>
                    哪些城市将被挤爆,哪里的人最爱旅游,城市旅游预测尽在掌握
                  </p>
                  <p>
                    <strong>
                      点击进入&gt;
                    </strong>
                  </p>
                </div>
              </a>
              <div class="slide_info_card_bg">
              </div>
            </div>
          </div>
        </li>
        <li>
          <a href="#" target="_blank">
            <img src="static/worldcup/home/03_475be110.jpg" alt="">
          </a>
          <div class="slide_info">
            <div class="slide_info_card">
              <a href="tour/" target="_blank">
                <div class="slide_info_card_text">
                  <h2>
                    景点预测
                  </h2>
                  <p>
                    提供全国5A景区未来2日人流及舒适度的预测,为您短期旅游出行参考
                  </p>
                  <p>
                    <strong>
                      点击进入&gt;
                    </strong>
                  </p>
                </div>
              </a>
              <div class="slide_info_card_bg">
              </div>
            </div>
          </div>
        </li>
        <li>
          <a href="#" target="_blank">
            <img src="static/worldcup/home/04_4ce683b9.jpg" alt="">
          </a>
          <div class="slide_info">
            <div class="slide_info_card">
              <a href="exam/" target="_blank">
                <div class="slide_info_card_text">
                  <h2>
                    高考预测
                  </h2>
                  <p>
                    全国大学和专业哪些热门?哪些好考?高考预测,您的报考决策指南
                  </p>
                  <p>
                    <strong>
                      点击进入&gt;
                    </strong>
                  </p>
                </div>
              </a>
              <div class="slide_info_card_bg">
              </div>
            </div>
          </div>
        </li>
        <li>
          <a href="#" target="_blank">
            <img src="static/worldcup/home/05_340d9fb4.jpg" alt="">
          </a>
          <div class="slide_info">
            <div class="slide_info_card">
              <a href="disease/" target="_blank">
                <div class="slide_info_card_text">
                  <h2>
                    疾病预测
                  </h2>
                  <p>
                    流感来袭,哪个城市比较安全?治疗肝炎,哪个医院最受关注?疾病预测,您的流行病防治小帮手。
                  </p>
                  <p>
                    <strong>
                      点击进入&gt;
                    </strong>
                  </p>
                </div>
              </a>
              <div class="slide_info_card_bg">
              </div>
            </div>
          </div>
        </li>
      </ul>
      <div class="op_btns clearfix">
        <a href="####" class="op_btn op_prev">
          <span>
          </span>
        </a>
        <a href="####" class="op_btn op_next">
          <span>
          </span>
        </a>
      </div>
    </div>
    <script src="static/worldcup/home/jquery-1.11.1.min_044d0927.js">
    </script>
    <script src="static/worldcup/home/jquery.bxslider_e88acd1b.js">
    </script>
    <script src="static/worldcup/home/index_5d791568.js">
    </script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 切换按钮 表单 焦点图 幻灯片 图片轮播 带标题的焦点图 图片滑动 全屏焦点图 选项卡自动切换 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到