JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > 一款基于jQuery的图片左右滑动焦点图

一款基于jQuery的图片左右滑动焦点图

今天给大家分享一款基于jQuery的焦点图插件,这款jQuery焦点图插件的特点是可以多张图片左右滑动切换,可以点击切换按钮进行图片滑动,同时也支持图片自动切换。另外,这款jQuery焦点图是宽屏的,看上去十分大气,很适合产品图片的展示。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

  1. <div class="friend">
  2.         <div class="mr_frbox">
  3.             <img class="mr_frBtnL prev" src="images/mfrl.gif" />
  4.             <div class="mr_frUl">
  5.                 <ul id="mr_fu">
  6.                     <li><a href="http://www.w2bc.com/">
  7.                         <img src="images/i.jpg" />
  8.                     </a>
  9.                         <div class="mr_zhe">
  10.                             <div class="mr_zhe_i">
  11.                                 <h1>
  12.                                     I</h1>
  13.                                 <div class="mr_zhe_p">
  14.                                     <h3>
  15.                                         <span>家居软装设计概念</span>Introduction soft home design</h3>
  16.                                 </div>
  17.                             </div>
  18.                             <div class="mr_zhe_hover">
  19.                                 <h1>
  20.                                     <img src="images/plus.gif"></h1>
  21.                                 <div class="mr_zhe_p">
  22.                                     <h3>
  23.                                         <span>家居软装设计概念</span>Introduction soft home design</h3>
  24.                                 </div>
  25.                             </div>
  26.                         </div>
  27.                     </li>
  28.                     <li><a href="http://www.w2bc.com/">
  29.                         <img src="images/i2.jpg" />
  30.                     </a>
  31.                         <div class="mr_zhe">
  32.                             <div class="mr_zhe_i">
  33.                                 <h1>
  34.                                     E</h1>
  35.                                 <div class="mr_zhe_p">
  36.                                     <h3>
  37.                                         <span>家居软装设计概念</span>Introduction soft home design</h3>
  38.                                 </div>
  39.                             </div>
  40.                             <div class="mr_zhe_hover">
  41.                                 <h1>
  42.                                     <img src="images/plus.gif"></h1>
  43.                                 <div class="mr_zhe_p">
  44.                                     <h3>
  45.                                         <span>家居软装设计概念</span>Introduction soft home design</h3>
  46.                                 </div>
  47.                             </div>
  48.                         </div>
  49.                     </li>
  50.                     <li><a href="http://www.w2bc.com/">
  51.                         <img src="images/i3.jpg" />
  52.                     </a>
  53.                         <div class="mr_zhe">
  54.                             <div class="mr_zhe_i">
  55.                                 <h1>
  56.                                     S</h1>
  57.                                 <div class="mr_zhe_p">
  58.                                     <h3>
  59.                                         <span>家居软装设计概念</span>Introduction soft home design</h3>
  60.                                 </div>
  61.                             </div>
  62.                             <div class="mr_zhe_hover">
  63.                                 <h1>
  64.                                     <img src="images/plus.gif"></h1>
  65.                                 <div class="mr_zhe_p">
  66.                                     <h3>
  67.                                         <span>家居软装设计概念</span>Introduction soft home design</h3>
  68.                                 </div>
  69.                             </div>
  70.                         </div>
  71.                     </li>
  72.                     <li><a href="http://www.w2bc.com/">
  73.                         <img src="images/i4.jpg" />
  74.                     </a>
  75.                         <div class="mr_zhe">
  76.                             <div class="mr_zhe_i">
  77.                                 <h1>
  78.                                     A</h1>
  79.                                 <div class="mr_zhe_p">
  80.                                     <h3>
  81.                                         <span>家居软装设计概念</span>Introduction soft home design</h3>
  82.                                 </div>
  83.                             </div>
  84.                             <div class="mr_zhe_hover">
  85.                                 <h1>
  86.                                     <img src="images/plus.gif"></h1>
  87.                                 <div class="mr_zhe_p">
  88.                                     <h3>
  89.                                         <span>家居软装设计概念</span>Introduction soft home design</h3>
  90.                                 </div>
  91.                             </div>
  92.                         </div>
  93.                     </li>
  94.                 </ul>
  95.             </div>
  96.             <img class="mr_frBtnR next" src="images/mfrr.gif" />
  97.         </div>
  98.     </div>
复制代码js代码:
  1. $(document).ready(function () {

  2.             /* 图片滚动效果 */
  3.             $(".mr_frbox").slide({
  4.                 titCell: "",
  5.                 mainCell: ".mr_frUl ul",
  6.                 autoPage: true,
  7.                 effect: "leftLoop",
  8.                 autoPlay: true,
  9.                 vis: 4
  10.             });

  11.             /* 鼠标悬停图片效果 */
  12.             $(".mr_zhe_hover").css("top", $('.mr_zhe').eq(0).height());
  13.             $("li").mouseout(function (e) {
  14.                 if ((e.pageX < $(this).offset().left || e.pageX > ($(this).offset().left + $(this).width())) || (e.pageY < $(this).offset().top || e.pageY > ($(this).offset().top + $(this).height()))) {
  15.                     $(this).find('.mr_zhe_i').show();
  16.                     $(this).find('.mr_zhe_hover').hide().stop().animate({ top: '190px' }, { queue: false, duration: 190 });
  17.                     return false;
  18.                 }

  19.             });
  20.             $('.mr_zhe').mouseover(function (event) {
  21.                 $(this).find('.mr_zhe_i').hide();
  22.                 $(this).find('.mr_zhe_hover').show().stop().animate({ top: '190px' }, { queue: false, duration: 190 });
  23.                 return false;
  24.             });

  25.         });
复制代码via:http://www.w2bc.com/Article/15603

【一款基于jQuery的图片左右滑动焦点图】相关文章

1. 一款基于jQuery的图片左右滑动焦点图

2. jQuery图片左右滑动焦点图插件

3. 一款基于jQuery的支持鼠标拖拽滑动焦点图

4. 一款基于jQuery的图片分组切换焦点图插件

5. jQuery滑动杆打分插件 可左右滑动

6. 一款基于jQuery的图片场景标注提示弹窗特效

7. 一款基于jQuery底部带缩略图的焦点图

8. 基于jQuery的网站首页宽屏焦点图幻灯片

9. 一款带左右控制按钮的图片滚动Jquery插件

10. 基于jQuery的图片相册滑出放大插件

本文来源:https://www.51html5.com/a1450.html

点击展开全部

﹝一款基于jQuery的图片左右滑动焦点图﹞相关内容

「一款基于jQuery的图片左右滑动焦点图」相关专题

其它栏目

也许您还喜欢