预约挂号系统之首页广告轮播图
Posted zhanghongcan
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了预约挂号系统之首页广告轮播图相关的知识,希望对你有一定的参考价值。
轮播图设计
<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
以上是关于预约挂号系统之首页广告轮播图的主要内容,如果未能解决你的问题,请参考以下文章