jquery图片轮播插件轮播滚动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery图片轮播插件轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jquery自动隐藏切换按钮焦点图代码</title>
<link href="css/jquery.slideBox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center>
<h5>一、左右轮播，滚动持续0.6秒，滚动延迟3秒，滚动效果swing，初始焦点第1张，点选按键自动隐藏，按键边框半径（IE8-只方不圆）5px（以上各项为默认设置值）</h3>
<div id="demo1" class="slideBox">
  <ul class="items">
    <li><a href="#" title="这里是测试标题一"><img src="img/1.jpg"></a></li>
    <li><a href="#" title="这里是测试标题二"><img src="img/2.jpg"></a></li>
    <li><a href="#" title="这里是测试标题三"><img src="img/3.jpg"></a></li>
    <li><a href="#" title="这里是测试标题四"><img src="img/4.jpg"></a></li>
    <li><a href="#" title="这里是测试标题五"><img src="img/5.jpg"></a></li>
  </ul>
</div>
<h5>二、上下轮播，滚动持续0.3秒，滚动延迟5秒，滚动效果linear，初始焦点第2张，点选按键自动隐藏</h3>
<div id="demo2" class="slideBox">
  <ul class="items">
    <li><a href="#" title="这里是测试标题一"><img src="img/1.jpg"></a></li>
    <li><a href="#" title="这里是测试标题二"><img src="img/2.jpg"></a></li>
    <li><a href="#" title="这里是测试标题三"><img src="img/3.jpg"></a></li>
    <li><a href="#" title="这里是测试标题四"><img src="img/4.jpg"></a></li>
    <li><a href="#" title="这里是测试标题五"><img src="img/5.jpg"></a></li>
  </ul>
</div></center>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.slideBox.min.js" type="text/javascript"></script>
<script>
jQuery(function($){
	$('#demo1').slideBox();
	$('#demo2').slideBox({
		direction : 'top',//left,top#方向
		duration : 0.3,//滚动持续时间，单位：秒
		easing : 'linear',//swing,linear//滚动特效
		delay : 5,//滚动延迟时间，单位：秒
		startIndex : 1//初始焦点顺序
	});
	$('#demo3').slideBox({
		duration : 0.3,//滚动持续时间，单位：秒
		easing : 'linear',//swing,linear//滚动特效
		delay : 5,//滚动延迟时间，单位：秒
		hideClickBar : false,//不自动隐藏点选按键
		clickBarRadius : 10
	});
	$('#demo4').slideBox({
		hideBottomBar : true//隐藏底栏
	});
});
</script>
</body>
</html>

JS代码(jquery.slideBox.min.js):

