今天把网页端轮播图 学完了，前几天学校疫情蛮严重的就偷懒了一会，学习进度141/167，今天学习有问题，出现了一个js 搞不懂的地方，想发个单独的出来 咨询一下大佬，然后看轮播图剩下的功能，
首先就是按键和 小圆圈需要匹配的，所以当我们点击 圆圈切换图片时，需要把Num 切换成对应的图片，所以在切换事件上加入 num = index circle = index 进行匹配就可以了
后面就是一个左 按钮的实现 因为右按钮已经坐好了 左按钮就十分简单
左按钮
console.log(flag)
left.addEventListener('click',function(){
if(flag == true){
console.log(flag)
flag = false
console.log(flag)
if(num==0){
num = f_ul.children.length-1;
f_ul.style.left=-(f_ul.children.length-1)*focus.offsetWidth+'px'//0 px不是350 fouce盒子宽度
console.log(num)
}
num--;
fn(f_ul,-num*focus.offsetWidth,function(){
flag= true
}) // 需要变成负的 原因很简单 正的 都过图片了没有图片了
console.log('num',num)
//方法一
circle--;// f放在if 后面circle 要变成-1 length -1
if(circle< 0){
circle = ol.children.length-1
}
// 三木 circle = circle < 0 ? : ol.childeren.length-1:circle
circlechange();
}
})
// 封装函数 图片变化
function circlechange(){
for(var i =0;i<ol.children.length;i++){
ol.children[i].className=''
}
console.log('circle',circle)
ol.children[circle].className='current'
}最好就是自动播放了 就几行代码
var set_time = setInterval(function(){
right.click()// 手动调用 模拟手动
},1000显示停止就清除一个定时器 加在前面就可以了，就不粘贴代码了 ，今天原本打算看移动端的轮播图怎么写，但下面一个案例出现问题了 需要解决一下 ，自己现在还算想不懂。
完整的 js网页端轮播图代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.focus{
top:175px;
left: 350px;
position: relative;
width: 800px;
height: 400px;
background-color: pink;
overflow: hidden;
}
.left,.right{
position: absolute;
width: 20px;
height: 60px;
background: rgba(0,0,0,0.3);
/*background-color: red;*/
top:50%;
margin-top:-20px ;
text-align: center;
line-height: 60px;
color: #fff;
font-size:18px ;
z-index: 100;
text-decoration: none;
display: none;
}
.right{
right: 0;
}
.focus ul{
width: 600%;
position: relative;
}
img{
width: 800px;
height: 400px;
}
.focus ul li{
float: left;
}
.circle{
position: absolute;
bottom: 10px;
left: 50px;
}
.circle li{
list-style: none;
float: left;
width: 10px;
height: 10px;
/*background-color: #;*/
margin: 0 3px;
border-radius:50% ;
border:2px solid rgba(255,255,255,0.5)
}
.current{
background-color: #FFF;
}
</style>
<script type="text/javascript" src="day07封动画函数.js" ></script>
<!--<script type="text/javascript" src="day07网页轮播图.js" ></script>-->
</head>
<body>
<div class="focus">
<a href="javascript:;" class='left'><</a>
<a href="javascript:;" class="right">></a>
<ul>
<li><a href="javascript:;"><img src="img/1.jpg" alt="" /></a></li>
<li><a href="javascript:;"><img src="img/2.jpg" alt="" /></a></li>
<li><a href="javascript:;"><img src="img/3.jpg" alt="" /></a></li>
<li><a href="javascript:;"><img src="img/4.jpg" alt="" /></a></li>
<li><a href="javascript:;"><img src="img/5.jpg" alt="" /></a></li>
</ul>
<ol class="circle">
</ol>
</div>
<script>
var left = document.querySelector('.left')
var right = document.querySelector('.right')
var focus = document.querySelector('.focus')
//显示隐藏按钮
focus.addEventListener('mouseenter',function(){
left.style.display='block'
right.style.display='block'
// 经过停止
clearInterval(set_time)
set_time = null // 释放
})
focus.addEventListener('mouseleave',function(){
left.style.display='none'
right.style.display='none'
set_time = setInterval(function(){
right.click()// 手动调用 模拟手动
},1000)
})
//圈圈生成
var f_ul= focus.querySelector('ul')
var lenth =f_ul.children.length
var ol = focus.querySelector('.circle')
var img = focus.querySelector('ul').querySelectorAll('img')
console.log(img[0].width)
for(var i=0;i<lenth;i++){
//创建圈圈
var li = document.createElement('li')
console.log('第一个i',i)
li.setAttribute('index',i)
ol.appendChild(li)
// 生成自定义索引号
li.addEventListener('click',function(){
for(var i =0;i<lenth;i++)
{
ol.children[i].className=''
console.log('第二个i',i)
}
this.className='current'
// console.log(-i*img[i].width)
var focuswidth =focus.offsetWidth// 移动宽度
var index = this.getAttribute('index')
// 进行修改Num 进行同步操作不是异步操作 circle 也需要
num = index
circle = index
// i=i-1// 原因异步处理
// fn(f_ul,-img[i].offsetWidth)// 为什么是错误写法呢 异步机制问题 犯蠢了 应该采用标签
// fn(f_ul,-index*img[i].offsetWidth)// 复杂写法
// 简单写法
console.log('index',index)
fn(f_ul,-index*focuswidth)
console.log(i)
})
}
ol.children[0].className='current'
// 点击换图
// ul移动 不是Li移动
// 圈圈移动已经在上方实现了
// 图片滚动
// 克隆第一张图片
var first = f_ul.children[0].cloneNode(true)// 深度克隆
f_ul.appendChild(first)
var num =0;// 同时控制 按钮和圈圈
var circle =0; //小圆圈
// 加图片后不采用lenth
// console.log(lenth)
// console.log('c lent',f_ul.children.length)
var flag = true
right.addEventListener('click',function(){
if (flag){
flag = false
if(num==f_ul.children.length-1){
num = 0;
f_ul.style.left=0+'px'//0 px不是350 fouce盒子宽度
console.log(num)
}
num++;
fn(f_ul,-num*focus.offsetWidth,function(){
flag = true // 控制图片速度
})
console.log('num',num)
//方法一
circle++;// f放在if 后面circle 要变成-1 length -1
if(circle== ol.children.length){
circle = 0
}
circlechange();
}
})
// 左按钮做法
console.log(flag)
left.addEventListener('click',function(){
if(flag == true){
console.log(flag)
flag = false
console.log(flag)
if(num==0){
num = f_ul.children.length-1;
f_ul.style.left=-(f_ul.children.length-1)*focus.offsetWidth+'px'//0 px不是350 fouce盒子宽度
console.log(num)
}
num--;
fn(f_ul,-num*focus.offsetWidth,function(){
flag= true
}) // 需要变成负的 原因很简单 正的 都过图片了没有图片了
console.log('num',num)
//方法一
circle--;// f放在if 后面circle 要变成-1 length -1
if(circle< 0){
circle = ol.children.length-1
}
// 三木 circle = circle < 0 ? : ol.childeren.length-1:circle
circlechange();
}
})
// 封装函数 图片变化
function circlechange(){
for(var i =0;i<ol.children.length;i++){
ol.children[i].className=''
}
console.log('circle',circle)
ol.children[circle].className='current'
}
// 自动播放
var set_time = setInterval(function(){
right.click()// 手动调用 模拟手动
},1000)
// 经过停止 加到显示就行了
// 播放过快的 效果解决 节流阀
// 当上个函数执行完 在去执行下个动画 , 通过回调函数
</script>
</body>
</html>
ok 有点长，今天最主要的就是 下面那个案例 一个Bug 现在解决不了还是不理解 层级影响了我的动画 不知道怎么解决。
原先是可以很平滑的过去 然加入了层级之后就会变得很卡 动画一直在摇晃不会停留下来不知道为什么
希望有人能解决一下我的烦恼还是想不懂。
总结一下
今天小学了 2小时把，但大概一小时在找出那个层级错误影响了我动画 ，轮播图没啥好说的 ，层级不知道为什么影响了，心态有些影响希望明天大佬能找出我的错误回答我那就谢谢了。最后又偷懒 ，老是学习不下去0.0，希望能有人能一起学。
今天的学习进度太慢了，就完善了轮播图， 还是写一句我喜欢的文案:我在三月闻见一阵花香，便被那阵风带走了所有烦恼。时光很匆忙，别错过了落日和夕阳。
扫一扫
693
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
