简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

jquery 이미지 회전 effect_jquery

WBOY
풀어 주다： 2016-05-16 18:22:11
원래의
1058명이 탐색했습니다.

렌더링:
jquery 이미지 회전 effect_jquery
코드에 오류가 있으면 언제든지 수정하세요.

코드 복사 코드 다음과 같습니다:

/**
* @author leepood
* @title 자동 이미지 회전 효과
* @version v2.0
* @E-Mail leepood@gmail.com
* @notice: 이미지를 표시하려면 숫자는 설정에서 조정할 수 있지만 해당 이미지의 매개변수를 ImagesArray에 추가해야 합니다
*/
functionchangeImages()
{

var 설정={
'width':'330px ' ,
'height':'200px',
'images_count':'4',
'time':'1800', //이미지 전환 속도
'imageschange_border_color':' #fcf0a1 '

};
var ImagesArray=[{'src':'images/1.bmp','href':'http://www.baidu.com/','title ': '가을, 금 조각','target':'_blank'},
{'src':'images/2.bmp','href':'http://www.163.com ','title':'봄은 사람들에게 활력을 줍니다','target':'_blank'},
{'src':'images/3.bmp','href':'http:// iagyje.blog .163.com','title':'용안이 제일 맛있어요 매번 많이 먹습니다','target':'_blank'},
{'src':'images/4. bmp', 'href':'http://www.sina.com/','title':'불타오르는 붉은 단풍잎, 기회되면 구경해보세요','target':'_blank'}] ;
//요소 추가, 변수 정의
var $div_imageschange=$("#imageschange")
$div_imageschange.children().css("margin","0px").css(" padding","0px") ;
$div_imageschange.append("
");
$div_imageschange.append("
");
var $div_images_title=$("#images_title");
var $div_images_button=$("#images_button");
var count=setting. Images_count;
for( var a=0;a{
var b=a 1
$div_images_button.append("" b "< /a>");
}
var $link_buttons=$("#imageschange a");
//요소의 초기 속성 설정
// 가장 바깥쪽 컨테이너는 모든 요소를 ​​보유합니다
$div_imageschange.css("width",setting.width)
.css("position","relative")
.css("height",setting.height)
.css(" border","solid 1px " settings.imageschange_border_color)

//버튼을 보유하는 요소
$div_images_button.css("position","absolute")
.css("높이", "20px")
.css("오른쪽","0px")
.css("bottom","21px")
.css("불투명도" ,"1")
.css("float","right");

//텍스트 설명이 포함된 요소
$div_images_title.css("position","absolute")
.css("높이", "20px")
.css("너비",setting.width)
.css("bottom","0px")
.css("오른쪽" ,"0px")
.css("배경색","검정색")
.css("불투명도","0.6")
.css("글꼴 크기","12px" )
.css("color ","white");
//버튼 조합
$link_buttons.css("width","15px")
.css("height"," 15px")
.css( "테두리","solid 1px #fcf0a1")
.css("display","block")
.css("margin","0 5px 5px 5px" )
.css("font -size","12px")
.css("text-align","center")
.css("float","left")
.css("color","white ")
.css("text-장식","none")
//초기화 설정
$div_imageschange.css("Background-image"," url('images/1.bmp ')");
$div_images_title.html(imagesArray[0].title);
$("#images_button a:first").css("배경"," #fcf0a1");
함수 변경(색인){
$div_imageschange.css("배경-이미지", "없음");
$div_imageschange.css("배경-이미지", "url( '"imageArray[index].src "')");
$div_images_title.html("");
$div_images_title.html(imagesArray[index].title);
$($link_buttons[ index]).attr("href",imageArray[index].href).attr("target",imageArray[index].target)
$link_buttons.css("배경",""); >$($link_buttons[index] ).css("배경","#fcf0a1");
}
//자동 전환 코드
function autochange(){
var i=0 ;
setInterval(function( ){
change(i);
if(i==setting.images_count-1)
{
i=-1;
}
i ;
}, 설정.시간);
}
autochange();
//수동 전환 코드
$link_buttons.each(function(i){
$( this).hover(function() {
change(i);
})
})
$(document).ready(function(){
changeImages();

});


표시할 사진 수는 설정에서 조정할 수 있지만 해당 사진의 매개변수를 이미지배열
관련 라벨：
jquery
원천：php.cn
이전 기사：자바스크립트 함수의 인수 매개변수_기본 지식 다음 기사：jQuery 구현 원리의 시뮬레이션 코드 -1 핵심 part_jquery
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
jquery를 사용하여 HTML 데이터 테이블에서 선택되지 않은 행의 값을 검색하는 방법 버튼을 클릭하지 않은 모든 행의 값을 얻으려고합니다. 예를 들어, 첫 번째 행의 버튼을 클릭했을 때 클릭되지 않은 행의 값을 검색하고 싶습니다. vartable=...
에서 2024-04-05 09:26:49
0
1
1418
최종 사용자의 현재 선택에 따라 선택 상자에서 선택한 옵션을 이동하려면 jquery 스크립트가 필요합니다. 최종 사용자가 선택 상자 요소를 통해 항목의 순위를 지정할 수 있는 HTML 페이지가 있습니다. 간단한 데모를 보려면 바이올린을 참조하세요: https://jsf...
에서 2024-04-04 18:40:04
0
1
3528
북마크를 통해 순수 CSS로 요소를 만들었습니다. 생성되었으나 표시되지 않음 내 코드는 다음과 같습니다: g=document.createElement('div');g.setAttribute("id","divcon...
에서 2024-04-04 17:27:27
0
1
417
Safari/Firefox iOS에서 양식 데이터를 보낼 수 없습니다. 이는 iOS의 Safari/Firefox를 제외한 모든 플랫폼에서 작동합니다: jQuery("#gform_1").one('submit',func...
에서 2024-04-04 12:53:48
0
1
303
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！