jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动



119 474 159



特效描述:jquery 图片切换滚动特效 带分页索引 按钮控制 左右图片切换滚动,一款各大门户网站的图片左右切换滚动的jquery 图片切换滚动特效,且带分页索引按钮控制图片或内容左右切换滚动,提高了用户体验的浏览效率,是图片切换滚动的一种扩展jquery特效

代码结构

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.dijiuzhanzhang.com"><img src="http://www.dijiuzhanzhang.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.dijiuzhanzhang.com"><img width="620" height="320" alt="基于jquery 选项卡插件jquery tab选项卡支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换等。" src="images/ba66cb66d48ae5d3afd6567bde85a8c6.jpg" /></a></td>
						</tr>
						<tr>
							<td><a href="http://www.dijiuzhanzhang.com">javascript滚动图片带按钮控制上下左右自动无缝滚动</a></td>
						</tr>
						<tr>
							<td><a href="http://www.dijiuzhanzhang.com">jquery 幻灯片效果制作防苹果风格的开机画面</a></td>
						</tr>
						<tr>
							<td><a href="http://www.dijiuzhanzhang.com">jquery 图片放大缩小仿谷歌使用jQuery的圣诞涂鸦图片特效</a></td>
						</tr>
					</table>
				</li>
				<li>
					<table width="100%">
						<tr>
							<td><a href="http://www.dijiuzhanzhang.com"><img width="620" height="320" alt="jquery 图片切换插件制作banner图片滚动播放、按钮控制图片滚动、选项卡等基于多功能jquery slide插件" src="images/93f0fbcca20b400dfab9522431cc9de0.jpg"></a></td>
						</tr>
						<tr>
							<td><a href="http://www.dijiuzhanzhang.com">jquery制作创建动画404页面</a></td>
						</tr>
						<tr>
							<td><a href="http://www.dijiuzhanzhang.com">jquery 图片滑过特效简单的图片滑过显示横幅转子使用jQuery和css</a></td>
						</tr>
						<tr>
							<td><a href="http://www.dijiuzhanzhang.com">jquery 图片特效3D赞助商图标翻转和CSS jQuery的类似翻墙效果</a></td>
						</tr>
					</table>
				</li>
				<li>
					<table width="100%">
						<tr>
							<td><a href="http://www.dijiuzhanzhang.com"><img width="620" height="320" alt="jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3" src="images/6b87a0e9c81c16b2cd43bc4a2879c2d0.jpg"></a></td>
						</tr>
						<tr>
							<td><a href="http://www.dijiuzhanzhang.com">jquery 图片放大镜仿苹果视网膜效应的jQuery和CSS</a></td>
						</tr>
						<tr>
							<td><a href="http://www.dijiuzhanzhang.com">jquery 文字特效霓虹灯文字效果使用jQuery和CSS</a></td>
						</tr>
						<tr>
							<td><a href="http://www.dijiuzhanzhang.com">jquery 幻灯片切换使用jQuery和CSS制作一个马赛克幻灯片图片切换效果</a></td>
						</tr>
					</table>
				</li>
			</ul>
		</div>
	</div><!--showallprocuts end-->
</div><!--main_view end-->



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


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 滑动选项卡 滑动切换 滚动切换 滚动条切换 flash焦点图 flash幻灯片 flashbanner flash图片轮播 自动滚动图片轮播 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 切换按钮 表单 表单美化 表单插件 表单美化插件 焦点图 幻灯片 轮播图 bar焦点图 其他 带简介的焦点图 自动滚动图片轮播 图片文字滚动 文字图片滚动 选项卡自动切换 按钮控制 分页 翻页 分页插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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