14_JS轮播图案例
2017-09-10 本文已影响0人
对方不想理你并向你抛出一个异常
仿网易轮播图
- 初始状态，第一张图片在盒子中间，其他图片在右边
imgs[i].style.left = 盒子宽度+"px"; - 图片在盒子左边：
img.style.left = - 盒子宽度+"px"，图片在盒子中间：img.style.left = 0;，图片在盒子右边：img.style.left = 盒子宽度+"px";
- 当点击下一张按钮，当前盒子中间图片的缓慢移动（带动画）到盒子左边，下一张图片快速移动（不带动画）到盒子右边，然后再让这下一张图片缓慢移动（带动画）到盒子中间。
- 当点击上一张按钮，当前盒子中间图片的缓慢移动（带动画）到盒子右边，下一张图片快速移动（不带动画）到盒子左边，然后再让这下一张图片缓慢移动（带动画）到盒子中间。
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/basic.css"/>
<script type="text/javascript" src="js/animate.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
</head>
<body>
<div class="w-slider" id="js_slider">
<div class="slider">
<div class="slider-main" id="slider_main_block">
<div class="slider-main-img"><a href="#"></a></div>
<div class="slider-main-img"><a href="#"></a></div>
<div class="slider-main-img"><a href="#"></a></div>
<div class="slider-main-img"><a href="#"></a></div>
<div class="slider-main-img"><a href="#"></a></div>
<div class="slider-main-img"><a href="#"></a></div>
</div>
</div>
<div class="slider-ctrl" id="slider_ctrl">
<span class="slider-ctrl-prev"></span>
<span class="slider-ctrl-next"></span>
</div>
</div>
</body>
</html>
css/basic.css
@charset "UTF-8";
*{
margin: 0;
padding: 0;
}
img{
display: block;
}
.w-slider{
width: 310px;
height: 265px;
margin: 100px auto;
background-color: pink;
position: relative;
overflow: hidden;
}
.slider{
width: 310px;
height: 220px;
/*background-color: purple;*/
}
.slider-main{
width: 200%;
height: 100%;
/*background: purple;*/
}
.slider-main-img{
position: absolute;
left: 0;
top: 0;
}
.slider-ctrl{
text-align: center;
padding-top: 5px;
}
.slider-ctrl-con{
display: inline-block;
width: 24px;
height: 20px;
background: url("../images/icon.png") no-repeat -24px -782px;
margin: 0 5px;
cursor: pointer;
text-indent: -99em;
overflow: hidden;
}
.current{
background-position: -24px -762px;
}
.slider-ctrl-prev,
.slider-ctrl-next{
position: absolute;
top: 50%;
width: 30px;
height: 35px;
/*background-color: blue;*/
margin-top: -42px;
background: url("../images/icon.png") no-repeat;
cursor: pointer;
}
.slider-ctrl-prev{
left: 0;
background-position: 6px 0;
}
.slider-ctrl-next{
right: 0;
background-position: -6px -45px;
}
js/animate.js
/**
* Created by huhch on 2017/6/13.
*/
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return window.getComputedStyle(obj,null)[attr];
}
}
function $(id){return document.getElementById(id);}
function animate(obj , json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function () {
/*
关闭定时器的思路，不用判断多个属性都到达target,
只要判断有一个属性未到target，定时器就不能停止
*/
//用户判断是否可以关闭定时器
var flag = true;
//开始遍历
for(var attr in json){
//当前位置
var current;
if(attr == "opacity"){
if("opacity" in obj.style){
current = parseInt(getStyle(obj,attr)*100);
}else{//IE6、7、8
var alphaStr = getStyle(obj,"filter");
var cs = alphaStr.substring(alphaStr.lastIndexOf("=")+1 , alphaStr.lastIndexOf(")"));
current = isNaN(parseInt(cs))?100:parseInt(cs);
}
}else{
current = parseInt(getStyle(obj,attr));
}
//计算步长
//target = json[attr]
var step = (json[attr] - current)/10;
step = step>0?Math.ceil(step):Math.floor(step);
if(attr == "opacity"){//判断用户是否要修改opacity属性
if("opacity" in obj.style){//判断浏览器是否支持opacity属性
obj.style.opacity = (current+step)/100;
}else{
obj.style.filter = "alpha(opacity="+(current+step)+")";
}
}else if(attr == "zIndex")
{
obj.style.zIndex = json[attr];
}else{
obj.style[attr] = current+step+"px";
}
if(current != json[attr]){
flag = false;
}
}
if(flag){//如果flag=true,说明多个属性都=target了
clearInterval(obj.timer);
//alert("动画完成");
if(fn) fn();
}
},20);
}
js/slider.js
/**
* Created by huhch on 2017/6/13.
*/
window.onload = function () {
var slider = $("js_slider");//最大的盒子
var slider_main = $("slider_main_block");//存放图片的盒子
var imgs = slider_main.children;//所有的图片
var slider_ctrl = $("slider_ctrl");//控制的盒子
//生成序列的span
for(var i = 0; i<imgs.length; i++){
var span = document.createElement("span");
span.className = "slider-ctrl-con";
span.innerHTML = imgs.length-i;
//console.log(slider_ctrl.children.length);
slider_ctrl.insertBefore(span,slider_ctrl.children[1]);
}
var spans = slider_ctrl.children;//得到所有的span
spans[1].setAttribute("class","slider-ctrl-con current");
//得到大盒子的宽度，也就是后面动画走的距离
var scrollWidth = imgs[0].clientWidth;
//第一张图片在盒子中，其他图片右移一个盒子宽度
for(var i = 1; i<imgs.length; i++){
imgs[i].style.left = scrollWidth+"px";
}
var iNow = 0;
for(var k in spans){
spans[k].onclick = function () {
if(this.className == "slider-ctrl-prev"){
//左侧
animate(imgs[iNow],{left:scrollWidth});
//iNow--;
//if(iNow<0){
// iNow = imgs.length-1;
//}
//iNow = --iNow<0?imgs.length-1:iNow;//这一句等同于上面注释的四行代码
--iNow<0?iNow=imgs.length-1:iNow;//等同于上面
imgs[iNow].style.left = -scrollWidth+"px";
animate(imgs[iNow],{left:0});
setSquece();
}else if(this.className == "slider-ctrl-next"){
/*
//当我们点击的时候，下一张图片快速（不带动画）移动到盒子右边，然后当前图片动画的向左移动盒子距离，下一张图片动画的移动到盒子中间
//右侧
animate(imgs[iNow],{left:-scrollWidth});
//iNow++;
//if(iNow>imgs.length-1){
// iNow = 0;
//}
iNow = (++iNow>imgs.length-1)?0:iNow;//这一句等同于上面注释的四行代码
imgs[iNow].style.left = scrollWidth+"px";
animate(imgs[iNow],{left:0});
setSquece();
*/
autoPlay();
}else{
//点击下方的按钮
var that = this.innerHTML -1;
if(that>iNow){
imgs[that].style.left = scrollWidth+"px";
animate(imgs[iNow],{left:-scrollWidth});
}else if(that<iNow){
imgs[that].style.left = -scrollWidth+"px";
animate(imgs[iNow],{left:scrollWidth});
}
iNow = that;
animate(imgs[iNow],{left:0});
setSquece();
}
}
}
//设置序列号
function setSquece(){
for(var i=1;i<spans.length-1 ;i++){//第一个和最后一个是上一张和下一张按钮
spans[i].className = "slider-ctrl-con";
}
spans[iNow+1].className = "slider-ctrl-con current";
}
//定时器开始轮播
var timer = null;
timer = setInterval(autoPlay,3000);
function autoPlay(){
animate(imgs[iNow],{left:-scrollWidth});
iNow = (++iNow>imgs.length-1)?0:iNow;
imgs[iNow].style.left = scrollWidth+"px";
animate(imgs[iNow],{left:0});
setSquece();
}
slider.onmouseout = function () {
clearInterval(timer);
timer = setInterval(autoPlay,3000);
}
slider.onmouseover = function () {
clearInterval(timer);
}
}
images下有1~6.jpg和icon.png
例：旋转木马
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋转木马</title>
<link rel="stylesheet" type="text/css" href="css/basic.css"/>
<script type="text/javascript" src="js/animate.js"></script>
<script type="text/javascript">
// 存储了每个图片的信息
var json = [
{ // 1
width:200,
top:0,
left:500,
opacity:10,
z:2
},
{ // 2
width:400,
top:20,
left:180,
opacity:30,
z:3
},
{ // 3
width:450,
top:40,
left:100,
opacity:50,
z:4
},
{ // 4
width:500,
top:60,
left:0,
opacity:70,
z:5
},
{ // 3
width:800,
top:100,
left:200,
opacity:100,
z:6
},{ // 4
width:500,
top:60,
left:700,
opacity:70,
z:5
},
{ // 3
width:450,
top:40,
left:650,
opacity:50,
z:4
},
{ // 2
width:400,
top:20,
left:620,
opacity:30,
z:3
}
];
window.onload = function () {
var slider = document.getElementById("slider");
var lis = slider.children[0].children;
var arrow = document.getElementById("arrow");
var as = arrow.getElementsByTagName("a");
slider.onmouseover = function () {
animate(arrow,{opacity:100});
};
slider.onmouseout = function () {
animate(arrow,{opacity:0});
};
// 函数节流
var jieliu = true;
as[0].onclick = function () {
if(jieliu == false){
change(false);
jieliu = true
}
};
as[1].onclick = function () {
if(jieliu == false){
change(true);
jieliu = true
}
}
change();
function change(flag){
//next按钮
if(flag){
//json数组第一个移出，放入最后一个
json.push(json.shift());
}else{
//json数组最后一个移出，放入第一个
json.unshift(json.pop());
}
for(var i=0;i<lis.length;i++){
animate(lis[i],{
width:json[i].width,
top:json[i].top,
left:json[i].left,
opacity:json[i].opacity,
zIndex:json[i].z
}, function () {
jieliu = false;
});
}
}
}
</script>
</head>
<body>
<div class="wrap">
<div class="slider" id="slider">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:;" class="prev"></a>
<a href="javascript:;" class="next"></a>
</div>
</div>
</div>
</body>
</html>
css/basic.css
*{
padding: 0;
margin: 0;
}
ul,li{
list-style: none;
}
.wrap{
width: 1200px;
margin: 0 auto;
}
.slider{
width: 100%;
height: 600px;
position: relative;
/*background-color: #ccc;*/
}
.slider li{
position: absolute;
left: 0;
top: 0;
/*width: 200px;*/
}
.slider img{
width: 100%;
}
.arrow{
position: absolute;
width: 100%;
opacity: 0;
z-index: 100;
left: 0;
top: 40%;
}
.prev ,
.next{
position: absolute;
width: 76px;
height: 112px;
top: 0;
z-index: 99;
}
.prev{
left: 0;
background: url(../images/prev.png) no-repeat;
}
.next{
right: 0;
background: url(../images/next.png) no-repeat;
}
js/animate.js
/**
* Created by huhch on 2017/6/13.
*/
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return window.getComputedStyle(obj,null)[attr];
}
}
function $(id){return document.getElementById(id);}
function animate(obj , json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function () {
/*
关闭定时器的思路，不用判断多个属性都到达target,
只要判断有一个属性未到target，定时器就不能停止
*/
//用户判断是否可以关闭定时器
var flag = true;
//开始遍历
for(var attr in json){
//当前位置
var current;
if(attr == "opacity"){
if("opacity" in obj.style){
current = parseInt(getStyle(obj,attr)*100);
}else{//IE6、7、8
var alphaStr = getStyle(obj,"filter");
var cs = alphaStr.substring(alphaStr.lastIndexOf("=")+1 , alphaStr.lastIndexOf(")"));
current = isNaN(parseInt(cs))?100:parseInt(cs);
}
} else{
current = parseInt(getStyle(obj,attr));
}
//计算步长
//target = json[attr]
var step = (json[attr] - current)/10;
step = step>0?Math.ceil(step):Math.floor(step);
if(attr == "opacity"){//判断用户是否要修改opacity属性
if("opacity" in obj.style){//判断浏览器是否支持opacity属性
obj.style.opacity = (current+step)/100;
}else{
obj.style.filter = "alpha(opacity="+(current+step)+")";
}
}else if(attr == "zIndex")
{
obj.style.zIndex = json[attr];
}else{
obj.style[attr] = current+step+"px";
}
if(current != json[attr]){
flag = false;
}
}
if(flag){//如果flag=true,说明多个属性都=target了
clearInterval(obj.timer);
//alert("动画完成");
if(fn) fn();
}
},20);
}
