jQuery轮播

it2023-08-31 68

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; text-decoration: none; } #container{ width: 600px; height: 400px; margin: 30px auto; position: relative; overflow: hidden; } #list{ width: 4200px; height: 400px; position: absolute; } #list img{ float: left; } #pointDiv{ position: absolute; bottom: 20px; width: 80px; left: 260px; } #pointDiv span{ width: 10px; height: 10px; border-radius: 50%; background: #333; border:1px solid #fff; float: left; margin-right: 5px; } #pointDiv .on{ background: orangered; } #pointDiv span:last-child{ margin-right: 0; } .arrow{ position: absolute; cursor: pointer; color: #fff; width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 32px; background: rgba(0,0,0,0.3); top: 180px; } .arrow:hover{ background: rgba(0,0,0,0.7); } #prev{ left: 20px; } #next{ right: 20px; } #container:hover{ cursor: pointer; } </style> </head> <body> <div id="container"> <div id="list" style="left:-600px"> <img src="img/5.jpg" alt=""> <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> <img src="img/4.jpg" alt=""> <img src="img/5.jpg" alt=""> <img src="img/1.jpg" alt=""> </div> <div id="pointDiv"> <span class="on"></span> <span></span> <span></span> <span></span> <span></span> </div> <a href="javascript:;" id="prev" class="arrow"><</a> <a href="javascript:;" id="next" class="arrow">></a> </div> <script src="js/jquery.1.10.2.js"></script> <script> $(function(){ /* * 功能说明 * 1.点击向左向右图片图片滑动 * 2.无限循环切换，第一页的上一页为最后页最后一页的下一页为第一页 * 3.每隔多久图片自动滑动下一页 * 4.当鼠标移动图片区域时候自动切换停止鼠标离开自动切换开启 * 5.切换页面圆点更新 * 6.点击圆点切换到对应页 * */ var $container = $('#container'); var $list = $('#list'); var $points = $('#pointDiv span'); var $prev = $('#prev'); var $next = $('#next'); var imgCount = $points.length; var index = 0; var PAGE_WIDTH = 600; var TIME = 400;//翻页持续时间 var TIME_TIME = 20;//单元移动的持续时间 var moving = false;//标识是否正在翻页 // 1.点击向左向右图片图片滑动 $next.click(function(){ nextPage(true); }) $prev.click(function(){ nextPage(false); }) // 2.无限循环切换，第一页的上一页为最后页最后一页的下一页为第一页 var intervalId = setInterval(function(){ nextPage(true); },3000) // 4.当鼠标移动图片区域时候自动切换停止鼠标离开自动切换开启 $('#container').hover(function(){ clearInterval(intervalId) },function(){ intervalId = setInterval(function(){ nextPage(true); },3000) }) // 6.点击圆点切换到对应页 $points.click(function(){ var targetIndex = $(this).index(); if(targetIndex != index){ nextPage(targetIndex); } }) function nextPage(next){ if(moving){ return; } moving = true;//标识正在翻页 //总的偏移量 var offset = 0; if(typeof next == 'boolean'){ offset = next ? -PAGE_WIDTH : PAGE_WIDTH; }else{ offset = -(next-index) * PAGE_WIDTH; } //单元移动的偏移量总的偏移量 / 一共的单元 var itemOffset = offset/(TIME/TIME_TIME); //获取当前left的值 var currLeft = $list.position().left; //目标处的值 var targetLeft = currLeft + offset; console.log(targetLeft); /* * next为正右移 left变小速度为负目标位置小于当前位置 * left 0(-3000) -600 -1200 -1800 -2400 -3000 -3600(-600) * * next为负左移 left变大速度为正目标位置大于当前位置 * */ //启动定时器用来不断更新list的left值到达目的地定时器就要停止 var intervalId = setInterval(function(){ currLeft += itemOffset; if(currLeft == targetLeft){ clearInterval(intervalId); //标识翻页停止 moving = false; //如果到达了最右边的图片1.jpg,瞬间定位到第二张的1.jpg if(currLeft == -(imgCount + 1)* PAGE_WIDTH){ currLeft = -PAGE_WIDTH; //如果到达了最左边的图片5.jpg,瞬间定位到倒数第二张的5.jpg }else if(currLeft == 0){ currLeft = -imgCount * PAGE_WIDTH; } } $list.css('left',currLeft); },TIME_TIME) /* * index 0 ---- 6 1----5 * targetIndex 0 --- 4 * */ 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; } //将当前index的span class移除 $points[index].className = ''; //给目标圆点添加 $points[targetIndex].className = 'on'; //更新index的值 index = targetIndex; } }) </script> </body> </html>

最新回复(0)