js多功能淡隐淡现选项卡图片左右滚动插件



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

24 94 32



特效描述:淡隐淡现选项卡 图片左右。js多功能淡隐淡现选项卡图片左右滚动插件

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
img{vertical-align:middle;}
table{border-collapse:collapse;border-spacing:0;}
a,a:link,a:visited{color:#666;text-decoration:none;}
a:hover{color:#3366cc;text-decoration:underline;}
.clearfix:after{content:"."; display:block; height:0; clear:both;visibility:hidden;}
*html .clearfix{height:1%;}
*+html .clearfix{height:1%;}
/* main_view */
.main_view{width:640px;position:relative;background:url(images/index10_27.jpg) repeat-x top;border:solid 1px #ddd;margin:0 auto;}
.main_view_top{padding-bottom:10px;height:30px;*height:30px;_height:auto;}
.main_view_t{float:left;padding:10px 0 0 8px;}
.showallprocuts{margin-top:-3px;_margin-top:-13px;height:420px;position:relative;overflow:hidden;}
.showimagelist{position:absolute;top:0;left:0;width:2560px;}
.showimagelist ul{clear:both;overflow:hidden;}
.showimagelist li{float:left;display:block;width:640px;overflow:hidden;}
.showimagelist li table td{padding:5px 0;text-align:center;font-size:12px;line-height:20px;}
.showimagelist img{border:none;}
.pagenext{height:10px;z-index:100;text-align:center;line-height:10px;float:right;display:none;}
.pagenext a{padding:0px;width:10px;height:10px;overflow:hidden;text-decoration:none;color:#fff;display:block;float:left;background:url(images/dt1.gif);margin:10px 0px 8px 0;}
.pagenext a.active{background:url(images/dt0.gif);}
.pagenext a:hover{font-weight:bold;margin:10px 0 8px;}
.prev{float:right;background:url(images/mvel2.gif);width:12px;height:10px;cursor:pointer;margin:10px 0 8px;}
.next{float:right;background:url(images/mvel3.gif);width:12px;height:10px;cursor:pointer;margin:10px 5px 8px 0;}
</style>
<script type="text/javascript">
$(document).ready(function() {
	$(".pagenext").show();
	$(".pagenext a:first").addClass("active");
	var imageWidth = $(".showallprocuts").width();
	var imageSum = $(".showimagelist li").size();
	var imageReelWidth = imageWidth * imageSum;
	$(".showimagelist").css({'width' : imageReelWidth});
	rotate = function(){	
		var triggerID = $active.attr("rel")-1; 
		var showimagelistPosition = triggerID * imageWidth;
		$(".pagenext a").removeClass('active');
		$active.addClass('active'); 
		$(".showimagelist").animate({ 
			left: -showimagelistPosition
		}, 00);
	}; 
	rotateSwitch = function(){		
		play = setInterval(function(){ 
			$active = $('.pagenext a.active').next();
			if ( $active.length === 0) { 
				$active = $('.pagenext a:first'); 
			}
			rotate(); 
		}, 4000); 
	};
	rotateSwitch(); 
	$(".showimagelist img").hover(function() {
		clearInterval(play); 
	}, function() {
		rotateSwitch(); 
	});	
	$(".pagenext a").click(function() {	
		$active = $(this); 
		clearInterval(play); 
		rotate(); 
		rotateSwitch(); 
		return false; 
	});	
	$(".prev").click(function() {	
	$active = $('.pagenext a.active');
	if($active.attr("rel")==1){
		$active = $('.pagenext a:last');
		}else{
		$active = $('.pagenext a.active').prev();	
		}
		clearInterval(play); 
		rotate(); 
		rotateSwitch(); 
		return false; 
	});	
	$(".next").click(function() {	
	$active = $('.pagenext a.active');
	if($active.attr("rel")==$('.showimagelist li').size()){
		$active = $('.pagenext a:first');
		}else{
		$active = $('.pagenext a.active').next();	
		}
		clearInterval(play); 
		rotate(); 
		rotateSwitch(); 
		return false; 
	});	
});
</script>
<div class="main_view clearfix">
	<div class="main_view_top clearfix">
		<div class="main_view_t"><a title="17素材网" href="http://www.51qianduan.com"><img src="http://www.51qianduan.com/static/images/logo.gif" width="58" height="20" alt="17素材网" /></a></div>
		<div class="next"></div>
		<div class="prev"></div>
		<div class="pagenext clearfix">
			<a class="" href="javascript:void(0)" rel="1"></a>
			<a class="" href="javascript:void(0)" rel="2"></a>
			<a class="" href="javascript:void(0)" rel="3"></a>
		</div><!--pagenext-->
	</div><!--main_view_top end-->
	<div class="showallprocuts">
		<div class="showimagelist">
			<ul class="clearfix">
				<li>
					<table width="100%">
						<tr>
							<td><a href="http://www.51qianduan.com"><img width="620" height="320" alt="基于jquery 选项卡插件jquery tab选项卡支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换等。" src="images/ba66cb66d48ae5d3afd6567bde85a8c6.jpg" /></a></td>
						</tr>
						<tr>
							<td><a href="https://www.51qianduan.com/" target="_blank">51前端</a></td>
						</tr>
						<tr>
							<td><a href="https://www.51qianduan.com/" target="_blank">51前端</a></td>
						</tr>
						<tr>
							<td><a href="https://www.51qianduan.com/" target="_blank">51前端</a></td>
						</tr>
					</table>
				</li>
				<li>
					<table width="100%">
						<tr>
							<td><a href="http://www.51qianduan.com"><img width="620" height="320" alt="jquery 图片切换插件制作banner图片滚动播放、按钮控制图片滚动、选项卡等基于多功能jquery slide插件" src="images/93f0fbcca20b400dfab9522431cc9de0.jpg"></a></td>
						</tr>
						<tr>
							<td><a href="https://www.51qianduan.com/" target="_blank">51前端</a></td>
						</tr>
						<tr>
							<td><a href="https://www.51qianduan.com/" target="_blank">51前端</a></td>
						</tr>
						<tr>
							<td><a href="https://www.51qianduan.com/" target="_blank">51前端</a></td>
						</tr>
					</table>
				</li>
				<li>
					<table width="100%">
						<tr>
							<td><a href="http://www.51qianduan.com"><img width="620" height="320" alt="jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3" src="images/6b87a0e9c81c16b2cd43bc4a2879c2d0.jpg"></a></td>
						</tr>
						<tr>
							<td><a href="https://www.51qianduan.com/" target="_blank">51前端</a></td>
						</tr>
						<tr>
							<td><a href="https://www.51qianduan.com/" target="_blank">51前端</a></td>
						</tr>
						<tr>
							<td><a href="https://www.51qianduan.com/" target="_blank">51前端</a></td>
						</tr>
					</table>
				</li>
			</ul>
		</div>
	</div><!--showallprocuts end-->
</div><!--main_view end-->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动导航菜单 图片淡出淡进 滚动切换 文字淡出淡进 图片滚动 文字滚动 图片文字滚动 全屏滚动 页面滚动 滚动流动 自动滚动图片轮播 渐隐切换 淡出淡入淡进

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到