1、HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="slider" id="slider">
<div class="slider_scroll" id="slider_scroll">
<div class="slider_main" id="slider_main">
<div class="item">
<a href="#">
<img src="images/img1.jpg" alt="">
</a>
</div>
<div class="item">
<a href="#">
<img src="images/img2.jpg" alt="">
</a>
</div>
<div class="item">
<a href="#">
<img src="images/img3.jpg" alt="">
</a>
</div>
<div class="item">
<a href="#">
<img src="images/img4.jpg" alt="">
</a>
</div>
<div class="item">
<a href="#">
<img src="images/img5.jpg" alt="">
</a>
</div>
</div>
<span id="prev" class="prev"></span>
<span id="next" class="next"></span>
</div>
<div class="slider_index" id="slider_index">
</div>
</div>
<script src="js/myAnimation-2.js"></script>
<script src="js/index.js"></script>
</body>
</html>
2、css样式代码
.slider{
width: 400px;
height: 400px;
position: relative;
overflow: hidden;
margin: 100px auto;
}
.slider_scroll{
width: 400px;
height: 400px;
position: relative;
}
.slider_main{
width: 400px;
height: 400px;
position: relative;
}
.slider_main .item{
width: 400px;
height: 400px;
position: absolute;
}
.slider_main .item img{
width: 400px;
height: 400px;
}
.slider_index{
width: 400px;
height: 40px;
line-height: 40px;
text-align: center;
font-weight:600;
color: #ffffff;
background-color:rgba(0, 0, 0, .5);
z-index: 20;
position: absolute;
bottom: 0;
cursor: pointer;
}
.slider_index .slider_index_icon.current{
color: red;
}
.slider_index .slider_index_icon{
display: inline-block;
color:#ffffff;
padding: 0 2px;
margin: 0 10px;
height: 40px;
line-height: 40px;
}
.slider_scroll span{
position: absolute;
height: 70px;
width: 40px;
background: url(../../轮播图demo/images/icon-slides.png) no-repeat;
top: 50%;
margin-top: -35px;
cursor: pointer;
}
.slider_scroll span.prev{
background-position:0 0;
left: 0;
}
.slider_scroll span.next{
right: 0;
background-position:-42px 0;
}
3、js代码
window.onload = function () {
//1、获取标签
var slider = document.getElementById('slider')
var slider_scroll = document.getElementById('slider_scroll')
var slider_main = document.getElementById('slider_main')
var allBoxs = slider_main.children
var prev = document.getElementById('prev')
var next = document.getElementById('next')
var slider_index = document.getElementById('slider_index')
var iNow = 0
var timer = null
//2、动态创建索引器（循环）
for (var i = 0
var span = document.createElement('span')
if (i === 0) {
//给遮罩层的文本创建类名，并返回css写样式
span.className = 'slider_index_icon current'
} else {
span.className = 'slider_index_icon'
}
span.innerText = parseInt(i + 1)
slider_index.appendChild(span)
}
//3、让滚动的元素归位
var scroll_w = parseInt(getStyle(slider, 'width'))
//j=1的意思是，除了第一张图片是在原来的位置，后面的图片都到了现在这个盒子的右边
for (var j = 1
allBoxs[j].style.left = scroll_w + 'px'
}
//4、绑定下一张按钮的监听
next.onclick = function () {
/**
* 1、让当前的图片左移
* 2、让下一张图片显示在右边
* 3、让右边的图片进入可视区域
*/
startAnimation(allBoxs[iNow], {
"left": - scroll_w
})
//让iNow更新并做临界值
iNow++
if (iNow >= allBoxs.length) {
iNow = 0
}
allBoxs[iNow].style.left = scroll_w + 'px'
startAnimation(allBoxs[iNow], {
"left": 0
})
changeIndex()
}
//5、控制上一张图片
prev.onclick = function () {
startAnimation(allBoxs[iNow], {
"left": scroll_w
})
//让iNow更新并做临界值
iNow--
if (iNow < 0) {
iNow = allBoxs.length - 1
}
allBoxs[iNow].style.left = - scroll_w + 'px'
startAnimation(allBoxs[iNow], {
"left": 0
})
changeIndex()
}
//6、自动轮播效果（开启定时器）
timer = setInterval(next.onclick,2000)
slider.onmouseover = function(){
clearInterval(timer)
}
slider.onmouseout = function(){
timer = setInterval(next.onclick,2000)
}
//6、遍历索引器，添加事件
var slider_index_icon = slider_index.children
for (var i = 0
slider_index_icon[i].onclick = function () {
//6.1获取获取当前点击的索引
var index = parseInt(this.innerText) - 1
//点击的索引与当前的索引（iNow）对比
if(index>iNow){
//进行的是切换下一张的操作
startAnimation(allBoxs[iNow], {
"left": - scroll_w
})
allBoxs[index].style.left = scroll_w + 'px'
}else if(index <iNow){
startAnimation(allBoxs[iNow], {
"left": scroll_w
})
allBoxs[index].style.left = -scroll_w + 'px'
}
iNow = index
startAnimation(allBoxs[iNow], {
"left": 0
})
changeIndex()
}
}
//控制当前的索引
function changeIndex() {
for (var i = 0
slider_index_icon[i].className = 'slider_index_icon'
}
slider_index_icon[iNow].className = 'slider_index_icon current'
}
}
4、css默认样式清除
body {
font-family:arial,helvetica,sans-serif;
font-size:13px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.4;
text-align:center;
}
body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {
margin:0;
padding:0;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
}
table {
font-size:inherit;
}
input, select {
font-family:arial,helvetica,clean,sans-serif;
font-size:100%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
outline: none;
}
button {
overflow:visible;
}
th, em, strong, b, address, cite {
font-style:normal;
font-weight:normal;
}
li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
img, fieldset {
border:0 none;
}
ins {
text-decoration:none;
}
a{
text-decoration: none;
}
5、js运动框架封装
/**
* 动画的函数(同时运动动画) 利用json实现
* var json = {
"name":"mjj",
"age":29
}
for(var attr in json){
alert(attr)
//获取属性名
alert(json[attr])
//获取属性值
}
* obj 当前的对象
*/
//多值运动-函数封装（控制宽、高、及透明度d等属性的变化）
var speed = 0
function startAnimation(obj, json, fn) {
//针对于多物体运动，定时器的返回值要绑定在当前的事件中
clearInterval(obj.timer)
obj.timer = setInterval(function () {
var cur = 0
//标杆 如果flag的值为true，证明说有的属性值都达到终点值
var flag = true
//0、获取样式属性
for (var attr in json) {
switch (attr) {
case 'opacity':
//由于透明度涉及小数计算，如0.07\*100=> 7.000000000000001，所以需要用Math.round()去掉尾巴*
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100)
break
case 'scrollTop':
cur = obj[attr]
break
default:
cur = parseFloat(getStyle(obj, attr))
break
}
//1、求速度
speed = (json[attr] - cur) / 20
speed = json[attr] > cur ? Math.ceil(speed) : Math.floor(speed)
//2、临界处理
if (json[attr] !== cur) {
flag = false
}
//3、运动起来
switch (attr) {
case 'opacity':
obj.style[attr] = (cur + speed) / 100
obj.style[attr] = `alpha(opacity: ${cur + speed}) `
break
case 'scrollTop':
obj.scrollTop = cur + speed
break
default:
obj.style[attr] = cur + speed + 'px'
break
}
}
if (flag) {
clearInterval(obj.timer)
//临界点判断（如果有第四个参数则执行，如果没有就直接跳出）
if (fn) {
fn()
}
return
}
}, 30)
}
//obj是当前元素对象 attr是当前元素对象的属性
function getStyle(obj, attr) {
if (obj.currentStyle) {
//obj.currentStyle是兼容ie的方法
return obj.currentStyle[attr]
} else {
//主流浏览器的方法
return getComputedStyle(obj, null)[attr]
}
}
