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