基于jQuery实现全屏焦点图切换特效

代码结构

1. 引入CSS

<link href="css/zzsc.css" rel="stylesheet" type="text/css" />
<link href="css/ie.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript" src="js/ie6png.js"></script>
<script type="text/javascript" src="js/functions.js"></script>

3. HTML代码

<div class="carousel">
  <div class="view">
    <div class="view-content">
      <div class="wrap carousel-item">
        <div class="slide-caption  comp-d" >
          <h2><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_1_title', 'OffsiteClick', '#', 4]);">创意与技术完美结合<br />
            每一个项目均为按需定制</a></h2>
          <div class="slide-callout">
            <p><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_1_subtitle', 'OffsiteClick', '#', 4]);">提供ios、Android、web开发，网站建设等互联网服务</a></p>
            <p class="more"><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_1_more', 'OffsiteClick', '#', 4]);">Read More&hellip;</a></p>
          </div>
        </div>
        <div class="carousel-image">
          <!-- 上传图片大小 width="522" height="348" -->
          <a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_1_img', 'OffsiteClick', '#', 4]);"><img class="main-image" src="images/zzsc6.jpg" width="522" height="348" alt="提供ios、Android、web开发，网站建设等互联网服务" /></a> </div>
      </div>
      <div class="wrap carousel-item">
        <div class="slide-caption  comp-c" >
          <h2><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_2_title', 'OffsiteClick', '#', 4]);">国际化风格<br />
            世界级品质标准</a></h2>
          <div class="slide-callout">
            <p><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_2_subtitle', 'OffsiteClick', '#', 4]);">好的作品需要宽广的视野、前瞻的眼光及对品牌的深度认知</a></p>
            <p class="more"><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_2_more', 'OffsiteClick', '#', 4]);">Read More&hellip;</a></p>
          </div>
        </div>
        <div class="carousel-image">
          <!-- 上传图片大小 width="522" height="348" -->
          <a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_2_img', 'OffsiteClick', '#', 4]);"><img class="main-image" src="images/zzsc5.jpg" width="522" height="348" alt="好的作品需要宽广的视野、前瞻的眼光及对品牌的深度认知" /></a> </div>
      </div>
      <div class="wrap carousel-item">
        <div class="slide-caption  comp-a" >
          <h2><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_3_title', 'OffsiteClick', '#', 4]);">
            <p> 企业级APP定制开发</p>
            <p> 丰富的移动app开发经验</p>
            </a></h2>
          <div class="slide-callout">
            <p><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_3_subtitle', 'OffsiteClick', '#', 4]);">优秀团队打造极致的交互体验作品</a></p>
            <p class="more"><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_3_more', 'OffsiteClick', '#', 4]);">Read More&hellip;</a></p>
          </div>
        </div>
        <div class="carousel-image">
          <!-- 上传图片大小 width="522" height="348" -->
          <a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_3_img', 'OffsiteClick', '#', 4]);"><img class="main-image" src="images/zzsc4.jpg" width="522" height="348" alt="优秀团队打造极致的交互体验作品" /></a> </div>
      </div>
      <div class="wrap carousel-item">
        <div class="slide-caption  comp-a" >
          <h2><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_4_title', 'OffsiteClick', '#', 4]);">
            <p> 响应式网页设计</p>
            <p> 网站可在多种浏览设备浏览</p>
            </a></h2>
          <div class="slide-callout">
            <p><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_4_subtitle', 'OffsiteClick', '#', 4]);">可使网站从桌面电脑显示器到移动电话或其他移动产品设备上阅读和浏览</a></p>
            <p class="more"><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_4_more', 'OffsiteClick', '#', 4]);">Read More&hellip;</a></p>
          </div>
        </div>
        <div class="carousel-image">
          <!-- 上传图片大小 width="522" height="348" -->
          <a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_4_img', 'OffsiteClick', '#', 4]);"><img class="main-image" src="images/zzsc3.jpg" width="522" height="348" alt="可使网站从桌面电脑显示器到移动电话或其他移动产品设备上阅读和浏览" /></a> </div>
      </div>
      <div class="wrap carousel-item">
        <div class="slide-caption  comp-c" >
          <h2><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_5_title', 'OffsiteClick', '#', 4]);">决胜移动互联网<br />
            迈步进入企业级应用</a></h2>
          <div class="slide-callout">
            <p><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_5_subtitle', 'OffsiteClick', '#', 4]);">Android将是未来移动企业级应用的主要平台</a></p>
            <p class="more"><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_5_more', 'OffsiteClick', '#', 4]);">Read More&hellip;</a></p>
          </div>
        </div>
        <div class="carousel-image">
          <!-- 上传图片大小 width="522" height="348" -->
          <a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_5_img', 'OffsiteClick', '#', 4]);"><img class="main-image" src="images/zzsc2.jpg" width="522" height="348" alt="Android将是未来移动企业级应用的主要平台" /></a> </div>
      </div>
      <div class="wrap carousel-item">
        <div class="slide-caption  comp-d" >
          <h2><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_6_title', 'OffsiteClick', '#', 4]);">零售商正依赖<br />
            移动应用提高客户忠诚度</a></h2>
          <div class="slide-callout">
            <p><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_6_subtitle', 'OffsiteClick', '#', 4]);">更大的购物篮，客户体验及忠诚度得到提升，且品牌覆盖更广</a></p>
            <p class="more"><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_6_more', 'OffsiteClick', '#', 4]);">Read More&hellip;</a></p>
          </div>
        </div>
        <div class="carousel-image">
          <!-- 上传图片大小 width="522" height="348" -->
          <a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_6_img', 'OffsiteClick', '#', 4]);"><img class="main-image" src="images/zzsc1.jpg" width="522" height="348" alt="更大的购物篮，客户体验及忠诚度得到提升，且品牌覆盖更广" /></a> </div>
      </div>
    </div>
  </div>
</div>
<div style="text-align:center;clear:both"><br>
</div>