jQuery 윤방도 플러그인
jquery 윤방도 플러그인
/** * * @authors Yvette Lau * @date 2015-11-1 16:26:27 * @version $1.0$ * **/
(function($){
$.carousel = {
carousel: function(_obj, _srcArray, _options){
/* */
var defaults = {
"div": {
"width": "1000px",
"height": "400px",
"position": "relative",
"cursor": "pointer"
},
"img": {
"width": _obj.css("width"),
"height": _obj.css("height"),
"display":"none"
},
"ul": {
"list-style" : "none",
"position": "absolute",
"bottom": "20px",
"margin": "0px",
"padding": "0px 0px"
},
"li":{
"float": "left",
"width": "10px",
"height": "10px",
"border": "2px solid #FFFFFF",
"border-radius": "10px",
"padding": "0px 0px",
"margin-left": "10px"
},
"indexClick":{
"backgroundColor": "#FFFFFF"
},
"a":{
"width": "60px",
"text-align": "center",
"font-size": "30px",
"font-weight": "normal",
"font-family": "Microsoft Yahei",
"text-decoration": "none",
"color": "#000000",
"height": parseInt(_obj.css("height"))/5 + "px",
"position": "absolute",
"top": 2 * parseInt(_obj.css("height"))/5 + "px",
"line-height": parseInt(_obj.css("height"))/5 + "px",
"display": "none",
"cursor": "pointer",
"user-select": "none",
"opacity": 0.7
},
"nextPicture": {
"background": "#FFFFFF",
"background-repear": "no-repeat",
"background-size": "cover",
"right": "20px"
},
"prePicture": {
"background": "#FFFFFF",
"background-repear": "no-repeat",
"background-size": "cover",
"left": "20px"
},
"interval":{
"period" : 2000
}
};
/* */
if(_options){
for(var i in defaults){
$.extend(defaults[i], _options[i]);
}
}
$.carousel.initCarousel(_obj, _srcArray, defaults); // div
$.carousel.insertImage(_obj,_srcArray, defaults); // ，
$.carousel.insertIndex(_obj,_srcArray, defaults); // index,
$.carousel.insertButtons(_obj,_srcArray, defaults); // 、 ，
$.carousel.loopImages(_obj, _srcArray, defaults); //
},
/********************************************************** * div * ***********************************************************/
initCarousel: function(_obj, _src, _defaults){
var _default = _defaults.div;// div
_default.width = _obj.css("width") || _default.width;
_default.height = _obj.css("height") || _default.height;
/* div */
_default.position = _obj.css("position") == "static" ? _default.position : _obj.css("position");
$.carousel.setCss(_obj, _default);
/* div, div*/
_obj.hover(function(){
$(this).find("a").css({"display": "block"});
clearInterval(window.carouselTimer);
},function(){
$(this).find("a").css({"display": "none"});
$.carousel.loopImages(_obj, _src, _defaults);
//setInterval(window.carouselTimer);
})
},
/********************************************************** * * ***********************************************************/
insertImage: function(_obj, _imgsrc, _defaults){
for(var i = 0; i < _imgsrc.length; i++){
var $img = $("<img>");
$img.attr({"idnex":i});
$img.attr({"src":_imgsrc[i]}).appendTo(_obj);
}
$.carousel.initImgStyle(_obj,_defaults);//
},
/********************************************************** * * ***********************************************************/
initImgStyle: function(_obj, _defaults){
var $images = _obj.find("img");
$.carousel.setCss($images, _defaults.img);
$.carousel.setCss($images.eq(0),{"display":"block"});/* */
},
/********************************************************** * ul li * ***********************************************************/
insertIndex: function(_obj, _imgsrc, _defaults){
var $ul = $("<ul>");
$ul.attr("id","carouselIndex");/* ul id = "index" */
$ul.appendTo(_obj);
for(var i = 0; i < _imgsrc.length; i++){
var $li = $("<li>");
$li.appendTo($("#carousel ul"));
}
$.carousel.initIndexStyle(_obj,_imgsrc, _defaults);
},
/********************************************************** * index * ***********************************************************/
initIndexStyle: function (_obj, _imgsrc, _defaults){
/*ul */
$.carousel.setCss($("#carouselIndex"), _defaults.ul);
/*li */
$.carousel.setCss($("#carouselIndex li"), _defaults.li);
/* */
var _ulWidth = $("#carouselIndex").width();
var _carouselWidth = _obj.width();
var _left = (_carouselWidth - _ulWidth)/2;
$.carousel.setCss($("#carouselIndex"),{"margin-left":_left});
/* */
$.carousel.setCss($("#carouselIndex li").eq(0),{"background-color": _defaults.indexClick.backgroundColor});
/* */
$("#carouselIndex li").click(function(){
$.carousel.indexClick($(this).index(), _obj, _imgsrc, _defaults);
});
},
/********************************************************** * 、 * ***********************************************************/
insertButtons: function(_obj, _imgsrc, _defaults){
var _next = $("<a>");
var _pre = $("<a>");
var reg = /^url/;
/* */
if(!reg.test(_defaults.nextPicture.background)){
_next.text(">");
}
if(!reg.test(_defaults.prePicture.background)){
_pre.text("<");
}
_next.attr({"id":"nextPicture"});
_pre.attr({"id":"prePicture"});
_next.appendTo(_obj);
_pre.appendTo(_obj);
$.carousel.initButtonstyle(_obj, _next, _pre, _imgsrc, _defaults);
},
/********************************************************** * 、 * ***********************************************************/
initButtonstyle: function (_obj, _next, _pre, _imgsrc, _defaults){
/* */
var _carHeight= _obj.height();
$.carousel.setCss(_obj.find("a"), _defaults.a);
/* */
$.carousel.setCss(_obj.find("#nextPicture"), _defaults.nextPicture);
$.carousel.setCss(_obj.find("#prePicture"), _defaults.prePicture);
/* */
_next.on("click",function(){$.carousel.nextPicture(_obj, _imgsrc, _defaults)});
_pre.on("click",function(){$.carousel.prePicture(_obj, _imgsrc, _defaults)});
},
/********************************************************** * * ***********************************************************/
setCss: function(_objElements,options){
for (var i = 0; i < _objElements.length; i++)
{
for(var cs in options){
_objElements.eq(i).css(cs, options[cs]);
}
}
},
/********************************************************** * * ***********************************************************/
loopImages: function(_obj, _imgsrc, _defaults){
window.carouselTimer = setInterval(function(){
_obj.find("img").each(function(){
if($(this).css("display") == "block"){
return index = $(this).index();
}
});
++index;
_obj.find("img").eq(index).css({"display": "block"}).siblings("img").css({"display":"none"});
_obj.find("#carouselIndex li").eq(index).css({"background-color": _defaults.indexClick.backgroundColor}).siblings("li").css({"background":"none"});
if(index == _imgsrc.length){
index = 0;
_obj.find("img").eq(0).css({"display":"block"}).siblings("img").css({"display":"none"});
_obj.find("#carouselIndex li").eq(0).css({"background-color": _defaults.indexClick.backgroundColor}).siblings("li").css({"background":"none"});
}
}, _defaults.interval.period);
},
/********************************************************** * * ***********************************************************/
nextPicture: function(_obj, _imgsrc, _defaults){
clearInterval(window.carouselTimer);
_obj.find("img").each(function(){
if($(this).css("display") == "block"){
return index = $(this).index();
}
});
index = (index == _imgsrc.length - 1) ? 0 : ++index;
_obj.find("img").eq(index).css({"display":"block"}).siblings("img").css({"display":"none"});
_obj.find("#carouselIndex li").eq(index).css({"background-color": _defaults.indexClick.backgroundColor})
.siblings("li").css({"background":"none"});
},
/********************************************************** * * ***********************************************************/
prePicture: function(_obj, _imgsrc, _defaults){
clearInterval(window.carouselTimer);
_obj.find("img").each(function(){
if($(this).css("display") == "block"){
return index = $(this).index();
}
});
index = (index == 0 ) ? _imgsrc.length - 1 : --index;
_obj.find("img").eq(index).css({"display":"block"}).siblings("img").css({"display":"none"});
_obj.find("#carouselIndex li").eq(index).css({"background-color": _defaults.indexClick.backgroundColor})
.siblings("li").css({"background":"none"});
},
/********************************************************** * index * ***********************************************************/
indexClick: function(_index, _obj, _imgsrc, _defaults){
_obj.find("img").eq(_index).css({"display":"block"}).siblings("img").css({"display":"none"});
_obj.find("#carouselIndex li").eq(_index).css({"background-color": _defaults.indexClick.backgroundColor})
.siblings("li").css({"background":"none"});
}
}
})(jQuery);윤방도 플러그인 호출.
우선 jquery를 포함합니다.js의 라이브러리, 이 위의 플러그인 파일을 도입합니다.다음은 내가 테스트할 때 작성한 Html 문서입니다. 이 플러그인은 매우 간단하고 사용하기 쉬우며,div만 정의하면 됩니다.
<!doctype html>
<html lang="en">
<head>
<!-- ，UTF-8 ，GBK gb2312 -->
<meta charset="UTF-8">
<meta name="Keywords" content=" ， ">
<meta name="Description" content=" ">
<meta name="Author" content="">
<title>Document</title>
<style> #carousel{ width:1200px; height:350px; } </style>
<!--css js -->
</head>
<body>
<div id = "carousel">
</div>
</body>
</html>
<script type = "text/javascript" src = "jquery-1.11.2.min.js"></script>
<script type = "text/javascript" src = "js/carousel_2.js"></script>
<script type = "text/javascript"> $(function(){ var $carousel = $("#carousel"); var imgSrc = ["images/banner-1.jpg", "images/banner-2.jpg", "images/banner-3.jpg","images/banner-4.jpg","images/banner-5.jpg"]; //$.carousel.carousel($carousel, imgSrc); //$.carousel.carousel($carousel, imgSrc, {"interval": {"period": 1000}}); $.carousel.carousel($carousel, imgSrc, {"a": {"display": "none"}}); // $.carousel.carousel($carousel, imgSrc,{"indexClick":{"backgroundColor": "#FF0000"}, // "li":{"border": "2px solid #09FF2E"}, // "prePicture":{"background":"url(images/alarm.png)"}}); // $.carousel.carousel($carousel, imgSrc,{"indexClick":{"backgroundColor": "#FF0000"}, // "li":{"border": "2px solid #09FF2E"}, // "prePicture":{"background":"url(images/alarm.png)"}, // "nextPicture":{"background":"url(images/alarm.png)"}}); }); </script>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
