jQuery图片切换显示隐藏show/hide带左右按钮与分页索引按钮控制图片-20130626
[html5]
<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}body{font:12px/180% Arial;}a{font-size:12px;color:#ff6600;text-decoration:none;}a:hover{color:#3366cc;}/* dlyL */.dlyL{width:690px;height:415px;position:relative;margin:20px auto;}.dlyL b{background:url(images/icons-arrow.gif) no-repeat;}.dlyL b{width:10px;height:15px;display:block;position:absolute;top:35px;cursor:pointer;}.dlyL b.prev{left:13px;top:110px;background-position:0 0;}.dlyL b.next{right:13px;top:110px;background-position:-9px 0;}.dlyL div{width:620px;height:340px;margin:0 auto 9px;overflow:hidden;border:solid 1px #ddd;}.dlyL span{display:block;text-align:center;}.dlyL span i{padding:2px 5px;background-color:#cbcbcb;color:#fff;margin:auto 1px;cursor:pointer;}.dlyL span i.current{background-color:#ef7000;}.dlyL h4{font-weight:normal;text-align:center;padding-top:8px;}</style></head><body><script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><script type="text/javascript">$(function(){var $index = 0;var $nav = $(".dlyL span i");var $text = $(".dlyL h4 a");var $pics = $(".dlyL div a");/*0代表分页的个数 然后就爱那个dlyL 的 span i h4 a div a 分别放去其中*/$(".dlyL span i").click(function(){/*是用来区分按钮的点击事件*/var $self = $(this);var $index = $nav.index($self);showMzin($index);/*三个是将按钮的 点击后的显示那张图 然后继续效果 和 启动前面两个效果设定好 */$(".dlyL b.next").click(function(){/*设点向左边的按钮的点击事件*/if($index<3){/* 设置4个显示分页 */$index++}/*如果图片大于3就+1*/else if($index==3){ $index=0}/*如果图片等于3就回到0号图片*/showMzin($index);/*启动效果*/});$(".dlyL b.prev").click(function(){/*设点向右边的按钮效果*/if($index>0){$index--}/*如果图片小于0就-1*/else if($index==0){$index=3 }/*如果如片等于0的话就回到3*/showMzin($index);/*启动效果*/});}).eq(0).trigger("click");/*当页面加载成功后从0号图片开始执行效果*/function showMzin(i){/*把执行的效果放进来*/$pics.hide(),/*按照前面的效果变化图片*/$pics.eq(i).show(),/*将对应的图片放进应该显示的窗口*/$text.hide(),/*管理哪张图需要在下方出现什么样的文字*/$text.eq(i).show(),/*根据前面的效果来显示出文字*/$nav.removeClass("current"),/*当图片消失的时候下面的按钮号跟着失去底色*/$nav.eq(i).addClass("current");/*当显示图片时下面的按钮号的底色更换*/}DLYTime =setInterval(function(){$(".dlyL b.next").trigger("click"); }, 3000); /*开始根据上面的代码开始实现 相隔的时间为3秒钟*/$(".dlyL").mouseover(function(){if(DLYTime){clearInterval(DLYTime);}});/*当点击 下面的数字按钮还是左右按钮后 还是根据上面的效果来从新计时*/$(".dlyL").mouseout(function(){DLYTime =setInterval(function(){$(".dlyL b.next").trigger("click"); },3000); /*当完成了一轮新的效果后 在点击按钮还是按照3秒来计时*/});});</script><div height="340" alt="jQuery图片切换展示隐藏show/hide带左右按钮与分页索引按钮控制图片-20130626" src="images/965e7aec8b1d0d112be431a8f54df0cb.jpg" /></a><a href="http://www.17sucai.com/"><img width="620" height="340" alt="jQuery图片切换展示隐藏show/hide带左右按钮与分页索引按钮控制图片-20130626" src="images/6b87a0e9c81c16b2cd43bc4a2879c2d0.jpg" /></a><a href="http://www.17sucai.com/"><img width="620" height="340" alt="jQuery图片切换展示隐藏show/hide带左右按钮与分页索引按钮控制图片-20130626" src="images/df8440960f45b0ad68fe4d1c684e2acc.jpg" /></a></div><span><i>1</i><i>2</i><i>3</i></span><h4><a href="http://www.17sucai.com/">jquery colorpicker 插件颜色选择器 点击颜色选择颜色值与颜色相应变化</a><a href="http://www.17sucai.com/">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a><a href="http://www.17sucai.com/">用div+css制作一个CSS3的泡泡动画按钮非常漂亮</a></h4></div><!--dlyL end--></body></html>