jQuery无缝轮播方法
简单,好用,功能较全,流畅,无 BUG jQuery 无缝轮播代码
HTML 代码
<div class="all"> <div class="screen"> <div class="ul"> <img src="images/01.png" alt="" /> <img src="images/02.png" alt="" /> <img src="images/03.png" alt="" /> <img src="images/04.png" alt="" /> <img src="images/05.png" alt="" /> </div> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> <div class="arr"> <span class="left"><</span> <span class="right">></span> </div> </div> </div>
CSS 代码
* { margin: 0; padding: 0; } li { list-style: none; } .all { width: 900px; height: 500px; padding: 7px; border: 1px solid #ccc; margin: 50px auto 0; } /*这三个最重要*/ .screen { width: 900px; height: 500px; overflow: hidden; position: relative; } .screen img { width: 900px; height: 500px; float: left; } .screen .ul { position: absolute; left: 0; } .all ol { position: absolute; right: 10px; bottom: 10px; line-height: 20px; text-align: center; } .all ol li { float: left; width: 20px; height: 20px; border: 1px solid #ccc; background-color: #fff; margin-left: 10px; cursor: pointer; } .all ol li.active { background-color: orange; color: #fff; } .arr span { width: 40px; height: 40px; background-color: rgba(0,0,0,.3); position: absolute; top: 50%; margin-top: -20px; cursor: pointer; line-height: 40px; text-align: center; font-weight: bold; font-family: "黑体"; font-size: 30px; color: #fff; border: 1px solid #fff; left: 5px; transition: all .3s; opacity: .5; } .arr .right { right: 5px; left: auto; } .arr span:hover { background-color: rgba(0,0,0,.5); opacity: 1; }
JS 代码
$(function() { aRound({ //调用 ulCss: ".ul", //必填:长滚轮 css butsCss: "ol li", //选填:小点 css actiClass: "active", //选填:高亮小点 class butOn: "mouseenter", //选填:小点翻页的事件 click/mouseenter(默认) wiLeCss: ".left", //选填:左翻页按钮 css wiRiCss: ".right" //选填:右翻页按钮 css }, 4000 /*轮播频率*/ ); function aRound(bannCss, tiam = 3000) { //jqery 无缝轮播 //1.准备工作 var this_ = this, axle = null, give = true, //动画状态 timFlg = false, //定时器状态 index = 0, ul = $(bannCss.ulCss), length = ul.children().length, width = ul.children(":first").width(), buts, active, winLe, winRi, butsOn; ul.css({ width: (length + 1) * width }).children(":first").clone().appendTo(".ul"); //2.功能添加 function axleYes() { //开定时器 if (!timFlg) { axle = setInterval(drum, tiam); timFlg = true; } }; function axleNo() { //关定时器 clearInterval(axle); timFlg = false; }; ul.parent().hover(function() { //hover axleNo(); }, function() { axleYes(); }); function gabby(posi) { //点亮该索引的小点 到达该索引的位置 give = false; var giAb = Math.abs(posi); if (buts) { buts.eq(index == length ? 0 : false || giAb).addClass(active).siblings().removeClass(active); } ul.stop().animate({ left: width * posi }, function() { give = true; }); index = giAb; } function drum() { //走一格 index++; if (index > length) { ul.css({ left: 0 }); index = 1; } gabby( - index); } //3.附加项 if (bannCss.butsCss) { buts = $(bannCss.butsCss); active = bannCss.actiClass ? bannCss.actiClass: null; buts.first().addClass(active).siblings().removeClass(active); butsOn = bannCss.butOn ? bannCss.butOn: "mouseenter"; buts.on(butsOn, function() { if (index == length && $(this).index() == 0) { //特殊状况 ul.stop().animate({ left: -width * length }, 120, function() { ul.css({ left: 0 }); index = 0; }); return; } gabby( - $(this).index()); }); } if (bannCss.wiLeCss && bannCss.wiRiCss) { $(bannCss.wiRiCss).click(function() { if (give) { drum(); } }); $(bannCss.wiLeCss).click(function() { if (give) { index--; if (index == -1) { ul.css({ left: -width * length }); index = length - 1; } gabby( - index); } }); } axleYes(); } })
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » jQuery无缝轮播方法
码云笔记 » jQuery无缝轮播方法