(function($){
	$.fn.slideBox=function(options){
	var defaults={
	direction:'left',duration:0.6,easing:'swing',delay:3,startIndex:0,hideClickBar:true,clickBarRadius:5,hideBottomBar:false,width:null,height:null}
;
	var settings=$.extend(defaults,options||{
}
);
	var wrapper=$(this),ul=wrapper.children('ul.items'),lis=ul.find('li'),firstPic=lis.first().find('img');
	var li_num=lis.size(),li_height=0,li_width=0;
	var order_by='ASC';
	var init=function(){
	if(!wrapper.size())return false;
	li_height=settings.height?settings.height:lis.first().height();
	li_width=settings.width?settings.width:lis.first().width();
	wrapper.css({
	width:li_width+'px',height:li_height+'px'}
);
	lis.css({
	width:li_width+'px',height:li_height+'px'}
);
	if(settings.direction=='left'){
	ul.css('width',li_num*li_width+'px')}
else{
	ul.css('height',li_num*li_height+'px')}
;
	ul.find('li:eq('+settings.startIndex+')').addClass('active');
	if(!settings.hideBottomBar){
	var tips=$('<div class="tips"></div>').css('opacity',0.6).appendTo(wrapper);
	var title=$('<div class="title"></div>').html(function(){
	var active=ul.find('li.active').find('a'),text=active.attr('title'),href=active.attr('href');
	return $('<a>').attr('href',href).text(text)}
).appendTo(tips);
	var nums=$('<div class="nums"></div>').hide().appendTo(tips);
	lis.each(function(i,n){
	var a=$(n).find('a'),text=a.attr('title'),href=a.attr('href'),css='';
	i==settings.startIndex&&(css='active');
	$('<a>').attr('href',href).text(text).addClass(css).css('borderRadius',settings.clickBarRadius+'px').mouseover(function(){
	$(this).addClass('active').siblings().removeClass('active');
	ul.find('li:eq('+$(this).index()+')').addClass('active').siblings().removeClass('active');
	start();
	stop()}
).appendTo(nums)}
);
	if(settings.hideClickBar){
	tips.hover(function(){
	nums.animate({
	top:'0px'}
,'fast')}
,function(){
	nums.animate({
	top:tips.height()+'px'}
,'fast')}
);
	nums.show().delay(2000).animate({
	top:tips.height()+'px'}
,'fast')}
else{
	nums.show()}
}
;
	lis.size()>1&&start()}
;
	var start=function(){
	var active=ul.find('li.active'),active_a=active.find('a');
	var index=active.index();
	if(settings.direction=='left'){
	offset=index*li_width*-1;
	param={
	'left':offset+'px'}
}
else{
	offset=index*li_height*-1;
	param={
	'top':offset+'px'}
}
;
	wrapper.find('.nums').find('a:eq('+index+')').addClass('active').siblings().removeClass('active');
	wrapper.find('.title').find('a').attr('href',active_a.attr('href')).text(active_a.attr('title'));
	ul.stop().animate(param,settings.duration*1000,settings.easing,function(){
	active.removeClass('active');
	if(order_by=='ASC'){
	if(active.next().size()){
	active.next().addClass('active')}
else{
	order_by='DESC';
	active.prev().addClass('active')}
}
else if(order_by=='DESC'){
	if(active.prev().size()){
	active.prev().addClass('active')}
else{
	order_by='ASC';
	active.next().addClass('active')}
}
}
);
	wrapper.data('timeid',window.setTimeout(start,settings.delay*1000))}
;
	var stop=function(){
	window.clearTimeout(wrapper.data('timeid'))}
;
	wrapper.hover(function(){
	stop()}
,function(){
	window.setTimeout(start,settings.delay*1000);
}
);
	var imgLoader=new Image();
	imgLoader.onload=function(){
	imgLoader.onload=null;
	init()}
;
	imgLoader.src=firstPic.attr('src')}
}
)(jQuery);

CSS代码(jquery.slideBox.css):

@charset "utf-8";html,body{font-family:"微软雅黑"}
div.slideBox{position:relative;width:670px;height:300px;overflow:hidden;}
div.slideBox ul.items{position:absolute;float:left;background:none;list-style:none;padding:0px;margin:0px;}
div.slideBox ul.items li{float:left;background:none;list-style:none;padding:0px;margin:0px;}
div.slideBox ul.items li a{float:left;line-height:normal !important;padding:0px !important;border:none/*For IE.ADD.JENA.201206300844*/
;}
div.slideBox ul.items li a img{margin:0px !important;padding:0px !important;display:block;border:none/*For IE.ADD.JENA.201206300844*/
;}
div.slideBox div.tips{position:absolute;bottom:0px;width:100%;height:50px;background-color:#000;overflow:hidden;}
div.slideBox div.tips div.title{position:absolute;left:0px;top:0px;height:100%;}
div.slideBox div.tips div.title a{color:#FFF;font-size:18px;line-height:50px;margin-left:10px;text-decoration:none;}
div.slideBox div.tips div.title a:hover{text-decoration:underline !important;}
div.slideBox div.tips div.nums{position:absolute;right:0px;top:0px;height:100%;}
div.slideBox div.tips div.nums a{display:inline-block;>float:left/*For IE.ADD.JENA.201206300844*/
;width:20px;height:20px;background-color:#FFF;text-indent:-99999px;margin:15px 10px 0px 0px;}
div.slideBox div.tips div.nums a.active{background-color:#093;}

附件:下载该文件资源,减少时间成本(增值服务)