html部分
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="wy-css.css"/>
<script src="animate.js"></script>
<script src="wy-js.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="#"><img src="images/wy1.jpg" alt=""/></a></div>
<div class="slider-main-img"><a href="#"><img src="images/wy2.jpg" alt=""/></a></div>
<div class="slider-main-img"><a href="#"><img src="images/wy3.jpg" alt=""/></a></div>
<div class="slider-main-img"><a href="#"><img src="images/wy4.jpg" alt=""/></a></div>
<div class="slider-main-img"><a href="#"><img src="images/wy5.jpg" alt=""/></a></div>
<div class="slider-main-img"><a href="#"><img src="images/wy6.jpg" alt=""/></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>
wy-css.css部分
*{
margin: 0;
padding: 0;
}
img{
vertical-align: top;
}
.w-slider{
width: 310px;
height: 265px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.slider{
width: 310px;
height: 220px;
}
.slider-main{
width: 620px;
height: 220px;
}
.slider-main-img{
position: absolute;
top: 0;
left: 0;
}
.slider-ctrl{
text-align: center;
padding-top: 5px;
}
.slider-ctrl-con{
width: 24px;
height: 20px;
display: inline-block;
background:url("images/w-icon.png") no-repeat -24px -782px;
margin: 0 5px;
cursor: pointer;
text-indent: -20em;
overflow: hidden;
}
.current{
background-position: -24px -762px;
}
.slider-ctrl-prev,.slider-ctrl-next{
width: 30px;
height: 35px;
background: url("images/w-icon.png") no-repeat 6px top;
position: absolute;
top: 50%;
margin-top: -35px;
opacity: 0.7;
}
.slider-ctrl-prev{
left: 0;
}
.slider-ctrl-next{
right: 0;
background-position: -6px -44px;
}
wy-js.js部分
/**
* Created by Administrator on 2016-10-22.
*/
window.onload = function () {
//获取元素
function $(id){return document.getElementById(id)}
var js_slider = $("js_slider"); //获取大盒子
var slider_main_block = $("slider_main_block"); //获取图片的父亲
var imgs = slider_main_block.children; //获取图片
var slider_ctrl = $("slider_ctrl"); //获得控制的父盒子
//操作元素
//生成小span
for(var i=0;i<imgs.length;i++){
var span = document.createElement("span"); //创建span
span.className = "slider-ctrl-con"; //添加类名
span.innerHTML = imgs.length - i ; //实现倒叙的方式插入数字
slider_ctrl.insertBefore(span,slider_ctrl.children[1]);//在父亲 倒数第二个盒子的前面插入
}
var spans = slider_ctrl.children; //得到所有的span
spans[1].setAttribute("class","slider-ctrl-con current"); //两个类名
var scrollWidth = js_slider.clientWidth;//得到大盒子的宽度 ,即后面动画每次走的距离
//刚开始第一张图片留下,其余的图片放到右边
for(var i=1;i<imgs.length;i++){ //从1开始
imgs[i].style.left = scrollWidth + "px";
}
//遍历3个按钮
var iNow = 0;//控制播放第几张
for(var k in spans){ //k是索引号
spans[k].onclick = function () {
if(this.className == "slider-ctrl-prev"){ //判断当前点击是按钮是否是左侧按钮
// alert("点击了左侧按钮");
//当我们点击左侧的时候,当前这张图片 先慢慢的走到右边,上一张 一定先快速回到左侧,-310位置,然后慢慢走到舞台中
animate(imgs[iNow],{left:scrollWidth});
--iNow < 0 ? iNow = imgs.length-1 : iNow;
imgs[iNow].style.left = -scrollWidth + "px";//立马执行,快速回到右侧
animate(imgs[iNow],{left:0}); //下一张走到0的位置,慢慢走过来
setSquare();
}else if(this.className == "slider-ctrl-next"){ //右侧按钮开始
autoplay();
}else{
// alert("点击了span下按钮");
// 我们首先要知道我们点击的是第几章图片,获得当前的索引号
var that = this.innerHTML - 1; //innerTHML是字符型,-1之后变成数字型。+1不行
if(that > iNow){
//做法和右侧按钮相同
animate(imgs[iNow],{left:-scrollWidth}); // 当前这张慢慢走出去
imgs[that].style.left = scrollWidth + "px"; // 点击的那个索引号 快速走到右侧310
}else if(that < iNow){
//做法和左侧按钮相同
animate(imgs[iNow],{left:scrollWidth});
imgs[that].style.left = -scrollWidth + "px";
}
iNow = that ; // 给当前索引号
animate(imgs[iNow],{left:0});
setSquare();
}
}
}
//一个控制播放span的函数
function setSquare(){
// 清除所有的span current ,留下当前那个
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,2000);
function autoplay(){
//当我们点击的时候,当前这张图片 先慢慢的走到左边,下一张 一定先快速回到右侧,310位置,然后慢慢走到舞台中
animate(imgs[iNow],{left:-scrollWidth});
++iNow > imgs.length-1 ? iNow =0 :iNow;
imgs[iNow].style.left = scrollWidth + "px";//立马执行,快速回到右侧
animate(imgs[iNow],{left:0}); //下一张走到0的位置,慢慢走过来
setSquare();
}
//鼠标经过清除定时器
js_slider.onmouseover = function () {
clearInterval(timer);
}
js_slider.onmouseout = function () {
clearInterval(timer);
timer = setInterval(autoplay,2000);
}
}
animate.js部分
//多属性运动框架
function animate(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = true; //用来判断是否停止定时器 一定要写在遍历外面
for(var attr in json){
var current = 0;
if(attr == "opacity"){
current =parseInt(getStyle(obj,attr)*100);
}else{
current =parseInt(getStyle(obj,attr));
}
//var current =parseInt(getStyle(obj,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 = json[attr];
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]){ //只要目标与json中任意一个值不等 就不能停止定时器 这个一定写在定时器里面
flag = false;
}
}
if(flag){
clearInterval(obj.timer);
if(fn){fn();}
}
},30);
}
function getStyle(obj,attr){ //获取属性值
if(obj.currentStyle){ //i3
return obj.currentStyle[attr];
}else{
return window.getComputedStyle(obj,null)[attr]; //w3c
}
}