基于jQuery实现左右图片轮播_jquery_脚本之家

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

www.6766.com ,本文为大家分享了jQuery实现左右图片轮播代码,供大家参考,具体实现内容如下

实现原理:

通过判断index值的大小变化来判断图片左移还是右移。通过控制图片的left值,来达到一个轮播的效果。

以上就是本文的全部内容,帮助大家实现一个简单大方的图片轮播效果。

      .banner{ margin:0 auto; border: 4px dashed black; width:400px; height:200px; position: relative; overflow:hidden; } .banner a{ z-index: 100; display: block; width:100%; height: 100%; position: absolute; left:100%; top:0; } .banner .first{ left:0; } .banner a img{ width:100%; height: 100%; } .choose{ z-index: 1000; position: absolute; left:150px; top:180px; width:100px; height: 10px; } .choose span{ margin-right: 15px; float: left; display:block; background: blue; width:10px; height: 10px; border-radius: 10px; } .choose span:hover{ background: red; } .choose .red{ background: red; } .banner .pre,.next{ cursor:pointer; text-align:center; border-radius:20px; display:block; background:#cccccc; opacity:0.4; text-decoration: none; z-index: 200; display:block; width:40px; height: 40px; font-size: 40px; color:red; position: absolute; top:80px; } .banner .pre{ left:0px } .banner .next{ right: 0px; }     - +               /*定义两个变量,保存当前页码和上一页页码*/ var $index=0; var $exdex=0; /*小点的鼠标移入事件,触发图片左移还是右移*/ $.mouseover{ //获取当前移入的index值 $index=$; //首先让点的颜色变化,表示选中 $.eq.addClass. removeClass; //判断如果index变小,证明图片要往左移动。变大则为右移 if{ next(); }else if; } //移动完毕将当前index值替换了前页index return $exdex=$index; }); //下一页的点击事件。在右移基础上加了最大index判断 $.click{ $index++; if{ $index=0 } $.eq.addClass. removeClass; return $exdex=$index; }); //上一页的点击事件 $.click{ $index--; if{ $index=3 }; $.eq.addClass. removeClass; return $exdex=$index; }); //加个定时器,正常轮播 var atime=setInterval{ $; },1000); //这里为右移和左移的事件函数。 //右移基本原理就是先让exdex定位的left左移百分百,而选中的当前页从屏幕右边移入,left变为0 function next.eq.stop. css.animate; $.eq.stop. css.animate; } function pre.eq.stop. css.animate; $.eq.stop. css.animate; }  

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图