网页特效之轮播图2

最新推荐文章于 2021-12-24 20:37:07 发布

枫雨血痕

最新推荐文章于 2021-12-24 20:37:07 发布

阅读量312

点赞数 1

分类专栏： javascript 文章标签：轮播图 JavaScript 网页特效

本文链接：https://blog.csdn.net/lyxuefeng/article/details/82721716

版权

javascript 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

网页特效之轮播图是以包含所有图片的盒子移动达到轮播效果，而该案例中是以包含单张图片的容器移动达到轮播目的。
主要思路：开始时，第一张图片显示，其他图片用定位放置在显示右侧，然后使用定时器轮播时当前显示图片左移显示区域左侧，右侧的图片中的一张左移到显示区域。
第一步：静态布局
在这个大盒子box下，分slide(图片显示区)和slider-ctrl(各种点击按键)盒子。
然后在slide盒子下，给两倍显示区域的宽度(右侧用于存放其他图片),对于箭头，使用定位固定位。
具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <div class="box">
        <div class="slide" id="slide">
            <div class="slide-show">
                <div class="slide-img">
                    <img src="images/1.jpg" alt="picture">
                </div>
                <div class="slide-img">
                    <img src="images/2.jpg" alt="picture">
                </div>
                <div class="slide-img">
                    <img src="images/3.jpg" alt="picture">
                </div>
                <div class="slide-img">
                    <img src="images/4.jpg" alt="picture">
                </div>
                <div class="slide-img">
                    <img src="images/5.jpg" alt="picture">
                </div>
            </div>
        </div>
        <div class="slide-ctrl" id="slide_ctrl">
            <span class="slide-ctrl-prev"></span>
            <span class="slide-ctrl-icon current">1</span>
            <span class="slide-ctrl-icon">2</span>
            <span class="slide-ctrl-icon">3</span>
            <span class="slide-ctrl-icon">4</span>
            <span class="slide-ctrl-icon">5</span>
            <span class="slide-ctrl-next"></span>
        </div>
    </div>
</body>
</html>

index.css代码：

* {
    margin: 0;
    padding: 0;
}
.box {
    width: 300px;
    position: relative;
    margin: 100px auto;
}
.slide{
    width: 300px;
    height: 170px;
}
.slide-show {
    width: 600px;
    height: 170px;
    background: pink;/*用于显示该区域*/
}
.slide-img img{
    width: 300px;
    vertical-align: top;
}
.slide-img {
    position: absolute;
    top: 0;
    left: 0px;
}
.slide-ctrl {
    text-align: center;
    padding-top: 10px;
}
.slide-ctrl-icon {
    width: 24px;
    height: 20px;
    background: url(../images/icon.png) no-repeat -24px -782px;
    text-indent: -40px;
    margin: 0 5px;
    overflow: hidden;
    display: inline-block;
    cursor: pointer;
}
.slide-ctrl-prev,.slide-ctrl-next {
    position: absolute;
    top: 50%;
    width: 30px;
    height: 35px;
    background: url(../images/icon.png) no-repeat;
    margin-top: -30px;
    cursor: pointer;
}
.slide-ctrl-prev{
    background-position: 6px top;
    left: 10px;

}
.slide-ctrl-next{
    background-position: 0px -44px;
    right: 10px;
}
.current {
    background-position: -24px -762px;
}

第二步：左右箭头移动图片
注意：把slide-show盒子的背景移除
引入js文件

<script src="js/animate.js"></script>
<script src="js/index.js"></script>

文件具体内容：
index.js：

var slide = document.getElementById("slide");
var slideCtrl = document.getElementById("slide_ctrl");
var imgs = slide.children[0].children;//包含img的div
var spans = slideCtrl.children;//所有span

var scrollW = slide.clientWidth;//轮播图片框的宽度
//把除第一张的图片放在右侧
for(var i=1;i<imgs.length;i++){
  imgs[i].style.left = scrollW + "px";
}
//遍历底部按钮和左右箭头
var iNow = 0;//用于存放当前显示图片的索引值，默认开始为0
for(var k in spans){
  spans[k].onclick = function(){
    if(this.className == "slide-ctrl-next"){
      //右箭头
      animate(imgs[iNow],{left:-scrollW});//当前显示图片左移
      iNow++;
      console.log(iNow);
      animate(imgs[iNow],{left: 0});//右侧图片左移显示
    }else if(this.className == "slide-ctrl-prev"){
      animate(imgs[iNow],{left: scrollW});//当前显示图片右移
      iNow--;
      animate(imgs[iNow],{left: 0});//左侧图片右移显示
    }
  };
}

