.html 结构文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jq轮播图</title> <link rel="stylesheet" href="css/jq_scroll.css"> </head> <body> <div class="scroll"> <!-- 图片区域 img--> <div class="scroll-img"> <!-- 假图 --> <img src="img/004.jpg" alt=""> <img class="active" src="img/001.jpg" alt=""> <img src="img/002.jpg" alt=""> <img src="img/003.jpg" alt=""> <img src="img/004.jpg" alt=""> <!-- 假图 --> <img src="img/001.jpg" alt=""> </div> <!-- 右下角切换按钮 tag --> <ul class="scroll-tag"> <li class="active"></li> <li></li> <li></li> <li></li> </ul> <!-- 左右切换图 toggle--> <div class="scroll-toggle"> <i class="toggle-left"><</i> <i class="toggle-right">></i> </div> </div> </body> <script src="js/jquery-3.3.1.js"></script> <script type="text/javascript" src="js/jq_scroll.js"></script> </html>
.css 样式文件
html, body, ul,img{ margin: 0; padding: 0; } ul { list-style: none; } /*图片位置设置*/ .scroll, .scroll-img, img { width: 613px; height: 230px; } .scroll { margin: 50px auto; position: relative; /*用户不可拖拽选中*/ user-select: none; /*壁纸超出部位不可见*/ overflow: hidden; } /*设置轮播图片，为长条滚动显示*/ .scroll-img{ position: absolute; /*走马灯，壁纸长度为真图数加头尾两个假图*/ width: calc(613px * 6); left:-613px; } .scroll-img img{ /*img浮动清除图片之间的空格*/ float: left; } /*右下选图按钮 tag*/ ul{ position: absolute; bottom: 10px; right: 20px; } li{ /*画圈用于点击*/ width: 8px; height: 8px; border: 2px solid #888; border-radius: 50%; float: left; margin-left: 10px; background-color: transparent; /*鼠标悬浮样式*/ cursor: pointer; } /*活跃状态下的li，变色*/ li.active { transition: .2s; background-color: #999; } /*左右切换按钮*/ .toggle-left, .toggle-right { width: 40px; height: 80px; background-color: rgba(255,255, 255, 0.7); line-height: 80px; text-align: center; font-size: 30px; position: absolute; top: 75px; border-radius: 5px; /*默认状态不可见*/ opacity: 0; } .toggle-left { left: 2px; } .toggle-right { right: 2px; } /*鼠标悬浮，可见，鼠标状态改变*/ .scroll:hover .toggle-left, .scroll:hover .toggle-right { transition: .1s; opacity: 1; cursor: pointer; }
.js 文件
// 自动滚动，一直做左移，到末尾假图重置 // 使用定时器，加可控制参数scroll_disable // 图片数量 var imgCount = 4; var timer = 0; // 用来保证进入单个动画能被完整结束 var scroll_disable = false; function autoScroll() { timer = setInterval(function () { // false 进入 if(!scroll_disable){ // 用于确保进入之后，不执行完毕就被再次调用执行 scroll_disable = true; // 总图已经滚动的距离，相对移动的左端 var current_left = $('.scroll-img').position().left; // 滚动长度是图片的长度 var scroll_width = $('.scroll-img img').width(); // console.log(current_left); // console.log(scroll_width); // 动画操作,总图的拖拽操作 $('.scroll-img').animate({ left:current_left - scroll_width },300,function () { // 动画执行完毕重置可进入滚动的条件 scroll_disable = false; // 图片停留在假图，进入判断 if(current_left<=-(scroll_width*imgCount)) { $(this).css({ // 尾假图，变成相应的真图1的位置 left:-scroll_width }) } }) // tag操作，切换活跃的对象 // js操作获取绝对值 var index = Math.abs(current_left/scroll_width); // 当index为图片数量，重置索引为0 if(index == imgCount){ index = 0; } // eq(index) 匹配一个给定索引值的元素 // siblings([expr]) 筛选同辈元素 // 链式赋值，对 .scroll-tag 子代中对应索引添加活跃状态，解除所有同辈的活跃状态 $('.scroll-tag').children().eq(index).addClass('active').siblings().removeClass('active'); } },2500) } autoScroll() // 鼠标事件监控，悬浮清动画，离开启动 // 悬浮显示左右按键，离开清除 $('.scroll').mouseover(function () { clearInterval(timer); }) $('.scroll').mouseout(function () { autoScroll(); }) // toggle-right 下一张图片，切换同自动轮播 $('.toggle-right').click(function () { if (!scroll_disable) { // 在本次动画未结束时,让用户无法进行下一次点击 scroll_disable = true; // console.log("right btn action"); // 图片右滚 // 点击一下右键,在原位置(left偏移)基础上往右滚一个图片宽度 // offset() 距离窗口左上角的top与left // console.log($('.scroll-img').offset()); // position() 距离定位父级左上角的top与left // console.log($('.scroll-img').position()); // 当前整个view的做左移量 var current_left = $('.scroll-img').position().left; // 一次动画滚动的距离 var scroll_width = $('.scroll-img img').width(); $('.scroll-img').animate({ left: current_left - scroll_width }, 300, function () { scroll_disable = false; // 显示末尾假图时 // console.log(current_left); if (current_left <= -(scroll_width * imgCount)) { // 切换为首位真图 $(this).css({ left: -scroll_width }) } }) // tag切换 var index = Math.abs(current_left / scroll_width); // console.log(index); if (index == imgCount) { index = 0; } // tag下面的index索引指向的li变成活跃状态,该li的其他兄弟,都变成不活跃状态 $current_li = $('.scroll-tag').children().eq(index); $current_li.addClass('active'); $current_li.siblings().removeClass('active'); // $('.tag').children().eq(index).addClass('active').siblings().removeClass('active'); } }) // toggle-left $('.toggle-left').click(function () { if (!scroll_disable) { // 在本次动画未结束时,让用户无法进行下一次点击 scroll_disable = true; // 当前整个view的做左移量 var current_left = $('.scroll-img').position().left; // 一次动画滚动的距离 var scroll_width = $('.scroll-img img').width(); $('.scroll-img').animate({ left: current_left + scroll_width }, 300, function () { scroll_disable = false; // 在首位假图时 // console.log(current_left); if (current_left >= -scroll_width) { // 切换为首位真图 $(this).css({ left: -scroll_width * imgCount }) } }) // tag切换 对应关系 1=>3 4=>2 3=>1 2=>0 var index = Math.abs(current_left / scroll_width) -2; if (index == -1) { index = imgCount-1; } // tag下面的index索引指向的li变成活跃状态,该li的其他兄弟,都变成不活跃状态 $current_li = $('.scroll-tag').children().eq(index); $current_li.addClass('active'); $current_li.siblings().removeClass('active'); // $('.tag').children().eq(index).addClass('active').siblings().removeClass('active'); } }) $('.scroll-tag').children().click(function () { // console.log($(this).index()); // var $li = $(this); // 切换活跃的tag li $(this).siblings('.active').removeClass("active"); $(this).addClass('active'); // 当前点击点的索引 var current_index = $(this).index(); // 0 | 1 | 2 | 3 // 一次动画滚动的距离 var scroll_width = $('.scroll-img img').width(); console.log(current_index); console.log(scroll_width); // 切换图片 view // 当前点击的父亲相邻哥哥，做动画 $(this).parent().prev().animate({ // +1 初始左侧有一张假图 left: -(current_index + 1) * scroll_width }, 300) })
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
