function $(id) {
return document.getElementById(id);
}
//封装运动函数
function animate(ele,target) {
//开始要清除定时器
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//先获得该目标位置的偏移量
var current = ele.offsetLeft;
//设置每次移动的像素
var step =730;
step = current<target?step:-step; //当前的目标位置小于目标值时,这时步数为正
current += step; //当前移动的距离
if(Math.abs(target-current)>Math.abs(step)){
ele.style.left = current+'px';//当目标值与移动的距离大于步数的距离时,说明还有一段距离
} else{
clearInterval(ele.timer);//否则就已经到了,清除定时器
ele.style.left = target+'px';//就直接让他到目标值
}
},20)
}
var oBox = $('box');
var inner = oBox.children[0];
var ulObj = inner.children[0];//
var spanObj = inner.children[1].children; //获取所有的span标签
var imgWidth = inner.offsetWidth;
var foucslr = $('foucslr');
var left = $('left');
var right = $('right');
//为小按钮做点击事件
for(var i=0;i<spanObj.length;i++){
//在事件触发之前先获取索引
spanObj[i].setAttribute('index',i);
spanObj[i].onclick = function () {
//先去除之前的样式
for(var i=0;i<spanObj.length;i++){
//spanObj[0].className = '';
//这样也是去除样式
spanObj[i].removeAttribute('class');
}
this.className = 'current';
//获取按钮的索引
var index = this.getAttribute('index'); //获得当前对象的索引
animate(ulObj,-index*imgWidth);
console.log(index);
console.log(imgWidth*index)
}
}
//自动轮播
var timer = setInterval(rightMove,1000);
//显示与隐藏左右箭头
oBox.onmouseover = function () {
foucslr.style.display = 'block';
clearInterval(timer);//停止自动播放
}
oBox.onmouseout = function () {
foucslr.style.display = 'none';
timer = setInterval(rightMove,1000)
};
ulObj.appendChild(ulObj.children[0].cloneNode(true));//把第一张图片进行复制一份
//右边按钮点击
var pic = 0;
right.onclick = rightMove;
//右边移动按钮
function rightMove() {
if(pic === ulObj.children.length-1){ //如果图片到了最后一张,就把他置为第一张
pic = 0;
ulObj.style.left = 0+'px'; //图片也置为第一张
}
pic++;
animate(ulObj,-imgWidth*pic);
//在进行控制按钮,当图片进行移动时,按钮这个时候也得跟着动
if(pic === ulObj.children.length-1){
//第五个颜色应该去除
spanObj[spanObj.length-1].className = '';
//第一个按钮颜色设置上
spanObj[0].className = 'current'
}else { //如果不是最后一张,一并去除样式,然后再添加样式
//去除所有的按钮样式
for(var i=0;i<spanObj.length;i++){
spanObj[i].removeAttribute('class');
}
spanObj[pic].className = 'current';
}
}
//左边按钮
left.onclick = leftMove;
//左边移动按钮
function leftMove() {
if(pic === 0){ //如果是第一张图片时,往左移动时马上变为第6张图片
//图片总共有七张,往左边一点,这个时候出现的时第7张图片,但是索引为6
pic = 6; //第6张图片
console.log(pic);
ulObj.style.left = -pic*imgWidth+'px'
}
pic--;
animate(ulObj,-imgWidth*pic);
console.log(pic);
//设置小按钮颜色,先去除按钮样式
for(var i =0;i<spanObj.length;i++){
spanObj[i].removeAttribute('class');
}
//对当前样式进行设置
spanObj[pic].className = 'current';
}
//自动轮播
//HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>完整的轮播图</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 730px;
height: 454px;
margin: 100px auto;
position: relative;
}
.inner{
width:730px ;
height: 454px;
overflow: hidden;
position: relative;
}
ul{
list-style-type: none;
}
.inner ul{
width: 1000%;
position: absolute;
top: 0;
left: 0;
}
.inner li{
float: left;
}
.square{
position: absolute;
right: 10px;
bottom: 10px;
}
.square span{
width: 16px;
height: 16px;
background-color: #ffffff;
display: inline-block;
text-align: center;
line-height: 16px;
cursor: pointer;
}
.square span.current{
background-color: orange;
color: #ffffff;
}
#foucslr{
display: none;
}
#foucslr span{
width: 40px;
height: 40px;
line-height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background-color: #000000;
text-align: center;
color: #ffffff;
font-size: 30px;
cursor: pointer;
border: 1px solid #cccccc;
opacity: 0.3;
}
#foucslr #right{
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="inner">
<ul>
<li><img src="../img1/images/1.jpg" alt="" width="730" height="454"></li>
<li><img src="../img1/images/2.jpg" alt=""></li>
<li><img src="../img1/images/3.jpg" alt=""></li>
<li><img src="../img1/images/4.jpg" alt=""></li>
<li><img src="../img1/images/5.jpg" alt=""></li>
<li><img src="../img1/images/6.jpg" alt=""></li>
</ul>
<div class="square">
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
</div>
<div id="foucslr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
<script src="完整的轮播图.js"></script>
</body>
</html>
完整轮播图
最新推荐文章于 2022-11-03 11:37:30 发布