特效描述：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-->