animate.js内容：

//动画函数
function animate(obj,json,fn){
    //第一个参数为动画对象，第二个为json格式的目标属性值，第三个为回调函数(可选)
    clearInterval(obj.timer);
    // console.log("obj.timer:",obj.timer);
    obj.timer = setInterval(function(){
        var flag = true;//判断定时器是否清除的开关
        //遍历json
        for(var attr in json){
            var current = 0;//用于存放当前属性
            if(attr == "opacity"){
                //透明度
                current = Math.round(parseInt(getStyle(obj,attr)*100))|| 0;//ie678没有opacity,会产生undefined,undefined || 0为0;防止在ie产生undefined+1-->NaN的结果
            }else{
                current = parseInt(getStyle(obj,attr));//得到当前属性并去除px
            }
            // console.log(json[attr]);
            //计算步长 （目标位置-当前位置)/10
            var step = (json[attr] - current)/10;
            step = step > 0 ? Math.ceil(step):Math.floor(step);
            //判断属性
            if(attr == "opacity"){
                if("opacity" in obj.style){
                    //w3c标准浏览器(支持opavity)
                    obj.style.opacity = (current + step)/100;
                }else{
                    //ie678
                    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){
            clearInterval(obj.timer);
            if(fn){
                fn();
            }
        }
    },10);
}
//得到样式
function getStyle(obj,attr){
    //参数：对象，属性
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return window.getComputedStyle(obj,null)[attr];
    }
}

第三步：衔接首尾图片切换
index.js改为：

var slide = document.getElementById("slide");
var slideCtrl = document.getElementById("slide_ctrl");
var imgs = slide.children[0].children;//包含img的div
var spans = slideCtrl.children;//所有span

var scrollW = slide.clientWidth;//轮播图片框的宽度
//把除第一张的图片放在右侧
for(var i=1;i<imgs.length;i++){
  imgs[i].style.left = scrollW + "px";
}
//遍历底部按钮和左右箭头
var iNow = 0;//用于存放当前显示图片的索引值，默认开始为0
for(var k in spans){
  spans[k].onclick = function(){
    if(this.className == "slide-ctrl-next"){
      //右箭头
      animate(imgs[iNow],{left:-scrollW});//当前显示图片左移
      iNow++;
      if(iNow > 4){//当索引值大于最后一张图片索引值
        iNow = 0;
      }
      imgs[iNow].style.left = scrollW + "px";//下一张图片放置在显示区域右侧
      animate(imgs[iNow],{left: 0});//下一张显示图片移动到显示区域
    }else if(this.className == "slide-ctrl-prev"){
      animate(imgs[iNow],{left: scrollW});//当前显示图片右移
      iNow--;
      if(iNow < 0){//当索引值小于第一张图片索引值
        iNow = imgs.length-1;
      }
      imgs[iNow].style.left = -scrollW + "px";
      animate(imgs[iNow],{left: 0});//左侧图片右移显示
    }
  };
}

第四步：实现点击底部小框按钮的图片切换
index.js改为：

var slide = document.getElementById("slide");
var slideCtrl = document.getElementById("slide_ctrl");
var imgs = slide.children[0].children;//包含img的div
var spans = slideCtrl.children;//所有span

var scrollW = slide.clientWidth;//轮播图片框的宽度
//把除第一张的图片放在右侧
for(var i=1;i<imgs.length;i++){
  imgs[i].style.left = scrollW + "px";
}
//遍历底部按钮和左右箭头
var iNow = 0;//用于存放当前显示图片的索引值，默认开始为0
for(var k in spans){
  spans[k].onclick = function(){
    if(this.className == "slide-ctrl-next"){
      //右箭头
      animate(imgs[iNow],{left:-scrollW});//当前显示图片左移
      iNow++;
      if(iNow > 4){//当索引值大于最后一张图片索引值
        iNow = 0;
      }
      imgs[iNow].style.left = scrollW + "px";//下一张图片放置在显示区域右侧
      animate(imgs[iNow],{left: 0});//下一张显示图片移动到显示区域
    }else if(this.className == "slide-ctrl-prev"){
      animate(imgs[iNow],{left: scrollW});//当前显示图片右移
      iNow--;
      if(iNow < 0){//当索引值小于第一张图片索引值
        iNow = imgs.length-1;
      }
      imgs[iNow].style.left = -scrollW + "px";
      animate(imgs[iNow],{left: 0});//左侧图片右移显示
    }else{
      //底部按钮
      var index = this.innerHTML-1;//底部按钮索引值
      if(index > iNow){
        //如果点击的底部按钮索引值大于显示图片索引值
        animate(imgs[iNow],{left:-scrollW});//当前显示图片左移
        imgs[index].style.left = scrollW + "px";//底部按钮对于图片放置在右侧
      }else if(index < iNow){//如果点击的底部按钮索引值小于显示图片索引值
        animate(imgs[iNow],{left:scrollW});//当前显示图片右移
        imgs[index].style.left = -scrollW + "px";//底部按钮对于图片放置在左侧
      }
      iNow = index;
      animate(imgs[iNow],{left: 0});//底部按钮对于图片移动到显示区域
    }
  };
}

第五步：底部按钮的对应背景切换
index.js改为：

var slide = document.getElementById("slide");
var slideCtrl = document.getElementById("slide_ctrl");
var imgs = slide.children[0].children;//包含img的div
var spans = slideCtrl.children;//所有span

var scrollW = slide.clientWidth;//轮播图片框的宽度
//把除第一张的图片放在右侧
for(var i=1;i<imgs.length;i++){
  imgs[i].style.left = scrollW + "px";
}
//遍历底部按钮和左右箭头
var iNow = 0;//用于存放当前显示图片的索引值，默认开始为0
for(var k in spans){
  spans[k].onclick = function(){
    if(this.className == "slide-ctrl-next"){
      //右箭头
      animate(imgs[iNow],{left:-scrollW});//当前显示图片左移
      iNow++;
      if(iNow > 4){//当索引值大于最后一张图片索引值
        iNow = 0;
      }
      imgs[iNow].style.left = scrollW + "px";//下一张图片放置在显示区域右侧
      setIcon();
      animate(imgs[iNow],{left: 0});//下一张显示图片移动到显示区域
    }else if(this.className == "slide-ctrl-prev"){
      animate(imgs[iNow],{left: scrollW});//当前显示图片右移
      iNow--;
      if(iNow < 0){//当索引值小于第一张图片索引值
        iNow = imgs.length-1;
      }
      imgs[iNow].style.left = -scrollW + "px";
      setIcon();
      animate(imgs[iNow],{left: 0});//左侧图片右移显示
    }else{
      //底部按钮
      var index = this.innerHTML-1;//底部按钮索引值
      if(index > iNow){
        //如果点击的底部按钮索引值大于显示图片索引值
        animate(imgs[iNow],{left:-scrollW});//当前显示图片左移
        imgs[index].style.left = scrollW + "px";//底部按钮对于图片放置在右侧
      }else if(index < iNow){//如果点击的底部按钮索引值小于显示图片索引值
        animate(imgs[iNow],{left:scrollW});//当前显示图片右移
        imgs[index].style.left = -scrollW + "px";//底部按钮对于图片放置在左侧
      }
      iNow = index;
      setIcon();
      animate(imgs[iNow],{left: 0});//底部按钮对于图片移动到显示区域
    }
  };
}
//底部按钮背景切换
function setIcon(){
  for(var i=1;i<spans.length-1;i++){
    spans[i].className = "slide-ctrl-icon";//所有底部按钮class为slide-ctrl-icon
  }
  spans[iNow+1].className = "slide-ctrl-icon current";//因为spans包含左右箭头，所有显示图片对应的底部按钮索引值为iNow+1
}

第六步：实现左右箭头的显示和隐藏
在index.js中添加：

box.onmouseenter = function(){
  prev.style.display = "block";
  next.style.display = "block";
};
box.onmouseleave = function(){
  prev.style.display = "none";
  next.style.display = "none";
};

第七步：自动轮播和停止轮播
注：自动轮播相当于点击一次右箭头
给box盒子添加css属性：overflow:hidden;
index.js最终改为：

var box = document.getElementById("box");
var slide = document.getElementById("slide");
var slideCtrl = document.getElementById("slide_ctrl");
var imgs = slide.children[0].children;//包含img的div
var spans = slideCtrl.children;//所有span
var prev = spans[0];//左箭头
var next = spans[spans.length-1];//右箭头

var scrollW = slide.clientWidth;//轮播图片框的宽度
//把除第一张的图片放在右侧
for(var i=1;i<imgs.length;i++){
  imgs[i].style.left = scrollW + "px";
}
//遍历底部按钮和左右箭头
var iNow = 0;//用于存放当前显示图片的索引值，默认开始为0
for(var k in spans){
  spans[k].onclick = function(){
    if(this.className == "slide-ctrl-next"){
      //右箭头
      autoPlay();
    }else if(this.className == "slide-ctrl-prev"){
      animate(imgs[iNow],{left: scrollW});//当前显示图片右移
      iNow--;
      if(iNow < 0){//当索引值小于第一张图片索引值
        iNow = imgs.length-1;
      }
      imgs[iNow].style.left = -scrollW + "px";
      setIcon();
      animate(imgs[iNow],{left: 0});//左侧图片右移显示
    }else{
      //底部按钮
      var index = this.innerHTML-1;//底部按钮索引值
      if(index > iNow){
        //如果点击的底部按钮索引值大于显示图片索引值
        animate(imgs[iNow],{left:-scrollW});//当前显示图片左移
        imgs[index].style.left = scrollW + "px";//底部按钮对于图片放置在右侧
      }else if(index < iNow){//如果点击的底部按钮索引值小于显示图片索引值
        animate(imgs[iNow],{left:scrollW});//当前显示图片右移
        imgs[index].style.left = -scrollW + "px";//底部按钮对于图片放置在左侧
      }
      iNow = index;
      setIcon();
      animate(imgs[iNow],{left: 0});//底部按钮对于图片移动到显示区域
    }
  };
}
//底部按钮背景切换
function setIcon(){
  for(var i=1;i<spans.length-1;i++){
    spans[i].className = "slide-ctrl-icon";//所有底部按钮class为slide-ctrl-icon
  }
  spans[iNow+1].className = "slide-ctrl-icon current";//因为spans包含左右箭头，所有显示图片对应的底部按钮索引值为iNow+1
}
//左右箭头显示和隐藏
box.onmouseenter = function(){
  prev.style.display = "block";
  next.style.display = "block";
  stop();//停止轮播
};
box.onmouseleave = function(){
  prev.style.display = "none";
  next.style.display = "none";
  timer = setInterval(function(){
    autoPlay();
  },3000);//继续轮播
};

//自动轮播
var timer = null;//用于保存定时器名称
timer = setInterval(function(){
  autoPlay();
},3000);
function autoPlay(){
  animate(imgs[iNow],{left:-scrollW});//当前显示图片左移
  iNow++;
  if(iNow > 4){//当索引值大于最后一张图片索引值
    iNow = 0;
  }
  imgs[iNow].style.left = scrollW + "px";//下一张图片放置在显示区域右侧
  setIcon();
  animate(imgs[iNow],{left: 0});//下一张显示图片移动到显示区域
}
function stop(){
  clearInterval(timer);
}

完成！！！！！
具体效果可见：轮播图

枫雨血痕

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
网页特效之轮播图2

网页特效之轮播图是以包含所有图片的盒子移动达到轮播效果，而该案例中是以包含单张图片的容器移动达到轮播目的。主要思路：开始时，第一张图片显示，其他图片用定位放置在显示右侧，然后使用定时器轮播时当前显示图片左移显示区域左侧，右侧的图片中的一张左移到显示区域。第一步：静态布局在这个大盒子box下，分slide(图片显示区)和slider-ctrl(各种点击按键)盒子。然后在slide盒子下，给两...
复制链接

扫一扫