html轮播鼠标悬停效果,jQuery图片轮播加悬停效果

插件描述：jQuery图片轮播加悬停效果

=======以下内容由会员 只看不发了 提供============

使用方法

1.将文档内内部样式表保存到目录css下的style.css文件中，并在页面中链接到这个样式表文件

2.添加jquery.SuperSlide2.js

3.添加图片效果js(可根据实际情况整理到外部js文件中)$(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;

});

});

4.html部分

• 

  I

  家居软装设计概念Introduction soft home design

  

  家居软装设计概念Introduction soft home design

• 

  E

  家居软装设计概念Introduction soft home design

  

  家居软装设计概念Introduction soft home design

• 

  S

  家居软装设计概念Introduction soft home design

  

  家居软装设计概念Introduction soft home design

• 

  A

  家居软装设计概念Introduction soft home design

  

  家居软装设计概念Introduction soft home design