.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)
})
