一款基于jQuery的图片左右滑动焦点图
今天给大家分享一款基于jQuery的焦点图插件,这款jQuery焦点图插件的特点是可以多张图片左右滑动切换,可以点击切换按钮进行图片滑动,同时也支持图片自动切换。另外,这款jQuery焦点图是宽屏的,看上去十分大气,很适合产品图片的展示。效果图如下:
在线预览 源码下载
实现的代码。
html代码:
- <div class="friend">
- <div class="mr_frbox">
- <img class="mr_frBtnL prev" src="images/mfrl.gif" />
- <div class="mr_frUl">
- <ul id="mr_fu">
- <li><a href="http://www.w2bc.com/">
- <img src="images/i.jpg" />
- </a>
- <div class="mr_zhe">
- <div class="mr_zhe_i">
- <h1>
- I</h1>
- <div class="mr_zhe_p">
- <h3>
- <span>家居软装设计概念</span>Introduction soft home design</h3>
- </div>
- </div>
- <div class="mr_zhe_hover">
- <h1>
- <img src="images/plus.gif"></h1>
- <div class="mr_zhe_p">
- <h3>
- <span>家居软装设计概念</span>Introduction soft home design</h3>
- </div>
- </div>
- </div>
- </li>
- <li><a href="http://www.w2bc.com/">
- <img src="images/i2.jpg" />
- </a>
- <div class="mr_zhe">
- <div class="mr_zhe_i">
- <h1>
- E</h1>
- <div class="mr_zhe_p">
- <h3>
- <span>家居软装设计概念</span>Introduction soft home design</h3>
- </div>
- </div>
- <div class="mr_zhe_hover">
- <h1>
- <img src="images/plus.gif"></h1>
- <div class="mr_zhe_p">
- <h3>
- <span>家居软装设计概念</span>Introduction soft home design</h3>
- </div>
- </div>
- </div>
- </li>
- <li><a href="http://www.w2bc.com/">
- <img src="images/i3.jpg" />
- </a>
- <div class="mr_zhe">
- <div class="mr_zhe_i">
- <h1>
- S</h1>
- <div class="mr_zhe_p">
- <h3>
- <span>家居软装设计概念</span>Introduction soft home design</h3>
- </div>
- </div>
- <div class="mr_zhe_hover">
- <h1>
- <img src="images/plus.gif"></h1>
- <div class="mr_zhe_p">
- <h3>
- <span>家居软装设计概念</span>Introduction soft home design</h3>
- </div>
- </div>
- </div>
- </li>
- <li><a href="http://www.w2bc.com/">
- <img src="images/i4.jpg" />
- </a>
- <div class="mr_zhe">
- <div class="mr_zhe_i">
- <h1>
- A</h1>
- <div class="mr_zhe_p">
- <h3>
- <span>家居软装设计概念</span>Introduction soft home design</h3>
- </div>
- </div>
- <div class="mr_zhe_hover">
- <h1>
- <img src="images/plus.gif"></h1>
- <div class="mr_zhe_p">
- <h3>
- <span>家居软装设计概念</span>Introduction soft home design</h3>
- </div>
- </div>
- </div>
- </li>
- </ul>
- </div>
- <img class="mr_frBtnR next" src="images/mfrr.gif" />
- </div>
- </div>
- $(document).ready(function () {
- /* 图片滚动效果 */
- $(".mr_frbox").slide({
- titCell: "",
- mainCell: ".mr_frUl ul",
- autoPage: true,
- effect: "leftLoop",
- autoPlay: true,
- vis: 4
- });
- /* 鼠标悬停图片效果 */
- $(".mr_zhe_hover").css("top", $('.mr_zhe').eq(0).height());
- $("li").mouseout(function (e) {
- 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()))) {
- $(this).find('.mr_zhe_i').show();
- $(this).find('.mr_zhe_hover').hide().stop().animate({ top: '190px' }, { queue: false, duration: 190 });
- return false;
- }
- });
- $('.mr_zhe').mouseover(function (event) {
- $(this).find('.mr_zhe_i').hide();
- $(this).find('.mr_zhe_hover').show().stop().animate({ top: '190px' }, { queue: false, duration: 190 });
- return false;
- });
- });
【一款基于jQuery的图片左右滑动焦点图】相关文章
本文来源:https://www.51html5.com/a1450.html
上一篇:jQuery带爆炸特效的焦点图动画
下一篇:jQuery图片左右滑动焦点图插件
﹝一款基于jQuery的图片左右滑动焦点图﹞相关内容
- 一款基于jquery和css3的响应式二级导航菜单
- 一款基于jquery和css3的头像恶搞特效
- 宽屏可左右切换的jQuery焦点图插件
- jQuery鼠标滑动切换焦点图
- 支持鼠标拖拽滑动的jQuery焦点图
- 一款基于HTML5的图形库ichartjs
- 7款基于jquery实现web前端的源码特效
- 5款基于jQuery实现的动画的源码
- 一款基于css3和jquery实现的动画弹出层
- jQuery图片下滑切换焦点图插件