預約掛號系統之首頁廣告輪播圖
阿新 • • 發佈:2018-11-30
輪播圖設計
<div id="main_top_left"> <div id="list" style="left: -650px;"> <img src="../img/slideshow_5.jpg" alt="5"/> <img src="../img/slideshow_1.jpg" alt="1"/> <img src="../img/slideshow_2.jpg" alt="2"/> <img src="../img/slideshow_3.jpg" alt="3"/> <img src="../img/slideshow_4.jpg" alt="4"/> <img src="../img/slideshow_5.jpg" alt="5"/> <img src="../img/slideshow_1.jpg" alt="1"/> </div> <div id="pointsDiv"> <span index="1" class="on"></span> <span index="2"></span> <span index="3"></span> <span index="4"></span> <span index="5"></span> </div> <a href="javascript:;" id="prev" class="arrow"><</a> <a href="javascript:;" id="next" class="arrow">></a></div>
在輪播圖中假設有N張廣告圖,則父div包含N+2張圖,其中在最前面增加最後一張圖,在最後面增加第一張圖,為的是然輪播圖的前後切換感覺像個迴圈,體驗較好,
通過調整父div的left值來確定圖片的位置,通過定時器來產生滑動的效果,jQuery程式碼如下
$(function(){ var $container = $('#main_top_left'); var $list = $('#list'); var $points = $('#pointsDiv>span') var $prev = $('#prev'); var $next = $('#next'); var PAGE_WIDTH = 650;//圖片寬度 var TIME=400;// 翻頁總時間 var ITEM_TIME=20;// 單元移動間隔時間 var imgCount = $points.length //圖片的數量 var index = 0 //當前圓點的下標 var moving = false //是否正在翻頁中 // 翻到下一頁 $next.click(function(event) { nextPage(true); }); // 翻到上一頁 $prev.click(function(event) { nextPage(false); }); //每隔三秒翻頁 var intervalId = setInterval(function() { nextPage(true); },3000); //滑鼠放在圖片上時停止定時器,離開時重新開始 $container.hover(function() { clearInterval(intervalId); }, function() { intervalId = setInterval(function () { nextPage(true); }, 3000); }); //點選圓點來切頁 $points.click(function(event) { var targetIndex = $(this).index(); if(targetIndex != index){ nextPage(targetIndex); } }); /*翻頁方法 設定一個翻頁總時間 設定一個間隔時間 TIME/ITEM_TIME=400/20 = 20 相當於0.4秒翻了20次,肉眼看起來像翻頁,其實是圖片不同時間在切換位置(時間都花在了等待上) true : 向右翻一頁 false: 向左翻一頁 數值: 翻到指定頁面 */ function nextPage(next) { //當前正在翻頁時不執行 if(moving) { return; } moving = true;//正在翻頁 //總的偏移量 var offset = 0; if(typeof next === 'boolean') { offset = next ? -PAGE_WIDTH : PAGE_WIDTH; } else { offset = -PAGE_WIDTH * (next - index); } //單元偏移量 var itemOffset = offset/(TIME/ITEM_TIME); //獲取當前的left值 var currLeft = $list.position().left; //計算目標處left值,用於停止定時器 var targetLeft = currLeft + offset; var intervalId = setInterval(function() { //每次移動後的位置 currLeft += itemOffset; if(currLeft === targetLeft) { //清除定時器 clearInterval(intervalId); //翻頁完成 moving = false; //圖片是 5 (1 2 3 4 5) 1 //如果翻到第一張,跳到倒數第二張(實際顯示的最後一張圖片) if(currLeft === 0) { currLeft = -PAGE_WIDTH * imgCount; } else if(currLeft === (-PAGE_WIDTH * (imgCount+1))) { //如果翻到最後一張,跳到第二張(實際顯示的第一張圖片) currLeft = -PAGE_WIDTH; } } $list.css({ left: currLeft }); }, ITEM_TIME); updatePoints(next) } /*更新圓點位置*/ function updatePoints(next) { var targetIndex = 0; if(typeof next === 'boolean') { if(next) { targetIndex = index + 1; if(targetIndex === imgCount) { targetIndex = 0; } }else { targetIndex = index - 1; if(targetIndex === -1) { targetIndex = imgCount-1; } } }else { targetIndex = next; } $points[index].className=''; $points[targetIndex].className='on'; index = targetIndex; } })
效果如下
完成日期 2018/11/27