来一个自己写的轮播图
话不多说，上干货，注意外部js文件，别引用错了，外部js文件在下面会给出
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>轮播图</title>
<style>
*{
padding:0px;
margin: 0px;
list-style:none;
}
.start{
position:relative;
height: 250px;
width: 400px;
margin:100px auto 0px;
border:2px solid black;
overflow: hidden;
}
.start .start1{
height:250px;
width:2000px;
position: absolute;
left:0px;
top:0px;
}
.start .start1 li{
float:left;
height:250px;
width:400px;
}
.start .start1 li img{
width:100%;
height: 100%;
}
.start .btn {
position: absolute;
top: 50%;
margin-top: -20px;
width: 40px;
height: 40px;
color: #fff;
background-color: #000;
text-align: center;
line-height: 40px;
opacity: 0.1;
cursor: pointer;
}
.start:hover .btn {
opacity: 0.7;
}
.start .leftbtn {
left: 15px;
}
.start .rightbtn {
right: 15px;
}
.start .end {
position: absolute;
width: 100%;
bottom: 15px;
text-align: center;
}
.start .end span {
display: inline-block;
width: 15px;
height: 6px;
background-color: #ccc;
margin-right: 10px;
cursor: pointer;
}
.start .end .active {
background-color: #f40;
}
</style>
</head>
<body>
<div class=”start”>
<ul class=”start1″>
<li>
<img src=”./cat1.jpg”/>
</li>
<li>
<img src=”./cat2.jpg”/>
</li>
<li>
<img src=”./cat3.jpg”/>
</li>
<li>
<img src=”./cat4.jpg”/> **图片的话自己可以修改哈，还有位置。**
</li>
<li>
<img src=”./cat1.jpg”/>
</li>
</ul>
<div class=”btn leftbtn”><</div>
<div class=”btn rightbtn”>></div>
<div class=”end”>
<span class=”active”></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
**这个外部引用的js文件下面会给出**
<script src=’./move.js’></script>
<script>
var timer = null;
var sliderPage = document.getElementsByClassName(‘start1’)[0];
var moveWidth = sliderPage.children[0].offsetWidth;
var num = sliderPage.children.length – 1;
var leftBtn = document.getElementsByClassName(‘leftbtn’)[0];
var rightBtn = document.getElementsByClassName(‘rightbtn’)[0];
var oSpanArray = document.getElementsByClassName(‘end’)[0].getElementsByTagName(‘span’);
var lock = true;
var index = 0;
leftBtn.onclick = function () {
autoMove(‘right->left’);
}
rightBtn.onclick = function () {
autoMove(‘left->right’);
}
**这个部分是按钮**
for (var i = 0; i < oSpanArray.length; i++) {
(function (myIndex) {
oSpanArray[i].onclick = function () {
lock = false;
clearTimeout(timer);
index = myIndex;
startMove(sliderPage, {left: – index * moveWidth}, function () {
lock = true;
timer = setTimeout(autoMove, 1500);
changeIndex(index);
})
}
})(i)
}
**上面这部分是让索引可以点击跳转图片**
function autoMove (direction) {
**加lock是为了让你点击按钮快速的时候不出错**
if (lock) {
lock = false;
clearTimeout(timer);
**默认方向为向左**
if (!direction || direction == ‘left->right’) {
index++;
**startMove（）是一个外部的js文件的函数下面会给大家**
startMove(sliderPage, {left: sliderPage.offsetLeft – moveWidth}, function () {
if (sliderPage.offsetLeft == – num * moveWidth) {
index = 0;
sliderPage.style.left = ‘0px’;
}
timer = setTimeout(autoMove, 1500);
lock = true;
changeIndex(index);
});
}else if (direction == ‘right->left’) {
if (sliderPage.offsetLeft == 0) {
sliderPage.style.left = – num * moveWidth + ‘px’;
index = num;
}
index–;
startMove(sliderPage, {left: sliderPage.offsetLeft + moveWidth}, function () {
timer = setTimeout(autoMove, 1500);
lock = true;
changeIndex(index);
})
}
}
}
**这个是让索引按第几个图片动**
function changeIndex (_index) {
for (var i = 0; i < oSpanArray.length; i++) {
oSpanArray[i].className = ”;
}
oSpanArray[_index].className = ‘active’;
}
timer = setTimeout(autoMove, 1500);
</script>
</body>
</html>
**这个是外部的js文件，是一个让图片运动的文件**
function getStyle (obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
}else {
return window.getComputedStyle(obj, false)[attr];
}
}
// object是dom（元素），data是对象，function是函数传方法
function startMove (obj, data, func) {
clearInterval(obj.timer);
var iSpeed;
var iCur;
var name;
startTimer = obj.timer = setInterval(function () {
var bStop = true;
for (var attr in data) {
if (attr === ‘opacity’) {
name = attr;
iCur = parseFloat(getStyle(obj, attr)) * 100;
}else {
iCur = parseInt(getStyle(obj, attr));
}
iSpeed = ( data[attr] – iCur) / 8;
if (iSpeed > 0) {
iSpeed = Math.ceil(iSpeed);
}else {
iSpeed = Math.floor(iSpeed);
}
if (attr === ‘opacity’) {
obj.style.opacity = ( iCur + iSpeed ) / 100;
}else {
obj.style[attr] = iCur + iSpeed + ‘px’;
}
if ( Math.floor(Math.abs(data[attr] – iCur)) != 0 ) {
bStop = false;
}
}
if (bStop) {
clearInterval(obj.timer);
if (name === ‘opacity’) {
obj.style.opacity = data[name] / 100;
}
func();
}
},30);
}