您的位置：首页 > 其它

轮播图的基本原理

2017-03-17 19:02 253 查看

通过以下的5个过程，实现轮播图的轮播效果

1.动态生成结构

创建元素和插入元素的方法分别是什么？

创建元素：document.creatElement( tagName ) var li = document.creatElement(“li”)；

插入元素：appendChild( element ) ol.appendChild(“li”);

通过什么方法复制第一张图片元素？

通过cloneNode()方法来复制元素：eg . var firstImg = ulLis[0].cloneNode(true)；

其中cloneNode方法中，如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点

2.鼠标经过按钮

鼠标经过时如何改变按钮样式？

a. 清除所有按钮的样式

for (var j = 0; j < olLis.length; j++) { olLis[j].className = “”; }

b. 给当前鼠标所在按钮添加特殊样式

this.className = “current”;

鼠标经过按钮时如何计算图片盒子移动的距离?

通过按钮索引值（this.index）和图片的宽度（imgWidth）来计算图片盒子要移动的距离（target）

`target = - this.index * imgWidth

3.鼠标点击箭头

通过什么属性改变左右箭头的隐藏和显示？

通过控制左右箭头盒子的display属性来控制左右箭头盒子的显示（block）和隐藏（none）

通过什么机制来统一左/右箭头点击时图片切换为当前图片的上/下一张？

利用全局变量来统一左右箭头切换图片，在左右箭头点击时，通过pic来计算图片盒子移动的目标位置

var target = -pic * imgWidth;

当点击左箭头时：pic– –这样target比当前位置数值大imgWidth 图片盒子向右移动一张图片的距离显示出上一张图片

当点击右箭头时：pic++ 这样target比当前位置数值小imgWidth 图片盒子向左移动一张图片的距离显示出下一张图片

4.按钮随之变化

square的取值范围以及其与pic对应情况

5.添加自动滚动

图片自动播放下一张和点击右箭头的操作相同

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}

.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}

.screen {
width: 500px;
height: 200px;
/*overflow: hidden;*/
position: relative;
}

.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}

.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 3000px;
}

.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}

.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}

.all ol li.current {
background: yellow;
}

#arr {
display: none;
}

#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}

#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id='box'>
<div class="screen">
<ul>
<li><img src="images/1.jpg" width="500" height="200"/></li>
<li><img src="images/2.jpg" width="500" height="200"/></li>
<li><img src="images/3.jpg" width="500" height="200"/></li>
<li><img src="images/4.jpg" width="500" height="200"/></li>
<li><img src="images/5.jpg" width="500" height="200"/></li>
</ul>
<ol>
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
</body>
</html>
<script>
//要做事先找人
var box = document.getElementById("box");
var screen = box.children[0];
var ul = screen.children[0];
var ol = screen.children[1];
var ulLis = ul.children;//所有的图片
var imgWidth = screen.offsetWidth;
var arr = document.getElementById("arr");
var arrRight = document.getElementById("right");
var arrLeft = document.getElementById("left");
var timer = null;
//alert(imgWidth);

//1.动态生成结构
//1.1根据图片的数量动态生成按钮
for (var i = 0; i < ulLis.length; i++) {
//动态生成按钮
var li = document.createElement("li");
//给li添加序号
//索引号是从0开始的
//序号=索引号+1
li.innerHTML = i + 1;
//追加到ol下面
ol.appendChild(li);
}
var olLis = ol.children;//必须生成之后才能获取到
olLis[0].className = "current";

//1.2把第一张图片追加到最后
//复制第一张图片
var firstImg = ulLis[0].cloneNode(true);
//追加到ul后面
ul.appendChild(firstImg);

//2.鼠标经过按钮
//循环遍历 给每一个按钮绑定鼠标经过事件
for (var j = 0; j < olLis.length; j++) {
olLis[j].index = j;
olLis[j].onmouseover = function () {
//按钮排他
//干掉所有人
for (var k = 0; k < olLis.length; k++) {
olLis[k].className = "";
}
//留下我自己
this.className = "current";
//根据索引号 通过动画函数移动ul
//图片移动的位置 和 当前按钮索引号 和 图片宽度有关 而且是负数
var target = -this.index * imgWidth;
animate(ul, target);

//将应该显示的图片的索引号 和 鼠标经过的按钮的索引号 进行统一
pic = this.index;
//将应该亮起的按钮的索引号 和 鼠标经过的按钮的索引号 进行统一
square = this.index;
}
}

//3.鼠标点击箭头
//鼠标经过box显示arr 清理定时器停止自动播放
box.onmouseover = function () {
arr.style.display = "block";
clearInterval(timer);
}
//鼠标离开box隐藏arr 设置定时器继续自动播放
box.onmouseout = function () {
arr.style.display = "none";
timer = setInterval(playNext, 1000);
}

//点击 右箭头 显示下一张
var pic = 0;//pic表示当前图片的索引
var square = 0;//square表示当前按钮的索引
arrRight.onclick = function () {
playNext();
}
arrLeft.onclick = function () {
//判断当前图片的索引pic是否等于最后一张图片的索引ulLis.length-1
if (pic == 0) {
pic = ulLis.length - 1;
ul.style.left = -(ulLis.length - 1) * imgWidth + "px";
}
pic--;
//通过动画函数对ul进行移动
//target 和 图片索引 和 图片宽度 有关 而且是负数
var target = -pic * imgWidth;
animate(ul, target);

//按钮也应该自动播放
//如果当前按钮的索引号square大于第一个按钮的索引号0 就--
if (square > 0) {
square--;
} else {
//如果square等于零 说明到第一个了 这时就应该把他变成最后一个
square = olLis.length - 1;
}
//干掉所有人
for (var i = 0; i < olLis.length; i++) {
olLis[i].className = "";
}
//留下我自己
olLis[square].className = "current";
}

//4.添加自动滚动
timer = setInterval(playNext, 1000)

function playNext() {
//先判断当前图片的索引pic是否等于最后一张图片的索引ulLis.length-1
//如果相等马上跳过去然后在执行动画效果 从而实现无缝滚动
//并且把索引号也归零
if (pic == ulLis.length - 1) {
ul.style.left = 0;
pic = 0;
}
pic++;//pic++相当于 pic=pic+1;
//通过动画函数对ul进行移动
//target 和 图片索引 和 图片宽度 有关 而且是负数
var target = -pic * imgWidth;
animate(ul, target);

//按钮也应该自动播放
//如果当前按钮的索引号square小于最后一个按钮的索引号olLis.length - 1 就++
if (square < olLis.length - 1) {
square++;
} else {
square = 0;
}

//干掉所有人
for (var i = 0; i < olLis.length; i++) {
olLis[i].className = "";
}
//留下我自己
olLis[square].className = "current";
}

//5.完善鼠标经过

function animate(obj, target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var step = 25;
//left值越小越靠左
//obj.offsetLeft小于target
//obj在target的左侧
//应该向右走
//向右走step是正
/*if (obj.offsetLeft < target) {
step = 9;
}
if (obj.offsetLeft > target) {
//向左走是负
step = -9;
}*/
var step = obj.offsetLeft < target ? step : -step;

//Math.abs(obj.offsetLeft - target) 这个表示对象到目标的距离
//如果对象到目标的距离比一步迈出的距离要大 我就要继续走

if (Math.abs(obj.offsetLeft - target) > Math.abs(step)) {
obj.style.left = obj.offsetLeft + step + "px";
} else {
//再迈一步就超过目标了
obj.style.left = target + "px";//手动把对象放置到目标上
clearInterval(obj.timer);//清理定时器
}
}, 15)
}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 图片轮播图

相关文章推荐

新的分享

章节导航