本篇文章为大家展示了JQ图片轮播图的代码怎么写，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
HTML
<div class="czfl-img">
<div id="ty_picScroll">
<label class="ty_btn ty_left"><</label>
<label class="ty_btn ty_right">></label>
<div class="ty_tabBtns">
<p>
<span class="ty_current">1</span>
<span>2</span>
<span>3</span>
</p>
</div>
<div class="ty_tabInfo">
<iframe src="http://www.pingan.com/adms/area.ctrl?AREAID=QY15011614021909" frameborder="no" scrolling="no" marginwidth="0" marginheight="0" allowtransparency="true" width="1000" height="157" class="ty_pic" ></iframe>
<iframe src="http://www.pingan.com/adms/area.ctrl?AREAID=QY15011614031310" frameborder="no" scrolling="no" marginwidth="0" marginheight="0" allowtransparency="true" width="1000" height="157" class="ty_pic"></iframe>
<iframe src="http://www.pingan.com/adms/area.ctrl?AREAID=QY15061017013512" frameborder="no" scrolling="no" marginwidth="0" marginheight="0" allowtransparency="true" width="1000" height="157" class="ty_pic"></iframe>
</div>
</div>
</div>
CODE
<script type="text/javascript">
//banner图片切换 0918
var ty_picScroll = function(options){
var fa = this;
var opts = {};
var clear;
this.init = function(){
opts = {
box: $("#"+options.box),
msg: (options.msg==undefined)?true:options.msg,
auto: (options.auto==undefined)?true:options.auto,
speed: options.speed || 5000,
flag:0
}
opts.box.on("click","span",function(){
clearInterval(clean);
clean = setInterval(fa.auto,options.speed);
index = opts.box.find("span").index(this);
if(opts.flag!=index){
fa.picScroll(index);
opts.flag = index;
}
})
opts.box.find('.ty_right').click(function(){
clearInterval(clean);
clean = setInterval(fa.auto,options.speed);
fa.auto();
});
opts.box.find('.ty_left').click(function(){
clearInterval(clean);
clean = setInterval(fa.auto,options.speed);
fa.auto1();
});
// opts.box.mouseenter(function(){
// clearInterval(clean)
// }).mouseleave(function(){
// clean = setInterval(fa.auto,options.speed);
// })
if(opts.auto){
clean = setInterval(fa.auto,options.speed);
}
if(!opts.msg){
opts.box.find(".ty_picMsg").hide();
}
}
this.picScroll = function(obj){
opts.box.find("span").removeClass("ty_current").eq(obj).addClass("ty_current");
opts.box.find(".ty_pic").fadeOut(500).eq(obj).fadeIn(500);
if(opts.msg){
var msg = opts.box.find("a").eq(obj).attr("data-msg");
opts.box.find(".ty_picMsg").fadeIn(500).find("p").html(msg);
}
};
this.auto = function(){
var len = opts.box.find("span").length;
opts.flag++;
if(opts.flag>(len-1))opts.flag = 0;
fa.picScroll(opts.flag);
}
this.auto1=function(){
var len=opts.box.find('span').length;
if(opts.flag==0) opts.flag=len;
opts.flag--;
fa.picScroll(opts.flag);
};
this.init();
}
var picScroll = new ty_picScroll({
box:"ty_picScroll", //盒子名称
msg:false, //是否显示说明文字
auto:true, //是否自动播放
speed:5000 //轮播速度
});
$("#ty_picScroll").hover(function(){
$(this).find(".ty_btn").show();
},function(){
$(this).find(".ty_btn").hide();
});
</script>
上述内容就是JQ图片轮播图的代码怎么写，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注本站行业资讯频道。
