<div class="banner" id="js_banner"> <!--整个轮播图框架-->
<div class="slider"> <!--图片框架-->
<div class="pic" id="js_pic">
<div class="pic-img"><a href="javascript:"></a></div>
<div class="pic-img"><a href="javascript:"></a></div>
<div class="pic-img"><a href="javascript:"></a></div>
<div class="pic-img"><a href="javascript:"></a></div>
<div class="pic-img"><a href="javascript:"></a></div>
</div>
<div class="btn" id="js_btn"> <!--按钮框架-->
<span class="left"></span>
<span class="right"></span>
</div>
</div>
</div>
css清单
*{
margin: 0;
padding: 0;
}
img{
vertical-align: top;
}
.banner{
width: 800px;
height: 345px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.slider{
width: 800px;
height: 300px;
}
.pic{
width: 1600px;
height: 300px;
}
.pic-img{
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 300px;
}
.pig-img img{
width: 100%;
}
.btn{
text-align: center;
padding-top: 5px;
}
.btn-icon{
width: 24px;
height: 20px;
display: inline-block;
background: url(../images/icon.png) no-repeat -24px -782px;
margin: 0 5px;
cursor: pointer;
text-indent: -20em;
overflow: hidden;
}
.bg-icon{
background-position: -24px -762px;
}
.left,.right{
width:39px;height:79px;
background:url(../images/left_right.png) no-repeat;
cursor:pointer;
position:absolute;
top: 36%;
opacity: 0;
}
.left{
left:0;
background-position:-17px -10px;
}
.right{
right:0;
background-position:-64px -10px;
}
function $(id){ // 获取 id
return document.getElementById(id);
}
// 屏幕到上和到右距离（兼容）
function scroll(){
if(window.pageXOffset != null){ // ie9 +
return {
left:window.pageXOffset,
top:window.pageYOffset
}
}else if(document.compatMode == "CSS1Compat"){ // 标准模式
return {
left:document.documentElement.scrollLeft,
top:document.documentElement.scrollTop
}
}else{ // 怪异模式
return {
left:document.body.scrollLeft,
top:document.body.scrollTop
}
}
}
// 屏幕宽高（兼容）
function client(){
if(window.innerWidth != null){ // ie9 +
return {
width:window.innerWidth,
height:window.innerHeight
}
}else if(document.compatMode == "CSS1Compat"){ // 标准模式
return {
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight
}
}else{ // 怪异模式
return {
width:document.body.clientWidth,
height:document.body.clientHeight
}
}
}
// 匀速动画 右走
function animate1(obj,speed,target){
obj.timer = setInterval(function(){
if(obj.offsetLeft>target){
clearInterval(obj.timer);
}else{
obj.style.left = obj.offsetLeft + speed + "px";
}
},50)
}
// 匀速动画可左可右
function animate2(obj,target){
clearInterval(obj.timer);
var speed = obj.offsetLeft - target < 0 ? 10 : -10;
obj.timer = setInterval(function(){
var run = target - obj.offsetLeft;
if(Math.abs(run)<=10){
clearInterval(obj.timer);
}else{
obj.style.left = obj.offsetLeft + speed +"px";
}
},30)
}
// 缓动向右动画
function animate3(obj,target){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = (target - obj.offsetLeft)/10;
console.log(speed);
speed = speed>0?Math.ceil(speed) :Math.floor(speed);
obj.style.left = obj.offsetLeft + speed +"px";
if(obj.offsetLeft == target){
clearInterval(obj.timer);
}
},50)
}
// 获取样式属性（兼容）
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return window.getComputedStyle(obj,null)[attr];
}
}
// 缓动动画 任何方向
function animate4(obj,attr,target){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var cus = parseInt(getStyle(obj,attr));
var speed = (target - cus) /10;
speed = speed >0 ? Math.ceil(speed) : Math.floor(speed);
if(cus == target){
clearInterval(obj.timer);
}else{
obj.style[attr] = cus + speed + "px";
}
},30)
}
// 缓动动画 传多个属性
function animate5(obj,json){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
for(var attr in json){
var cus = parseInt(getStyle(obj,attr));
var speed = (json[attr] - cus) /10;
speed = speed >0 ? Math.ceil(speed) : Math.floor(speed);
if(cus == json[attr]){
clearInterval(obj.timer);
}else{
obj.style[attr] = cus + speed + "px";
}
}
},30)
}
// 缓动动画 传多个属性 + 回调
function animate6(obj,json,fun){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = true;
for(var attr in json){
var leader = parseInt(getStyle(obj,attr));
var speed = (json[attr] - leader)/10;
speed = speed >0 ? Math.ceil(speed):Math.floor(speed);
obj.style[attr] = leader + speed + "px";
if(leader!=json[attr]){
flag = false;
}
}
if(flag){
clearInterval(obj.timer);
if(fun){
fun();
}
}
},20)
}
// 缓动动画 多个属性 + 回调 + 透明度 + zindex
function animate(obj,json,fun){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = true;
for(var attr in json){
var leader = 0;
if(attr == "opacity"){
leader = parseInt(getStyle(obj,attr)*100);
}else{
leader = parseInt(getStyle(obj,attr));
}
var speed = (json[attr] - leader)/10;
speed = speed>0 ? Math.ceil(speed):Math.floor(speed);
if(attr == "opacity"){
obj.style.opacity = (leader + speed)/100;
}else if(attr == "zIndex"){
obj.style.zIndex = json[attr];
}else{
obj.style[attr] = leader + speed + "px";
}
if(leader!=json[attr]){
flag = false;
}
}
if(flag){
clearInterval(obj.timer);
if(fun){
fun();
}
}
},20)
}
window.onload = function(){
function $(id){
return document.getElementById(id);
}
var banner = $("js_banner"); //获取最大盒子
var pic = $("js_pic"); //滚动图片的父亲
var imgs = pic.children; //获取所有需要滚动图片，存为一个组；
var btn = $("js_btn"); //获取按钮控制按钮的父盒子
for(var i=0;i<imgs.length;i++){ //循环创建小圆点
var span = document.createElement("span"); //创建小圆点
span.className = "btn-icon"; //给小圆点添加样式
span.innerHTML = imgs.length - i; //通过倒叙的方式插入
btn.insertBefore(span,btn.children[1]); //可以直接用app直接插入，这里只是用一个新方法
}
var spans = btn.children; //获取所有span
spans[1].setAttribute("class","btn-icon bg-icon") ; //给span设置样式，一个通用样式，一个蓝色样式
//点击左边按钮，实现轮播效果
//计算动画距离
var scrollWidth = banner.clientWidth; //得到大盒子的宽度，也就是后面动画走的距离
//console.log(scrollWidth);
for(var i = 1;i<imgs.length;i++){ // 把所有的图片丢到后面去搁着 从1开始，因为第0张（也就会第一张不计算）
imgs[i].style.left = scrollWidth + "px"; //把除了第一张以外的所有图片全都放到后面去
}
//点击按钮移动图片
var iNow = 0; //表示索引，用来控制播放张数
for(var key in spans){ // 循环遍历得到所有span，因为左右按钮也是span
spans[key].onclick = function(){
if(this.className == "left"){
animate(imgs[iNow],{left:scrollWidth});
--iNow<0 ? iNow = imgs.length - 1 : iNow; //当前图片索引减减，就是上一张图片
imgs[iNow].style.left = -scrollWidth + "px"; //让上一张图片出现在当前显示的左边，这样可以看起来是从左边出来的
animate(imgs[iNow],{left:0}); //让上一张图片从左边到屏幕中间，实现动画效果
setBtn();
}else if(this.className == "right"){
autoPlay();
}
}
}
//控制小圆点轮播的函数
//先清除所有小圆点，然后再给想要的小圆点添加样式
function setBtn(){
for(var i = 1;i<spans.length-1;i++){
//我们有六个小圆点，两个箭头按钮，都是span.但是我们只要六个小圆点就行了，所以第一个span和最后一个span不要
spans[i].className = "btn-icon"; //清除样式，保留基本样式
}
spans[iNow+1].className = "btn-icon bg-icon"; //给当前小圆点添加样式
}
function autoPlay(){
animate(imgs[iNow],{left:-scrollWidth}); //往左边走为负，右边则为正
++iNow>imgs.length-1 ? iNow = 0 : iNow; //当前图片索引减减，就是上一张图片
imgs[iNow].style.left = scrollWidth + "px"; //让上一张图片出现在当前显示的左边，这样可以看起来是从左边出来的
animate(imgs[iNow],{left:0}); //让上一张图片从左边到屏幕中间，实现动画效果
setBtn();
}
var timer = null;
timer = setInterval(autoPlay,3000);
banner.onmouseover = function(){
animate(btn.children[0],{opacity:100});
animate(btn.children[spans.length-1],{opacity:100});
clearInterval(timer);
};
banner.onmouseout = function(){
clearInterval(timer);
animate(btn.children[0],{opacity:0 });
animate(btn.children[spans.length-1],{opacity:0});
timer = setInterval(autoPlay,3000);
};
};
