21,886
社区成员
发帖
与我相关
我的任务
分享
$(function(){
$("#slide").slide({
affect:4,
time:3000,
speed:400,
dot_text:true,
});
});
(function($){
$.fn.slide=function(options){
var defaults= {
affect:4, //1:上下滚动; 2:幕布式; 3:左右滚动;4:淡入淡出
time: 4000, //间隔时间
speed:500, //动画快慢
dot_text:true,//按钮上有无序列号
};
var opts=$.extend(defaults,options);
var $this=$(this);
var ool=$("<div class='dot'><p></p></div>");
var $box=$this.find("ul");
var $li=$box.find("li");
var timer=null;
var num=0;
$this.append(ool);
$box.find("li").each(function(i){
ool.find("p").append($("<b></b>"));
if(opts.dot_text){
ool.find("b").eq(i).html(i+1)
}
})
ool.find("b").eq(0).addClass("cur");
switch(opts.affect){
case 1:
break;
case 2:
$box.find("li").css("display","none");
break;
case 3:
$box.css({"width":$li.eq(0).width()*$li.length});
$li.css("float","left");
break;
case 4:
$box.find("li").css("display","none");
break;
}
$box.find("li").eq(0).show(0);
ool.find("b").mouseover(function(){
num=$(this).index();
run ();
})
timer=setInterval(auto,opts.time);
function auto(){
num<$box.find("li").length-1?num++:num=0;
run();
}
function run(){
ool.find("b").eq(num).addClass("cur").siblings().removeClass("cur");
switch(opts.affect){
case 1:
$box.stop(true,false).animate({"top":-240*num},opts.speed);
break;
case 2:
$box.find("li").css({"position":"absolute"});
$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).slideDown(opts.speed);
break;
case 3:
$box.stop(true,false).animate({"left":-670*num},opts.speed);
break;
case 4:
$box.find("li").css({"position":"absolute"});
$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).fadeIn(opts.speed);
break;
}
}
$this.mouseover(function(){
clearInterval(timer);
})
$this.mouseout(function(){
timer=setInterval(auto,opts.time);
})
}
})(jQuery)
<div id="slide" class="wrap af4">
<ul class="slidebox">
<?php
$dosql->Execute("SELECT * FROM `#@__gallery` WHERE (`classid`='$cid' or `parentstr` LIKE '%$cid%') AND `delstate`='' AND `flag` like '%f%' ORDER BY `orderid` DESC");
while($row = $dosql->GetArray())
{
?>
<li><a style="visibility: visible; display: block;">
<img width="335px" height="355px" src="../<?php echo $row['picurl']; ?>" class="Picture" alt="<?php echo $row['title']; ?>" />
</a></li>
<?php
}
?>
</ul>
</div>
$(function(){
$("#slide").slide({
affect:4,
time:3000,
speed:400,
dot_text:true
});
});
第二段代码写在L_slide.js里
(function($){
$.fn.slide=function(options){
var defaults= {
affect:4, //1:上下滚动; 2:幕布式; 3:左右滚动;4:淡入淡出
time: 4000, //间隔时间
speed:500, //动画快慢
dot_text:true //按钮上有无序列号
};
var opts=$.extend(defaults,options);
var $this=$(this);
var ool=$("<div class='dot'><p></p></div>");
var $box=$this.find("ul");
var $li=$box.find("li");
var timer=null;
var num=0;
$this.append(ool);
$box.find("li").each(function(i){
ool.find("p").append($("<b></b>"));
if(opts.dot_text){
ool.find("b").eq(i).html(i+1)
}
})
ool.find("b").eq(0).addClass("cur");
switch(opts.affect){
case 1:
break;
case 2:
$box.find("li").css("display","none");
break;
case 3:
$box.css({"width":$li.eq(0).width()*$li.length});
$li.css("float","left");
break;
case 4:
$box.find("li").css("display","none");
break;
}
$box.find("li").eq(0).show(0);
ool.find("b").mouseover(function(){
num=$(this).index();
run ();
})
timer=setInterval(auto,opts.time);
function auto(){
num<$box.find("li").length-1?num++:num=0;
run();
}
function run(){
ool.find("b").eq(num).addClass("cur").siblings().removeClass("cur");
switch(opts.affect){
case 1:
$box.stop(true,false).animate({"top":-240*num},opts.speed);
break;
case 2:
$box.find("li").css({"position":"absolute"});
$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).slideDown(opts.speed);
break;
case 3:
$box.stop(true,false).animate({"left":-670*num},opts.speed);
break;
case 4:
$box.find("li").css({"position":"absolute"});
$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).fadeIn(opts.speed);
break;
}
}
$this.mouseover(function(){
clearInterval(timer);
})
$this.mouseout(function(){
timer=setInterval(auto,opts.time);
})
}
})(jQuery)
html 调用
<script type="text/javascript" src="template/skin/js/jquery.js"></script>
<script type="text/javascript" src="template/skin/js/L_slide.js"></script>
<script type="text/javascript" src="template/skin/js/main.js"></script>
然后还是没动啊 页面报了个错
Uncaught TypeError: Object [object Object] has no method 'slide' main.js:14