jQuery 이미지 전환을 위한 플러그인_jquery
- WBOY원래의
- 2016-05-16 18:01:071013검색
以下是参数说明：
| 参数名称 | 描述 |
| delay | 图片切换速度，单位毫秒 |
| maskOpacity | 遮罩层透明度，1为不透明，0为全透明 |
| numOpacity | 数字按钮透明度，1为不透明，0为全透明 |
| maskBgColor | 遮罩层背景色 |
| textColor | 标题字体颜色 |
| numColor | 数字按钮字体颜色 |
| numBgColor | 数字按钮背景色 |
| alterColor | 数字按钮选中项字体颜色 |
| alterBgColor | 数字按钮选中项背景颜色 |
- 插件name称：ImageScroll
复代码 代码如下:
(function($){
$.fn.ImageScroll = function(options) {
var defaults = {
delay: 2000,
maskOpacity: 0.6,
numOpacity: 0.6,
maskBgColor: "#000",
textColor: "#fff",
numColor: "#fff",
numBgColor: "#000",
alterColor: "#fff",
alterBgColor: "#999"
};
options = $.extend(기본값, 옵션)
var _this = $(this).css("display", "none"); >var _links = [], _texts = [], _urls = [];
var _list = _this.find("a")
var _timer;
var _index = 0; .each(function(index){
var temp = $(this).find("img:eq(0)");
_links.push($(this).attr("href")) ;
_texts.push(temp.attr("alt"))
_urls.push(temp.attr("src"))
if(_list.length < ;= 0) {
return;
}
else {
_this.html("")
}
var _width = _this.width(); _height = _this.height();
var _numCount = _list.length;
var _numColumn = Math.ceil(_numCount / 2)
var _img = $("") .css({"display":"block", "position":"absolute","top":"0px","left":"0px", "z-index":"2", "width": _width "px", "height":_height "px", "Background":"url(" _urls[0] ")"}).appendTo(_this);
var _mask = $("").attr("style","opacity:" options.maskOpacity)
.css({"position":"absolute", "left" :"0px", "하단":"0px", "z-index":"3", "너비":_너비 "px", "높이":"46px", "불투명도":options.maskOpacity, "배경 -color":options.maskBgColor}).appendTo(_this);
var _num = $("").attr("style","opacity:" options.numOpacity)
.css({"position":"absolute", "right" :"0px", "bottom":"0px", "z-index":"5", "width":_numColumn*22, "opacity":options.numOpacity, "height":"44px"}).appendTo (_이것);
var _text = $("").css({"position":"absolute", "left":"0px", "bottom":"0px", "z-index" :"4", "padding-left":"10px", "height":"44px", "line-height":"44px", "color":options.textColor}).html(_texts[0]) .appendTo(_this);
for(var i = 0; i < _numCount; i )
{
$("").html(i 1)
.css({"float ":"왼쪽", "너비":"20px", "높이":"20px", "text-align":"가운데", "배경색":options.numBgColor, "여백":"0px 2px 2px 0px", "cursor":"pointer", "line-height":"20px", "color":options.numColor})
.mouseover(function() {
if(_timer) {
clearInterval(_timer);
}
}).mouseout(function() {
_timer = setInterval(alter, options.delay);
}).click(function(){
numClick($(this))
}).appendTo(_num);
}
var _tempList = _num.find("a");
function alter() {
if(_index > _numCount-1) {
_index = 0;
}
_tempList.eq(_index).click();
}
function numClick(obj) {
var i = _tempList.index(obj);
_tempList.css({"Background-color":options.numBgColor, "color":options.numColor});
obj.css({"Background-color":options.alterBgColor, "color":options.alterColor});
_img.attr({"href":_links[i], "target":"_blank"})
.css({"opacity":"0", "Background":"url(" _urls [i] ")"})
.animate({"opacity":"1"}, 500);
_text.html(_texts[i]);
_index = i 1;
}
setTimeout(alter, 10);
_timer = setInterval(alter, options.delay);
_this.css("표시", "차단");
};
})(jQuery);
- 调用代码
复代码
代码如下:
<script> <br>$("#scroll").ImageScroll(); <br></script>
- 실행 결과
요약
그냥 작은 플러그인이라 커스터마이징이 별로 좋지 않을 수 있는데 IE8은 아직은 있는 것 같습니다. 잠시 후 수정될 작은 버그입니다. 버그를 발견하면 제 시간에 수정할 수 있도록 회신해 주세요. 코드 최적화에 대한 제안 사항이 있으면 알려주시기 바랍니다. 초보자인 저, =.= <script> <br>$("#scroll").ImageScroll(); <br></script>
- 실행 결과
- 매개변수를 사용하여 호출 
코드 복사 코드는 다음과 같습니다.
<script> <div class="codebody" id="code38452">$("#scroll").ImageScroll({delay:500, 마스크BgColor:"#ff0000"}) <br></script> 🎜>- 실행 결과요약
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.