> 웹 프론트엔드 > JS 튜토리얼 > JQuery로 구현된 이미지 및 텍스트 자동 회전판 효과 플러그인

JQuery로 구현된 이미지 및 텍스트 자동 회전판 효과 플러그인

不言
풀어 주다: 2018-06-28 14:23:59
원래의
1638명이 탐색했습니다.

이 글에서는 JQuery에서 구현한 자동 이미지 및 텍스트 캐러셀 효과 플러그인을 주로 소개하며, jQuery의 마우스 이벤트 처리 방법과 애니메이션 효과가 필요한 친구들이 참고할 수 있습니다.

이 글에서는 구현된 자동 이미지 및 텍스트 캐러셀 효과에 대해 설명합니다. JQuery 플러그인으로. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

intervalID = setInterval(cycleImage, slidetime);
$(".main_image .desc").show(); // 展示图片
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); // 设置透明度
//点击和悬停事件
$(".image_thumb ul li:first").addClass('active'); 
$(".image_thumb ul li").click(function(){ 
// 设置参数
var imgAlt = $(this).find('img').attr("alt"); 
var imgTitle = $(this).find('a').attr("href"); 
var imgDesc = $(this).find('.block').html(); // 从类block中获取html
var imgDescHeight = $(".main_image").find('.block').height();
// 计算类block的高度
if ($(this).is(".active")) { // 如果已经激活了,之后的操作...
return false; 
} else {
// 动画操作
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85,marginBottom: "0" }, 250 );
$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
});
}
$(".image_thumb ul li").removeClass('active'); 
$(this).addClass('active'); 
return false;
}) .hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
// Toggle Teaser
$("a.collapse").click(function(){
$(".main_image .block").slideToggle();
$("a.collapse").toggleClass("show");
});
로그인 후 복사

위 내용은 모두의 학습에 도움이 되기를 바랍니다.

관련 추천:

jQuery는 페이지 전환 애니메이션 효과를 실현합니다

jQuery와 CSS3는 좋아요 기능을 실현합니다

위 내용은 JQuery로 구현된 이미지 및 텍스트 자동 회전판 효과 플러그인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