轮播图的制作/JS四
轮播图
效果如下：
效果：
不点击左右按钮的时候自动切换；
点击按钮的时候切换下一张；
鼠标移入的时候图片停止不动；
点击下面圆圈的时候移动到图片对应的图片；
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="images/zhutu1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/zhutu3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/zhutu4.jpg" alt=""></a></li>
<li><a href="#"><img src="images/zhutu5.jpg" alt=""></a></li>
<li><a href="#"><img src="images/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>
<div class="arrow" id="prev"> < </div> <!--左箭头-->
<div class="arrow" id="next"> > </div> <!--右箭头-->
</div>
<script src="../获取元素.js"></script> <!--和下面script不能互换顺序,因为加载时顺序加载-->
<script src="index.js"></script>
</body>
</html>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;
}
js部分代码如下：
window.onload = function () {
//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') //my$All()取出所有的圆点
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.onmouseout= 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].onmouseover= function () {
//获取当前鼠标移入的那个小圆圈的下标 ===》 新下标
var newIndex = this.getAttribute('in')
console.log(newIndex)
//根据产生的新下标和旧下标的差的到了照片移动的偏移量
var currentOffset = (index-newIndex)*590
//调用运动函数 ===》图片已经切换
picBoxAnimation(currentOffset)
//新旧更替 旧下标保存新下标
index = newIndex ;
//调用小圆圈展示的函数 为什么在这调用？ 能不能拿到前面? 为什么？
buttonShow()
}
}
}