<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小小争520</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>
/*获取元素 ---》 一个 */
function my$(selector ) {
/*判断？ # */
return document.querySelector(selector)
}
function my$All(selector ) {
/*判断？ # */
return document.querySelectorAll(selector)
}
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++; //4
if(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) //清除定时器 停止自动轮播
}
//鼠标移开 重新自动轮播 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 -新下标 )*590
for(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()
}
}
}
@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;
}*/
