/*关于轮播图,相信大家都不陌生,各大网站上都有它的身影。
*那么我们如何实现这样一个东西呢?
*希望这篇博文能帮到你
*/
/*上图就是我们今天需要实现的效果
先来确认一下我们的需求:
需求1:鼠标移入轮播图,显示上一页,下一页的箭头,鼠标移出消失
需求2:点击上一页,下一页实现图片切换,导航栏的数字效果跟着变化
需求3:点击导航页码,也可以实现图片切换
需求4:让他实现自动轮播,鼠标移入轮播图取消自动轮播
*/
/*首先先分析一下我们的页面构成,我们用一个div把可视区域、页码导航部分、上一页下一页包裹起来
可视区域包裹着一个ul标签,里面每一个li标签装有我们需要轮播的图片
设定ul的宽度等于li标签数量乘以图片的真实宽度(offsetWidth),让我们的图片呈一列显示,
无论用浮动还是定位的方式都可以,本例子用定位的方式,为什么叻?因为我们div还装有别的一些东西,
也需要用到定位,这样比较方便一点...代码后面呈现,我们现在开始从需求1开始分析
*/
需求1
这个需求实现比较简单,我们只需要给装有这些元素的大盒子加上一个onmouseover事件和onmouseout事件
让上一页下一页部分显示或者隐藏即可 用到display属性。
需求2
给我们的上一页下一页添加点击事件,onclick
页面默认显示第一张,所以我们可以设置一个变量index来记录我们当前轮播的是哪张图片。
每点击一次下一页index++,再调用我封装好的animation方法实现平移效果切换。(每点击一次,ul向左移动...实现图片切换)
紧接着,如果页码下标与index一致,说明是当前页面,需要改变样式
ok,这样一来,我们基本需求就实现了,那么现在问题又来了,当index达到第5张的时候,此时index=4,
我再点一次会发生什么情况?会发现ul移到了没有图片的地方,页码导航也随之没有了样式
这种情况,我们如何解决呢?为了更好的实现我们的效果,其实我们可以加多一行li代码存储第1张的图片,
当我们点击的时候,index=5,虽然我们程序员知道这是第六张,但在用户眼里,这就是第一张图片,
我们做一个特殊处理,将第一页的页码的样式修改。
当我们在第六张点击的时候,此时我们可以修改ul的位置,再将index设置为0,让它继续进行下一页的操作。
这样我们就可以神不知鬼不觉的实现我们的需求啦。
上一页也是同样的原理。
需求3
我们给每一个页码导航一个属性,让它代表它是对应的哪一张图片,
当我们点击页码的时候,将这个属性取出来,赋值给我们的全局变量index,
这样一来,我们就可以轻松的实现我们动画平移的效果,
再使用排他思想,除了点击的这个以外,样式清空,只给我们这个点击的赋予样式。
需求4
这个就比较简单了,设置一个定时器,每隔一秒钟触发一次下一页的函数体即可,
给大盒子的鼠标移入事件加入清除计时器的效果,移出的时候重新开启计时器效果,
PS:记得保存计时器id,用于清除
接下来看下我们完整的代码吧,希望这篇博文对你有帮助。
<!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/01.jpg" width="500" height="200"/></li>
<li><img src="images/02.jpg" width="500" height="200"/></li>
<li><img src="images/03.jpg" width="500" height="200"/></li>
<li><img src="images/04.jpg" width="500" height="200"/></li>
<li><img src="images/05.jpg" width="500" height="200"/></li>
<li><img src="images/01.jpg" width="500" height="200"/></li>
</ul>
<ol>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
</body>
<script src="common.js"></script>
<script src="animation.js"></script>
<script>
var box = id('box');
var screen = document.getElementsByClassName('screen')[0];
var ul = screen.children[0];
var ol = screen.children[1];
var liList = ul.children;
var olList = ol.children;
var arr = id('arr');
var left = id('left');
var right = id('right');
var index = 0;
var timeID = null;
timeID = setInterval(function ( ) {
nextPage();
},2000);
box.onmouseover = function ( ) {
arr.style.display = 'block';
clearInterval(timeID);
}
box.onmouseout = function ( ) {
arr.style.display = 'none';
timeID = setInterval(function ( ) {
nextPage();
},2000);
}
left.onclick = function ( ) {
if(index == 0){
index = liList.length-1;
ul.style.left = -index*screen.offsetWidth + 'px';
}
index--;
animationMove(ul,-index*screen.offsetWidth);
for(var i = 0;i<olList.length;i++){
if(i == index){
olList[i].className = 'current';
}else{
olList[i].className = '';
}
}
if(index == liList.length-1){
olList[0].className = 'current';
}
console.log ( index );
}
right.onclick = function ( ) {
nextPage();
}
function nextPage ( ) {
if(index == liList.length-1){
ul.style.left = '0px';
index = 0;
}
index++;
animationMove(ul,-index*screen.offsetWidth);
for(var i = 0;i<olList.length;i++){
if(i == index){
olList[i].className = 'current';
}else{
olList[i].className = '';
}
}
if(index == liList.length-1){
olList[0].className = 'current';
}
console.log ( index );
}
for(var i = 0;i<olList.length;i++){
olList[i].setAttribute('yemaIndex',i);
olList[i].onclick = function ( ) {
var yemaIndex = this.getAttribute('yemaIndex');
index = yemaIndex;
animationMove(ul,-index*screen.offsetWidth);
for(var j = 0;j<olList.length;j++){
if(olList[j] == this){
this.className = 'current';
}else{
olList[j].className = '';
}
}
}
}
</script>
</html>
/**1.平移动画
*
* @param obj 要移动的元素
* @param target 要移动的目标距离
*/
function animationMove ( obj,target ) {
clearInterval(obj.timeID);
obj.timeID = setInterval(function ( ) {
var currentLeft = obj.offsetLeft;
var isLeft = target>currentLeft?true:false;
if(isLeft){
currentLeft += 15;
}else{
currentLeft -= 15;
}
if(isLeft==true?currentLeft<target:currentLeft>target){
obj.style.left = currentLeft + 'px';
}else{
clearInterval(obj.timeID);
obj.style.left = target + 'px';
}
},10);
}