用旋钮控制图片左右滚动

用按钮控制图片左右滚动

用按钮控制图片左右滚动
用按钮控制图片左右滚动,默认不会滚动的
XML/HTML Code
<div class="layout">
<div class="hotPic">
<div class="JQ-slide">
<div class="JQ-slide-nav"><a class="prev" href="javascript:void(0);">?</a><a class="next" href="javascript:void(0);">?</a></div>
<div class="wrap">
<ul class="JQ-slide-content imgList">
<li>
<a href="#" class="img"><img src="../erlianhaote.png" width="140" height="100" /></a>
<a href="#" class="txt">二连浩特</a>
</li>
<li>
<a href="#" class="img"><img src="../dalian.jpg" width="140" height="100" /></a>
<a href="#" class="txt">大连</a>
</li>
<li>
<a href="#" class="img"><img src="../sanya.jpg" width="140" height="100" /></a>
<a href="#" class="txt">三亚</a>
</li>
<li>
<a href="#" class="img"><img src="../dandong.png" width="140" height="100" /></a>
<a href="#" class="txt">丹东</a>
</li>
<li>
<a href="#" class="img"><img src="../zhoushan.jpg" width="140" height="100" /></a>
<a href="#" class="txt">中山</a>
</li>
<li>
<a href="http://www.freejs.net" class="img"><img src="../freejs.jpg" width="140" height="100" /></a>
<a href="#" class="txt">freejs</a>
</li>
<li>
<a href="#" class="img"><img src="../mohe.png" width="140" height="100" /></a>
<a href="#" class="txt">漠河</a>
</li>
</ul>
</div>
</div>
</div>
</div>

JavaScript Code
<script type="text/javascript">
$(function (){

/* 用按钮控制图片左右滚动 */
$(".hotPic .JQ-slide").Slide({
effect:"scroolLoop",
autoPlay:false,
speed:"normal",
timer:3000,
steps:1
});

});
</script>
除了jq库以外，还用了slide.js

JavaScript Code
/**
* @author ?
/
(function($){
$.fn.Slide=function(options){
var opts = $.extend({},$.fn.Slide.deflunt,options);
var index=1;
var targetLi = $("." + opts.claNav + " li", $(this));//?
var clickNext = $("." + opts.claNav + " .next", $(this));//??
var clickPrev = $("." + opts.claNav + " .prev", $(this));//??
var ContentBox = $("." + opts.claCon , $(this));//?
var ContentBoxNum=ContentBox.children().size();//??
var slideH=ContentBox.children().first().height();//????????
var slideW=ContentBox.children().first().width();//??????
var autoPlay;
var slideWH;
if(opts.effect=="scroolY"||opts.effect=="scroolTxt"){
slideWH=slideH;
}else if(opts.effect=="scroolX"||opts.effect=="scroolLoop"){
ContentBox.css("width",ContentBoxNumslideW);
slideWH=slideW;
}else if(opts.effect=="fade"){
ContentBox.children().first().css("z-index","1");
}

return this.each(function() {
var $this=$(this);
//
var doPlay=function(){
$.fn.Slide.effect[opts.effect](ContentBox, targetLi, index, slideWH, opts);
index++;
if (indexopts.steps >= ContentBoxNum) {
index = 0;
}
};
clickNext.click(function(event){
$.fn.Slide.effectLoop.scroolLeft(ContentBox, targetLi, index, slideWH, opts,function(){
for(var i=0;i<opts.steps;i++){
ContentBox.find("li:first",$this).appendTo(ContentBox);
}
ContentBox.css({"left":"0"});
});
event.preventDefault();
});
clickPrev.click(function(event){
for(var i=0;i<opts.steps;i++){
ContentBox.find("li:last").prependTo(ContentBox);
}
ContentBox.css({"left":-indexopts.stepsslideW});
$.fn.Slide.effectLoop.scroolRight(ContentBox, targetLi, index, slideWH, opts);
event.preventDefault();
});
//?
if (opts.autoPlay) {
autoPlay = setInterval(doPlay, opts.timer);
ContentBox.hover(function(){
if(autoPlay){
clearInterval(autoPlay);
}
},function(){
if(autoPlay){
clearInterval(autoPlay);
}
autoPlay=setInterval(doPlay, opts.timer);
});
}

//??
targetLi.hover(function(){
if(autoPlay){
clearInterval(autoPlay);
}
index=targetLi.index(this);
window.setTimeout(function(){$.fn.Slide.effect[opts.effect](ContentBox, targetLi, index, slideWH, opts);},200);

},function(){
if(autoPlay){
clearInterval(autoPlay);
}
autoPlay = setInterval(doPlay, opts.timer);
});
});
};
$.fn.Slide.deflunt={
effect : "scroolY",
autoPlay:true,
speed : "normal",
timer : 1000,
defIndex : 0,
claNav:"JQ-slide-nav",
claCon:"JQ-slide-content",
steps:1
};
$.fn.Slide.effectLoop={
scroolLeft:function(contentObj,navObj,i,slideW,opts,callback){
contentObj.animate({"left":-iopts.stepsslideW},opts.speed,callback);
if (navObj) {
navObj.eq(i).addClass("on").siblings().removeClass("on");
}
},

scroolRight:function(contentObj,navObj,i,slideW,opts,callback){
contentObj.stop().animate({"left":0},opts.speed,callback);

}
}
$.fn.Slide.effect={
fade:function(contentObj,navObj,i,slideW,opts){
contentObj.children().eq(i).stop().animate({opacity:1},opts.speed).css({"z-index": "1"}).siblings().animate({opacity: 0},opts.speed).css({"z-index":"0"});
navObj.eq(i).addClass("on").siblings().removeClass("on");
},
scroolTxt:function(contentObj,undefined,i,slideH,opts){
//alert(iopts.stepsslideH);
contentObj.animate({"margin-top":-opts.stepsslideH},opts.speed,function(){
for( var j=0;j<opts.steps;j++){
contentObj.find("li:first").appendTo(contentObj);
}
contentObj.css({"margin-top":"0"});
});
},
scroolX:function(contentObj,navObj,i,slideW,opts,callback){
contentObj.stop().animate({"left":-iopts.stepsslideW},opts.speed,callback);
if (navObj) {
navObj.eq(i).addClass("on").siblings().removeClass("on");
}
},
scroolY:function(contentObj,navObj,i,slideH,opts){
contentObj.stop().animate({"top":-iopts.stepsslideH},opts.speed);
if (navObj) {
navObj.eq(i).addClass("on").siblings().removeClass("on");
}
}
};
})(jQuery);

原文地址:http://www.freejs.net/article_jquerytupiantexiao_62.html