前端JavaScripts基础知识点轮播图

1、index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$美少女战士$</title><link rel="stylesheet" href="index.css">
</head>
<body>
<!--相框-->
<div class="Photo-frame"><!--照片条--><ul class="picBox clearFix" style="left: 0"><li><a href="#"><img src="zhutu1.jpg" alt=""></a></li><li><a href="#"><img src="zhutu3.jpg" alt=""></a></li><li><a href="#"><img src="zhutu4.jpg" alt=""></a></li><li><a href="#"><img src="zhutu5.jpg" alt=""></a></li><li><a href="#"><img src="zhutu6.jpg" alt=""></a></li></ul><!--指示  小圆圈--><div class="circles"><span in="0" style=" box-shadow: 0 0 10px 5px rgba(255,255,255,.7)  inset"></span><span in="1"></span><span in="2"></span><span in="3"></span><span in="4"></span></div><!--箭头  next 右箭头--><div class="arrow" id="next"> > </div><!--左箭头--><div class="arrow" id="prev"> < </div>
</div>
<!--不能互换顺序-->
<script src="获取元素.js"></script>
<script src="index.js"></script>
</body>
</html>

2、index.css

@charset "UTF-8";
* {padding: 0;margin: 0;
}
img {display: block; /*转换块级元素*/
}
ul li {list-style: none;
}
/*清浮动的衣服*/
.clearFix::after,.clearFix::before {content: '';display: block;line-height: 0;clear: both;}
.Photo-frame {position: relative;width: 590px;height: 470px;border: 1px solid #ccc;margin: 100px auto;/*溢出隐藏*/overflow: hidden;
}
/*照片条*/
.picBox {/*定位*/position: absolute;width: 2950px;height: 470px;top:0;}
.picBox > li {float: left;}
.arrow {position: absolute;top:50%;margin-top: -20px;width: 24px;height: 40px;background-color: rgba(45,45,45,.3);color: #fff;line-height: 40px;text-align: center;font-size: 25px;cursor: pointer;/*鼠标小手样式*/}
#next {right: 0;
}
#prev {left: 0;
}
.arrow:hover {background-color: rgba(45,45,45,.7);
}
/*小圆点*/
.circles {position: absolute;bottom:20px;left: 50%;margin-left:-76px ;height: auto;}
.circles span {display: inline-block;box-sizing: border-box;width: 14px;height: 14px;border: 3px solid rgba(255,255,255,.3);border-radius: 50%;margin-left: 10px;cursor: pointer;background-color: darkblue;}
/*
.circles span:hover {box-shadow: 0 0 10px 5px rgba(255,255,255,.7)  inset;
}*/

3、index.js

window.onload = function () {// ☆☆☆☆☆  如果你是先加后判断 判断条件应该是下标+1//1:手动播放/** (1)当用户点击右箭头  下一张    照片盒子向左移动   left-=590px* (2)当用户点击左箭头  上一张    照片盒子向右移动* left+=590px** *///相框var Photo_frame = my$('.Photo-frame')//照片盒子var picBox = my$('.picBox')//箭头var next = my$('#next') //右var prev = my$('#prev') //左var circles = my$('.circles')var circlesSpans = my$All('.circles span') //bug  my$() ===>my$All()console.log(circlesSpans)var index  = 0 ;// 标记当前有光圈的小圆点的下标/***********照片盒子运动函数  picBoxAnimation()* 参数：偏移量 +590 向右 上一张*            -590 向左  下一张* 返回值 无* ************/function picBoxAnimation(offset){var leftValue = parseInt(picBox.style.left); //数值类型var newLeft =  leftValue + offset    //照片盒子要运动的距离if(newLeft < -2360 ){ //向左走的趋势 当前已经展示的是第5张newLeft = 0;}if(newLeft > 0 ){newLeft = -2360}picBox.style.left = newLeft + 'px';console.log(picBox.style.left)  //只能获取行内样式}//右箭头next.onclick = function () {picBoxAnimation(-590)//右箭头朝右移动 加+index++; //4if(index === 5){index = 0;}buttonShow();}prev.onclick = function () {picBoxAnimation(+590)index--;if(index === -1){index = 4;}buttonShow();}//2:自动播放  定时器function play() {timer = setInterval(function () {next.onclick();},1000)}play();//s鼠标移入不动 清定时器Photo_frame.onmouseover = function () {clearInterval(timer) //清除定时器 停止自动轮播clearInterval(timer)}//鼠标移开 重新自动轮播 play()Photo_frame. function () {play()}/*********小圆点* 1：随着图片移动* 2：鼠标切换相应（自定义属性 ）图片* **********///小圆点移动函数  buttonShow()  参数 无 返回值 无function  buttonShow() {for(var i =0;i<circlesSpans.length ;i++){circlesSpans[i].style.boxShadow = '';//清除样式}circlesSpans[index].style.boxShadow = "0 0 10px 5px rgba(255,255,255,.7)  inset"}//鼠标移入哪个小圆圈 哪张图就显示//图片盒子运动偏移量 = (旧下标 index -新下标 )*590for(var i =0;i<circlesSpans.length ;i++){//给小圆圈绑定鼠标移入事件circlesSpans[i]. function () {//获取当前鼠标移入的那个小圆圈的下标 ===》 新下标var newIndex = this.getAttribute('in')console.log(newIndex)//根据产生的新下标和旧下标的差的到了照片移动的偏移量var currentOffset = (index-newIndex)*590//调用运动函数 ===》图片已经切换picBoxAnimation(currentOffset)//新旧更替 旧下标保存新下标index = newIndex ;//调用小圆圈展示的函数 为什么在这调用？ 能不能拿到前面? 为什么？buttonShow()}}
}

