一、传统轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{ //去掉margin和padding
margin: 0;
padding:0;
}
.box{ //设置外层盒子box的样式
height: 300px;
width:560px;
border:1px solid pink;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.m_unit{ //设置移动单元 注意：长度要尽量长
width:5000px;
height:300px;
position: absolute;
left:0;
top:0;
}
.m_unit ul{ //清除浮动
overflow: hidden;
}
.m_unit ul li{ //去掉li的小圆点 所有li浮动
list-style: none;
float: left;
}
.btn span{ //设置按钮的样式
width:55px;
height:55px;
position: absolute;
top:50%;
margin-top: -28px;
}
.btn .left{
background: url('image/btnL.png');
left:0;
}
.btn .right{
background: url('image/btnR.png');
right:0;
}
.circle ul{ //circle 的ul样式
position: absolute;
bottom:10px;
right:0;
} //circle 的li的样式
.circle ul li{
float: left;
list-style: none;
width:20px;
height:20px;
border-radius: 50%;
background: orange;
margin-right: 10px;
} //默认类名为current的小圆点为红色
.circle ul li.current{
background:red;
}
</style>
<body>
<div class="box" id="box">
<div class="m_unit" id='m_unit'>
<ul id='imgUl'>
<li><a href="javascript:;"></a><img src='image/0.jpg'></li>
<li><a href="javascript:;"></a><img src='image/1.jpg'></li>
<li><a href="javascript:;"></a><img src='image/2.jpg'></li>
<li><a href="javascript:;"></a><img src='image/3.jpg'></li>
<li><a href="javascript:;"></a><img src='image/4.jpg'></li>
</ul>
</div>
<div class="btn">
<span class='left' id='leftBtn'></span>
<span class='right' id='rightBtn'></span>
</div>
<div class='circle' id='circle'>
<ul>
<li class='current'></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script src='../js/animate-3.0.js'></script> //引入js文件
<script>
var box = document.getElementById('box'); //获得需要的元素
var m_unit = document.getElementById('m_unit');
var imgUl = document.getElementById('imgUl');
var imgLis = imgUl.getElementsByTagName('li');
var rightBtn = document.getElementById('rightBtn');
var leftBtn = document.getElementById('leftBtn');
var imgLength = imgLis.length;
imgUl.appendChild(imgLis[0].cloneNode(true)); //克隆一个假的第一张图片放到最后
var circle = document.getElementById('circle');
var circleLis = circle.getElementsByTagName('li');
var timer = setInterval(function (){ //定时器 让轮播图自动播放
rightHandler();
}, 2000);
box.onmouseover = function (){ //鼠标进入box后，清除定时器
clearInterval(timer);
}
box.onmouseout = function (){ //鼠标离开，继续轮播
timer = setInterval(function (){
rightHandler();
}, 2000);
}
var idx = 0; //定义idx
rightBtn.onclick = rightHandler; //右按钮点击事件
function rightHandler(){
if(m_unit.isanimated) return; //节流 如果m_unit是移动状态就return，防止页面乱
idx++;
animate(m_unit,{'left':-560*idx},1000,'BounceEaseOut',function (){ //m_unit每隔一秒更改left值
if(idx > imgLength-1){ //回调 如果移动到假的图片，瞬间回到原点
idx=0;
m_unit.style.left = 0; //根据idx代表m_unit
}
});
changeCircle(); //调用改变小圆点的函数 改变小圆点
}
leftBtn.onclick = function (){ //左按钮点击事件
if(m_unit.isanimated) return;
idx--;
if(idx < 0){ //如果idx小于0 idx等于最后一张图片的下标
idx = imgLength-1;
m_unit.style.left = -560*(idx+1)+'px'; //改变left值 ，同上
}
animate(m_unit,{'left':-560*idx},1000,'BounceEaseOut');
changeCircle(); //改变小圆点
}
for(var i =0; i < circleLis.length; i++){ //小圆点的点击事件
circleLis[i].idxx = i; //绑定自定义属性，规避闭包
circleLis[i].onclick = function (){
if(m_unit.isanimated) return; //节流
idx = this.idxx; //当前点击的小圆点小标给了idx
animate(m_unit,{'left':-560*idx},1000,'BounceEaseOut'); //根据信号量切换图片
changeCircle(); //改变小圆点
}
}
function changeCircle(){ //定义改变小圆点的函数
var n = idx; //直接用idx会改变idx值，导致图片切换异常
if(n == circleLis.length) n=0; //所以用n接收idx 再判断如果n=等于circlr数组的长度，让n=0
for(var i = 0;i<circleLis.length;i++){ //遍历小圆点的数组 排他
circleLis[i].className = ''; //把所有的小圆点的类名都去掉
}
circleLis[n].className = 'current'; //把n对应的的类名改为current
}
</script>
</body>
</html>二、呼吸轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding:0;
}
.box{
height: 300px;
width:560px;
border:1px solid pink;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.m_unit{
width:5000px;
height:300px;
position: absolute;
left:0;
top:0;
}
.m_unit ul{
overflow: hidden;
}
.m_unit ul li{
list-style: none;
position: absolute; //全部定位到一起
left:0;
top:0;
opacity: 0; //设置透明度为0 全部隐藏
filter:alpha(opacity=0); //适配透明度
}
.m_unit ul li.current{
opacity: 1; //类名为current的li显示
filter:alpha(opacity=1);
}
.btn{
overflow: hidden;
}
.btn span{
width:55px;
height:55px;
position: absolute;
top:50%;
margin-top: -28px;
}
.btn .left{
background: url('image/btnL.png');
left:0;
}
.btn .right{
background: url('image/btnR.png');
right:0;
}
.circle ul{
position: absolute;
bottom:10px;
right:0;
}
.circle ul li{
float: left;
list-style: none;
width:20px;
height:20px;
border-radius: 50%;
background: orange;
margin-right: 10px;
}
.circle ul li.current{
background:red;
}
</style>
<body>
<div class="box" id="box">
<div class="m_unit" id='m_unit'>
<ul id='imgUl'>
<li class='current'><a href="javascript:;"></a><img src='image/0.jpg'></li>
<li><a href="javascript:;"></a><img src='image/1.jpg'></li>
<li><a href="javascript:;"></a><img src='image/2.jpg'></li>
<li><a href="javascript:;"></a><img src='image/3.jpg'></li>
<li><a href="javascript:;"></a><img src='image/4.jpg'></li>
</ul>
</div>
<div class="btn">
<span class='left' id='leftBtn'></span>
<span class='right' id='rightBtn'></span>
</div>
<div class='circle' id='circle'>
<ul>
<li class='current'></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script src='../js/animate-3.0.js'></script>
<script>
var box = document.getElementById('box'); //获得元素
var m_unit = document.getElementById('m_unit');
var imgUl = document.getElementById('imgUl');
var imgLis = imgUl.getElementsByTagName('li');
var rightBtn = document.getElementById('rightBtn');
var leftBtn = document.getElementById('leftBtn');
var imgLength = imgLis.length;
var circle = document.getElementById('circle');
var circleLis = circle.getElementsByTagName('li');
var timer = setInterval(function (){
rightHandler();
}, 2000);
box.onmouseover = function (){
clearInterval(timer);
}
box.onmouseout = function (){
timer = setInterval(function (){
rightHandler();
}, 2000);
}
var idx = 0; //定义信号量
rightBtn.onclick = rightHandler;
function rightHandler(){
if(m_unit.isanimated) return;
animate(imgLis[idx],{'opacity':0},1000); //当前的图片淡出box 透明度为0
idx++; //信号量++
if(idx == imgLength){
idx = 0;
}
animate(imgLis[idx],{'opacity':1},1000); //让加之后的idx对应的图片慢慢淡入
changeCircle();
}
leftBtn.onclick = function (){
if(m_unit.isanimated) return;
animate(imgLis[idx],{'opacity':0},1000);
idx--;
if(idx < 0){ //先判断，如果idx小于0 让idx等于最后一张图片的下标
idx = imgLength-1;
}
animate(imgLis[idx],{'opacity':1},1000);
changeCircle();
}
for(var i =0; i < circleLis.length; i++){
circleLis[i].idxx = i;
circleLis[i].onclick = function (){
if(m_unit.isanimated) return;
if(idx == this.idxx){ //如果idx等于当前点击的这张图片的小标，证明是同一张图片 return出去，不用改变
return;
}
animate(imgLis[idx],{'opacity':0},1000); //当前idx对应的图片淡出
idx = this.idxx; //idx值等于当前点的这张图片的下标
animate(imgLis[idx],{'opacity':1},1000); //当前idx对应的图片淡入
changeCircle();
}
}
function changeCircle(){
var n = idx;
if(n == circleLis.length) n=0;
for(var i = 0;i<circleLis.length;i++){
circleLis[i].className = '';
}
circleLis[n].className = 'current';
}
// </script>
</body>
</html>三、间歇轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width:500px;
height:200px;
border:1px solid gray;
margin: 100px auto;
position: relative;
overflow: hidden;
}
ul{
position: absolute;
left:0;
top:0;
}
li{
width: 500px;
height:50px;
line-height: 50px;
list-style: none;
}
</style>
<body>
<div class="box" id='box'>
<ul id = 'boxUl'>
<li>红红在摇头</li>
<li>黄黄跟着摇头</li>
<li>粉粉一直摇头</li>
<li>蓝蓝看着红红</li>
<li>青青不知所措</li>
<li>橙橙也在摇头</li>
<li>紫紫疯了</li>
</ul>
</div>
<script src='../js/animate-3.0.js'></script>
<script>
var box = document.getElementById('box'); //获得元素
var boxUl = document.getElementById('boxUl');
var boxLis = document.getElementsByTagName('li');
boxUl.innerHTML += boxUl.innerHTML; //拼接boxul里面的内容 复制一遍 内容翻倍
lisLength = boxLis.length;
var idx = 0; //定义信号量
setInterval(function (){ //定时器 自动轮播
idx++; //idx++
animate(boxUl,{'top':-50*idx},1000,function(){ //改变boxUl的top值 移动boxUl 进而显示不同的li
if(idx == lisLength/2){ // 回调函数 如果idx等于li数组的长度的一半 或者也可以在拼接假li之前
idx = 0; 获得数组长度 这里可以直接等于数组长度 不用除2
boxUl.style.top = 0; //迅速将imgUl的值等于0 拉回原点
}
});
}, 2000)
</script>
</body>
</html>四、三位置轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding:0;
}
.box{
height: 300px;
width:560px;
border:1px solid pink;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.m_unit ul{
overflow: hidden;
}
.m_unit ul li{
position: absolute; //全部定位在box盒子的右边
left:560px;
top:0;
list-style: none;
}
.m_unit ul li.current{ //类名current对应的li定位在盒子中 left为0
left:0;
}
.btn{
overflow: hidden;
}
.btn span{
width:55px;
height:55px;
position: absolute;
top:50%;
margin-top: -28px;
}
.btn .left{
background: url('image/btnL.png');
left:0;
}
.btn .right{
background: url('image/btnR.png');
right:0;
}
.circle ul{
position: absolute;
bottom:10px;
right:0;
}
.circle ul li{
float: left;
list-style: none;
width:20px;
height:20px;
border-radius: 50%;
background: orange;
margin-right: 10px;
}
.circle ul li.current{
background:red;
}
</style>
<body>
<div class="box" id="box">
<div class="m_unit" id='m_unit'>
<ul id='imgUl'>
<li class='current'><a href="javascript:;"></a><img src='image/0.jpg'></li>
<li><a href="javascript:;"></a><img src='image/1.jpg'></li>
<li><a href="javascript:;"></a><img src='image/2.jpg'></li>
<li><a href="javascript:;"></a><img src='image/3.jpg'></li>
<li><a href="javascript:;"></a><img src='image/4.jpg'></li>
</ul>
</div>
<div class="btn">
<span class='left' id='leftBtn'></span>
<span class='right' id='rightBtn'></span>
</div>
<div class='circle' id='circle'>
<ul>
<li class='current'></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script src='../js/animate-3.0.js'></script>
<script>
var box = document.getElementById('box'); //获得元素
var m_unit = document.getElementById('m_unit');
var imgUl = document.getElementById('imgUl');
var imgLis = imgUl.getElementsByTagName('li');
var rightBtn = document.getElementById('rightBtn');
var leftBtn = document.getElementById('leftBtn');
var imgLength = imgLis.length;
var circle = document.getElementById('circle');
var circleLis = circle.getElementsByTagName('li');
var timer = setInterval(function (){ //自动轮播
rightHandler();
}, 2000);
box.onmouseover = function (){
clearInterval(timer);
}
box.onmouseout = function (){
timer = setInterval(function (){
rightHandler();
}, 2000);
}
var idx = 0;
rightBtn.onclick = rightHandler;
function rightHandler(){
if(m_unit.isanimated) return;
animate(imgLis[idx],{'left':-560},1000); //当前idx对应的图片li移动到box盒子的左边
idx++;
if(idx > imgLength-1){ //循环
idx = 0;
}
imgLis[idx].style.left = 560+'px'; //瞬间把下一张图片移动到box右边的位置
animate(imgLis[idx],{'left':0},1000); //动画 把右侧的图片移动到box中间
changeCircle();
}
leftBtn.onclick = function (){
if(m_unit.isanimated) return;
animate(imgLis[idx],{'left':560}, 1000); //把当前idx对应的图片li移动到box右边的位置
idx--;
if(idx < 0){
idx = imgLength - 1;
}
imgLis[idx].style.left = -560 + 'px'; //瞬间把下一张图片移动到box左边的位置
animate(imgLis[idx],{'left':0}, 1000); //动画 把左侧的图片移动到box中间
changeCircle();
}
for(var i =0; i < circleLis.length; i++){
circleLis[i].idxx = i;
circleLis[i].onclick = function (){
if(m_unit.isanimated) return;
if(idx > this.idxx){ //如果当前idx大于点击的idx 说明图片应该从左边往右
imgLis[this.idxx].style.left = -560 + 'px'; //设置当前点击的图片在box左边
animate(imgLis[this.idxx],{'left':0},1000); //动画 从左到右的效果
animate(imgLis[idx],{'left':560},1000); //动画 当前的图片缓慢移动到box右侧
}else{
if(m_unit.isanimated) return;
if(idx < this.idxx){ //与上面相反 同理可得
imgLis[this.idxx].style.left = 560 + 'px';
animate(imgLis[this.idxx],{'left':0},1000);
animate(imgLis[idx],{'left':-560}, 1000)
}
}
idx = this.idxx; //把idxx赋值给idx 调用改变小圆点事件
changeCircle();
}
}
function changeCircle(){
for(var i = 0;i<circleLis.length;i++){
circleLis[i].className = '';
}
circleLis[idx].className = 'current';
}
</script>
</body>
</html>
扫一扫
8932
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
