html部分
<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>网易轮播图js部分</title>
???<link rel="stylesheet" href="css/css.css">
???<script src="js/slider.js"></script>
???<script src="js/animate.js"></script>
</head>
<body>
<div class="w-slider" id="js_slider"><!--js只支持下划线-->
???<div class="slider">
???????<div class="slider-main" id="slider_main_block">
???????????<div class="slider-main-img"><a href="#"><img src="images/1.jpg" ></a></div>
???????????<div class="slider-main-img"><a href="#"><img src="images/2.jpg" ></a></div>
???????????<div class="slider-main-img"><a href="#"><img src="images/3.jpg" ></a></div>
???????????<div class="slider-main-img"><a href="#"><img src="images/4.jpg" ></a></div>
???????????<div class="slider-main-img"><a href="#"><img src="images/5.jpg" ></a></div>
???????????<div class="slider-main-img"><a href="#"><img src="images/6.jpg" ></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部分
@charset "UTF-8";
*{
???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/icon.png) no-repeat -24px -782px;
???/*精灵图实现 调整像素 */
???margin:0 5px;
???cursor: pointer;
???/*将1 2 3 4 5 6的数字隐藏*/
???text-indent: -20em; /*text-indent 属性规定文本块中首行文本的缩进。*/
???overflow: hidden;
}
.current{
???background-position: -24px -762px;
}
.slider-ctrl-prev,
.slider-ctrl-next{
???position: absolute;
???top:50%;
???margin-top:-35px;
???background-color: blue;
???background: url(../images/icon.png) no-repeat 6px top;
???width: 30px;
???height: 35px;
}
.slider-ctrl-prev{
???left:0;
???cursor: pointer;
}
.slider-ctrl-next{
???right: 0;
???background-position: -6px -44px;
???cursor: pointer;
}
JS部分
slider.js
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.className = "slider-ctrl-con";
???????span.innerHTML = imgs.length - i;//由于span小方块是倒着插入，所以索引号也要是6 5 4 3 2 1
???????slider_ctrl.insertBefore(span, slider_ctrl.children[1]);
???????//insertBefore在参照的元素之前插入
???}
???var spans = slider_ctrl.children; ?//得到所有的 span
???spans[1].setAttribute("class", "slider-ctrl-con current");
???//setAttribute() 方法添加指定的属性，并为其赋指定的值。这里制定类名，给它添加current类
???var scrollWidth = js_slider.clientWidth; ?//得到大盒子的宽度 ?也就是后面后面动画走的距离
???//刚开始 ?第一张图片在框里 ?其余的图片框右边
???for (var i = 1; i < imgs.length; i++) ?//图片从第二张开始排在框右边
???{
???????imgs[i].style.left = scrollWidth + "px";
???}
???//遍历三个按钮
???// span是8个按钮 ?两个箭头 ?六个小方块
???var iNow=0; ?//控制播放张数
???for(var k in spans) ?//k在数组里是索引号 ?span[0]--第一个span
???{
???????spans[k].onclick = function () {
???????????//点击span里的哪一个就输出对应的值 ?两个箭头符号值为空
???????????if (this.className == "slider-ctrl-prev") {
???????????????// alert("你点击的是左侧按钮")
???????????????animate(imgs[iNow], {left: scrollWidth});
???????????????--iNow < 0 ? iNow = imgs.length - 1 : iNow;
???????????????imgs[iNow].style.left = -scrollWidth + "px";
???????????????animate(imgs[iNow], {left: 0});
???????????????setSquare();
???????????} else if (this.className == "slider-ctrl-next") {
???????????????// alert("你点击的是右侧按钮");
???????????????animate(imgs[iNow], {left: -scrollWidth});
???????????????//当前的那个图片 慢慢的走到 -scrollWidth位置
???????????????++iNow > imgs.length - 1 ? iNow = 0 : iNow;
???????????????// iNow++; ??//当前图片加1 ?先++
???????????????// if(iNow>imgs.length-1) ??//后判断
???????????????// {
???????????????// ????iNow=0;
???????????????// }
???????????????imgs[iNow].style.left = scrollWidth + "px"; ?//下一张快速运动到右边310px的位子
???????????????animate(imgs[iNow], {left: 0}); ?//下一张图片走到0的位置（框里）
???????????????setSquare();
???????????}
???????????else {
???????????????// alert(this.innerHTML);//下面的小span点击
???????????????//首先要知道点击的是第几张--当前的索引号
???????????????var that = this.innerHTML - 1; ?//that对应每张图片的索引号
???????????????if (that > iNow)
???????????????{
???????????????????//同右侧点击一样
???????????????????animate(imgs[iNow], {left: -scrollWidth});
???????????????????imgs[that].style.left = scrollWidth + "px";
???????????????}
???????????????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++){ ??// ?8个span ??我们要 1-6 ?不要 7 ?索引号
???????????spans[i].className = "slider-ctrl-con";
???????}
???????spans[iNow+1].className = "slider-ctrl-con current"; ?// 记住 + 1
???}
???//定时器开始 ?右侧按钮
???var timer=null;
???timer = setInterval(autoplay,2000); ?// 开启定时器
???function autoplay() {
???????// ?当我们点击时候， 当前的这张图片 先慢慢的走到左边 ?下一张 一定先快速走到右侧 （310）的位置，然后慢慢的走到舞台中
???????// alert("您点击了右侧按钮");
???????//iNow == 0
???????animate(imgs[iNow],{left: -scrollWidth});
???????// 当前的那个图片 慢慢的走到 -scrollWidth 位置
???????// 变成1 ??先 ++ ??++iNow ?先自加 ?后 运算
???????++iNow > imgs.length -1 ? ?iNow = 0 : iNow;
???????imgs[iNow].style.left = scrollWidth + "px"; ?// 立马执行 ?快速走到右侧
???????animate(imgs[iNow],{left: 0}); // 下一张走的 0 的位置 ?慢慢走过来
???????setSquare(); ?// 调用square
???}
???//鼠标经过清除定时器
???js_slider.onmouseover = function() {
???????clearInterval(timer);
???}
???js_slider.onmouseout = function() {
???????clearInterval(timer); ?// 要执行定时器 先清除定时器
???????timer = setInterval(autoplay,2000); ?// 开启定时器
???}
}
animate.js
/**
* Created by andy on 2015/11/23.
*/
// 多个属性运动框架 ?添加回调函数
function animate(obj,json,fn) { ?// 给谁 ???json
???clearInterval(obj.timer);
???obj.timer = setInterval(function() {
???????var flag = true; ?// 用来判断是否停止定时器 ??一定写到遍历的外面
???????for(var attr in json){ ??// attr ?属性 ????json[attr] ?值
???????????//开始遍历 json
???????????// 计算步长 ???用 target 位置 减去当前的位置 ?除以 10
???????????// console.log(attr);
???????????var current = 0;
???????????if(attr == "opacity")
???????????{
???????????????current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0;
???????????????console.log(current);
???????????}
???????????else
???????????{
???????????????current = parseInt(getStyle(obj,attr)); // 数值
???????????}
???????????// console.log(current);
???????????// 目标位置就是 ?属性值
???????????var step = ( json[attr] - current) / 10; ?// 步长 ?用目标位置 - 现在的位置 / 10
???????????step = step > 0 ? Math.ceil(step) : Math.floor(step);
???????????//判断透明度
???????????if(attr == "opacity") ?// 判断用户有没有输入 opacity
???????????{
???????????????if("opacity" in obj.style) ?// 判断 我们浏览器是否支持opacity
???????????????{
???????????????????// obj.style.opacity
???????????????????obj.style.opacity = (current + step) /100;
???????????????}
???????????????else
???????????????{ ?// obj.style.filter = alpha(opacity = 30)
???????????????????obj.style.filter = "alpha(opacity = "+(current + step)* 10+")";
???????????????}
???????????}
???????????else if(attr == "zIndex")
???????????{
???????????????obj.style.zIndex = json[attr];
???????????}
???????????else
???????????{
???????????????obj.style[attr] = current ?+ step + "px" ;
???????????}
???????????if(current != json[attr]) ?// 只要其中一个不满足条件 就不应该停止定时器 ?这句一定遍历里面
???????????{
???????????????flag = ?false;
???????????}
???????}
???????if(flag) ?// 用于判断定时器的条件
???????{
???????????clearInterval(obj.timer);
???????????//alert("ok了");
???????????if(fn) ??// 很简单 ??当定时器停止了。 动画就结束了 ?如果有回调，就应该执行回调
???????????{
???????????????fn(); // 函数名 + ?（） ?调用函数 ?执行函数
???????????}
???????}
???},10)
}
function getStyle(obj,attr) { ?// ?谁的 ?????那个属性
???if(obj.currentStyle) ?// ie 等
???{
???????return obj.currentStyle[attr]; ?// 返回传递过来的某个属性
???}
???else
???{
???????return window.getComputedStyle(obj,null)[attr]; ?// w3c 浏览器
???}
}
仿网页轮播图
原文地址：https://www.cnblogs.com/Daisy0331/p/8970810.html