仿着写的一个jquery的图片切换小插件，代码如下：
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{ margin:0; padding:0; }
ul,li{ list-style:none; }
.cl{ zoom:1; }
.cl:after{ display:block; content:""; width:0; height:0; clear:both; overflow:hidden; }
.myDiv{ height:300px; }
.myDiv li{ float:left; width:100%; height:300px; line-height:300px; text-align:center; }
.myDiv img{ max-height:300px; }
</style>
</head>
<body>
<div class="myDiv cl">
<ul>
<li class="js-switch-item"><a href="#"><img data-src="1.jpg" src="load.gif"></a></li>
<li class="js-switch-item"><a href="#"><img data-src="2.jpg" src="load.gif"></a></li>
<li class="js-switch-item"><a href="#"><img data-src="3.jpg" src="load.gif"></a></li>
<li class="js-switch-item"><a href="#"><img data-src="4.jpg" src="load.gif"></a></li>
</ul>
</div>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/lunhuan.js"></script>
<script>
$(".myDiv").switch();
</script>
</body>
</html>
js:
;(function($){
$.extend({
addStyle: function(cssText){
var style = document.createElement("style");
style.type = "text/css";
try{
style.appendChild(document.createTextNode(cssText));
}catch(ex){
style.styleSheet.cssText = cssText;
}
document.getElementsByTagName("head")[0].appendChild(style);
}
});
$.fn.switch = function(obj,fun){
if((typeof obj).toLowerCase() === "function"){
fun = obj;
obj = {};
}
var opt = $.extend({
cont: "js-switch-item",
active: "active",//高亮class
auto: true, //是否自动
openNext: true,//是否开启上一个、下一个
events: "mouseenter",//触发事件
index: 0, //默认显示值
navClass: "",//导航class
navCss: "",//导航样式
navChildCss: "", //导航内部样式
init: null,//初始化
times: 3000,//延时时间
setFun: null
}, obj || {});
var $this = this;
var items = $this.find("."+opt.cont);
var itemsLen = items.length;
var nav,next,prev;//节点
var addActive = function(inx){//设置当前样式、显示
if(inx >= itemsLen){
inx = 0;
}
if(inx < 0){
inx = itemsLen-1;
}
var itemCur = items.eq(inx);
var imgDom = itemCur.find("img");
if(imgDom.data("src")){//加载图片
imgDom.prop("src",imgDom.data("src"));
imgDom.removeData("src");
}
items.fadeOut(500);
itemCur.fadeIn(500);
nav.removeClass(opt.active).eq(inx).addClass(opt.active); opt.index = inx;
}
opt.init = function(){//初始化
var tw = $this.width()||items.width()+"px";
var th = $this.height()||items.height()+"px";
var navHtml = "";
var activeClass = "";
$this.css({"position":"relative","width":tw,"height":th});
for(var i=0; i<itemsLen; i++){
navHtml = navHtml + ‘<span></span>‘;
}
items.css({"position":"absolute","left":0,"top":0,"z-index":1});
var navDom = $(‘<div class="js-switch-nav ‘+ opt.navClass +‘"></div>‘).html(navHtml);//创建节点
var navStyle = ".js-switch-nav{ width:100%; height:20px; position:absolute; left:0; bottom:20px; text-align:center;z-index:9; }.js-switch-nav span{ cursor:pointer; display:inline-block; height:5px; width:20px; background-color:#ddd; margin:0 5px; }.js-switch-nav span.active{ background-color:#c00; }.handleDom{ background:rgba(0,0,0,0.6); display:inline-block; height:40px; line-height:40px; width:35px; text-align:center; font-weight:bold; font-size:20px; font-family:serif,arial; color:#fff; cursor:pointer; position:absolute; z-index:99; text-decoration:none; top:50%; margin-top:-20px; display:none; }.js-preDom{ left:10%; }.js-nextDom{ right:10%; } ";
$.addStyle(navStyle + opt.navCss + opt.navChildCss);//创建样式
$this.append(navDom);
$this.append($(‘<a href="javascript:;" class="js-nextDom handleDom">></a><a href="javascript:;" class="js-preDom handleDom"><</a>‘));//创建上一个、下一个
nav = $this.find(".js-switch-nav span");
next = $this.find(".js-nextDom");
prev = $this.find(".js-preDom");
addActive(opt.index);
}
opt.init();
function _default(e){//阻止冒泡事件
try{
e.stopPrapagation();
}catch(ex){
window.event.cancleBubble = false;
}
}
var autoFun = function(){
opt.setFun = setInterval(function(){
opt.index++;
addActive(opt.index);
if(fun){//返回函数
fun(items.eq(opt.index),nav.eq(opt.index),opt.index);//当前切换元素，当前导航元素，当前索引
}
},opt.times);
}
$this.on("mouseenter",function(){
clearInterval(opt.setFun);
next.show();
prev.show();
}).on("mouseleave",function(){
clearInterval(opt.setFun);
autoFun();
next.hide();
prev.hide();
});
next.on("click",function(){//下一个
opt.index++;
addActive(opt.index);
});
prev.on("click",function(){//上一个
opt.index--;
addActive(opt.index);
});
nav.on(opt.events,function(e){
_default(e);
var $t = $(this);
var inx = $t.index();
clearInterval(opt.setFun);
if(inx === opt.index){
return $this;
}
addActive(inx);
opt.index = inx;
});
if(opt.auto){
autoFun();
}
return $this;
}
})(jQuery);
时间： 2024-10-10 01:32:16