4、获取元素.js

window.onload = function () {// ☆☆☆☆☆  如果你是先加后判断 判断条件应该是下标+1//1:手动播放/** (1)当用户点击右箭头  下一张    照片盒子向左移动   left-=590px* (2)当用户点击左箭头  上一张    照片盒子向右移动* left+=590px** *///相框var Photo_frame = my$('.Photo-frame')//照片盒子var picBox = my$('.picBox')//箭头var next = my$('#next') //右var prev = my$('#prev') //左var circles = my$('.circles')var circlesSpans = my$All('.circles span') //bug  my$() ===>my$All()console.log(circlesSpans)var index  = 0 ;// 标记当前有光圈的小圆点的下标/***********照片盒子运动函数  picBoxAnimation()* 参数：偏移量 +590 向右 上一张*            -590 向左  下一张* 返回值 无* ************/function picBoxAnimation(offset){var leftValue = parseInt(picBox.style.left); //数值类型var newLeft =  leftValue + offset    //照片盒子要运动的距离if(newLeft < -2360 ){ //向左走的趋势 当前已经展示的是第5张newLeft = 0;}if(newLeft > 0 ){newLeft = -2360}picBox.style.left = newLeft + 'px';console.log(picBox.style.left)  //只能获取行内样式}//右箭头next.onclick = function () {picBoxAnimation(-590)//右箭头朝右移动 加+index++; //4if(index === 5){index = 0;}buttonShow();}prev.onclick = function () {picBoxAnimation(+590)index--;if(index === -1){index = 4;}buttonShow();}//2:自动播放  定时器function play() {timer = setInterval(function () {next.onclick();},1000)}play();//s鼠标移入不动 清定时器Photo_frame.onmouseover = function () {clearInterval(timer) //清除定时器 停止自动轮播clearInterval(timer)}//鼠标移开 重新自动轮播 play()Photo_frame. function () {play()}/*********小圆点* 1：随着图片移动* 2：鼠标切换相应（自定义属性 ）图片* **********///小圆点移动函数  buttonShow()  参数 无 返回值 无function  buttonShow() {for(var i =0;i<circlesSpans.length ;i++){circlesSpans[i].style.boxShadow = '';//清除样式}circlesSpans[index].style.boxShadow = "0 0 10px 5px rgba(255,255,255,.7)  inset"}//鼠标移入哪个小圆圈 哪张图就显示//图片盒子运动偏移量 = (旧下标 index -新下标 )*590for(var i =0;i<circlesSpans.length ;i++){//给小圆圈绑定鼠标移入事件circlesSpans[i]. function () {//获取当前鼠标移入的那个小圆圈的下标 ===》 新下标var newIndex = this.getAttribute('in')console.log(newIndex)//根据产生的新下标和旧下标的差的到了照片移动的偏移量var currentOffset = (index-newIndex)*590//调用运动函数 ===》图片已经切换picBoxAnimation(currentOffset)//新旧更替 旧下标保存新下标index = newIndex ;//调用小圆圈展示的函数 为什么在这调用？ 能不能拿到前面? 为什么？buttonShow()}}
}

5、zhutu1.png

6、zhutu3.png

7、zhutu4.png

8、zhutu5.png

9、zhutu6.png

特别注意：这九个文件要放在同一文件夹下，其命名要和标注的一模一样。

前端JavaScripts基础知识点轮播图相关推荐

从零开始学前端：OPPO商城轮播图 --- 今天你学习了吗？（CSS：Day23）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:css3新属性scss和less - 今天你学习了吗?(CSS:Day22) 文章目录从零开始学前端:程 ...
做一个前端网页送给女朋友~轮播图+纪念日
文章目录 1. 轮播图框架 2. 轮播图大盒子实现 1. 盒子及图片的可视化 2. 将图片重叠起来并放入轮播图盒子中 ...相对定位与绝对定位 3. 添加左右按钮 4. 点击按钮跳转图片 5. 鼠标离 ...
css3 tupianlunbo_CSS3——animation的基础（轮播图）
作为前端刚入门的小菜鸟,只想记录一下每天的小收获对于animation动画 1.实现动画效果的组成: (1)通过类似Flash的关键帧来声明一个动画 (2)在animation属性中调用关键帧声明的 ...
快乐玩前端：无缝衔接轮播图——原生JS实现
无缝衔接轮播图--原生JS实现原理就不讲了,太麻烦了,大致原理就是两扇推拉门,始终保持推拉门处于开启-闭合状态,大致就这样吧,原理很简单,只是说实现比较麻烦,一直想要实现这样的效果,奈何水平不够,也 ...
前端JavaScripts基础知识点
1放大镜 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
前端javascripts基础知识点猴子吃桃
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
前端JavaScripts基础知识点讲义代码
js day01 数据类型基本数据类型引用数据类型数据类型转换其他类型 ->数值类型 string boolean null undefined --->number #1: 转换 ...
轮播切换_javascript基础（一）——轮播图
javascript基础(一)--轮播图 1.轮播图的实现原理轮播图的js实现原理其实十分的简单,首先将图片放入一个ul标签中,ul标签的大小要足够将所有图片放入其中.然后再将ul标签放进div中, ...
js轮播图代码_javascript基础（一）——轮播图
javascript基础(一)--轮播图 1.轮播图的实现原理轮播图的js实现原理其实十分的简单,首先将图片放入一个ul标签中,ul标签的大小要足够将所有图片放入其中.然后再将ul标签放进div中, ...

前端JavaScripts基础知识点轮播图

前端JavaScripts基础知识点轮播图相关推荐

最新文章

热门文章