原生js制作图片渐变轮播效果

我的 demo 原生js图片渐变轮播效果

HTML和CSS

基本结构:div#container 包住整个轮播图区域。内含:图片展示区、左右箭头控制、小圆点控制。

对container设置positio:relative给后代元素的绝对定位提供坐标参考。 左右箭头和小圆点采用绝对定位,展示图片绝对定位时所有图片重叠在container里,可以设置z-index切换图片。

我这里是控制图片的display属性block和none来切换轮播图。很多采用网站浮动图片到一行然后改变left值来控制图片切换,也是个很好的选择。

搞定html和css,就剩下javascript了。

写代码前思路整理

给所有图片按照在html里出现顺序排个序号。如 0,1,2,3,4,5

首先,除第一张外所有图片display:none。

箭头控制

点击右箭头时:眼前图片display为none,下一张display为block,这就完成了图片切换。 当眼前图片为最后一张时,点击下一张切换到第一张。

点击左箭头同理。

圆点控制

图片下面有相同个数的小圆点,小圆点和图片采用同一排序。点击对应序号的小圆点,眼前图片display为none,对应图片为block。

箭头关联圆点

点击箭头后显示图片的序号变化,对应序号的小圆点同时跟着变化。

渐变特效

上面的圆点和箭头控制图片超级简单。写特效花了很多时间。原生js里没有渐入淡出过度效果函数,自己写也不难。关键是结合起轮播图片的切换。

理想状态:点击next时,眼前图片A透明度opacity缓慢从1变为0的同时,下一张图片B的display立即变为block,透明度缓慢从0变为1。A的透明度接近0时display变为none。

代码

<script>  
var prev = document.getElementById("prev");  
var next = document.getElementById("next");  
//图片列表
var imglist = document.getElementById("imglist").getElementsByTagName("div");  
//小圆点
var dot = document.getElementById("slidot").getElementsByTagName("li");  
var n = imglist.length;  
//这个index是全局变量,眼前图片的顺序值
var index = 0;  
//布尔值,防止连续快速点击下一个造成卡顿
var fade = false;  
//设置透明度
var setOpacity = function(obj, opa) {  
  if (obj.filters) {
    obj.style.filter = "alpha(opacity:" + opa + ")"
  } else {
    obj.style.opacity = opa / 100
  }
}
//  渐入函数 ,为下一张(即将显示的)图片所用
var fadeIn = function(obj) {  
  fade = true;
  obj.style.display = "block";
  var opa = 0;
  var timer = setInterval(func, 1);//这里的数字可以控制速度
  function func() {
    if (opa < 100) {
      opa += 2;//改变这里数字可以控制速度
      setOpacity(obj, opa)
    } else {
      clearInterval(timer);
      fade = false
    }
  }
}
//淡出函数 为即将隐藏的眼前图片所用
var fadeOut = function(obj) {  
  fade = true;
  var opa = 100;
  var timer = setInterval(func, 1);
  function func() {
    if (opa > 0) {
      opa -= 1;
      setOpacity(obj, opa)
    } else {
      clearInterval(timer);
      obj.style.display = "none"
    }
  }
}
// 切换图片时小圆点跟着切换焦点
function lightdot() {  
  for (var i = 0; i < n; i++) {
    if (hasClass(dot[i], "on")) {
      rvClass(dot[i], "on");
      break
    }
  }
  addClass(dot[index], "on")
}
// 点击下一张切换
next.onclick = function() {  
  if (fade) {
    return
  } else {
    fadeOut(imglist[index]);
    index += 1;
    if (index == n) index = 0;
    fadeIn(imglist[index]) lightdot()
  }
}
//点击上一张切换
prev.onclick = function() {  
  if (fade) {
    return
  } else {
    fadeOut(imglist[index]);
    if (index == 0) index = n;
    index -= 1;
    fadeIn(imglist[index]);
    lightdot()
  }
}
//小圆点控制切换
for (var i = 0; i < n; i++) {  
  dot[i].order = i;
  dot[i].onclick = function() {
    fadeOut(imglist[index]);
    index = this.order;
    fadeIn(imglist[index]);
    lightdot()
  }
}
//自动播放启停
function play() {  
  auto = setInterval(function() {
    next.onclick()
  },
  3000)
}
function stop() {  
  clearInterval(auto)
}
play();  
container.onmouseover = stop;  
container.onmouseout = play  
} 
< /script>  

BUG修改和更新

20150526
在小圆点控制部分。 点击当前图片所在的小圆点,会使轮播图消失出现白板。

for (var i = 0; i < n; i++) {  
  dot[i].order = i;
  dot[i].onclick = function() {
// 添加控制
if(this.order==index){return}  
else{  
    fadeOut(imglist[index]);
    index = this.order;
    fadeIn(imglist[index]);
    lightdot()
  }}
}

20150612

JavaScript高级程序设计书中提到setTimeout和setInterval,能用setTimeout实现的就不用setInterval。对渐入淡出函数和自动运行函数做了修改。

var fadeIn=function(obj){  
  fade=true;
  obj.style.display="block";  
  var opa=0;
  (function func(){
    if(opa<100){opa+=10;setOpacity(obj,opa);setTimeout(func,20)}
    else{fade=false;}
  })();
}
var fadeOut=function(obj){  
  fade=true;
  var opa=100;
  (function func(){
    if(opa>0){opa-=10;setOpacity(obj,opa);setTimeout(func,30)}
    else{obj.style.display="none";}
  })();
}       

function play(){auto=setTimeout(function()next.onclick();play();},3000)};

function stop(){clearTimeout(auto)};