使用CSS实现简单的图片轮播功能

示例

1.分析

整个屏幕可以分为四个小块每一块都使用相同的背景图片用backgroung-position改变显示图片的位置使他们各自显示的图片拼起来正好是一个整体的图片接着通过animation动画产生滑动的效果

其次这四个小块都放在一个盒子里这个盒子的背景将是下一张要显示的图片四个小方块绝对定位在这个盒子的上下左右这样当图片滑出小块时显示的就是底下盒子的背景图片

当再次点击下一个按钮时要将四个小块的背景图片换成底下盒子的背景图片再进行动画滑动而底下盒子的背景图片则改成下一次要显示的图片（js代码）以此类推

2.实现

1.首先写html代码用一个div包裹住四个div 用span作为两个按钮

2.在css里将他们的基本样式设置好

body{            position: relative;        }        div#content{            width: 600px;            height: 600px;            position: absolute;            left: 0; right:0;            top:0; bottom: 0;            margin: auto;            border: 1px solid black;        }        div.part{            width: 50%;            height: 50%;            position: absolute;            border: 1px solid red;        }        div.part1{            left: 0;top:0;        }        div.part2{            left: 50%;top:0;        }        div.part3{            left: 0;top:50%;        }        div.part4{            left: 50%;top:50%;        }        div span{            border:1px solid blue;            position: absolute;            top: 50%;            font-size: 120px;            color:black;            transform:translateY(-50%);        }        span#left{            left: 0;        }        span#right{            left: 85%;        }

3.之后来拼好4个div的背景图片

div.part1{            left: 0;top:0;            background-position: left top;        }        div.part2{            left: 50%;top:0;            background-position: right top;        }        div.part3{            left: 0;top:50%;            background-position: left bottom;        }        div.part4{            left: 50%;top:50%;            background-position: right bottom;        }

这里写图片描述

3.我们用animation给四个div加上动画

@keyframes part1{
               from{
  background-position: left top;}            to{
  background-position: left -100%;}        }        @keyframes part2{
               from{
  background-position: right top;}            to{
  background-position: 200% top;}        }        @keyframes part3{
               from{
  background-position: left bottom;}            to{
  background-position: -100% bottom;}        }        @keyframes part4{
               from{
  background-position: right bottom;}![这里写图片描述](http://img.blog.csdn.net/20161126084054641)我们可以先给盒子加一个背景图片试一下效果  如果只是单纯的显示后面盒子的背景图片动画效果不是很明显 所以我们给盒子也加上动画 让它的背景图片产生从外往内缩的动画效果    注意:这里要吧盒子的背景图片位置定位在center才会出现以中心为点进行收缩 否则看到的是以右上角为中心进行收缩的画面    ![这里写图片描述](https://img-blog.csdn.net/20161126085236866)把调用动画的代码先删掉 还有盒子的背景图片也先不要加 下面写js代码

var index = 1;var picParts = [    "images/image1.jpg",    "images/image2.jpg",    "images/image3.jpg"];var content = document.getElementById("content");var parts = content.getElementsByTagName("div");var leftButton = document.getElementById("left");var rightButton = document.getElementById("right");window.onload = function(){    leftButton.onclick = function(){        changeImage(false);    }    rightButton.onclick = function(){        changeImage(true);    }    content.style.backgroundImage = "url(" +  picParts[index] + ")";};function changeImage(flag){if(content.style.animationName == "newPic"){    return;}index = flag?(index+1>3?1:index+1):(index-1<1?3:index-1);   content.style.backgroundImage = "url(" +  picParts[index-1] + ")";//3.content和parts执行相应的动画for (var i = 0; i < parts.length; i++) {    parts[i].style.animationName= flag?"part" +(i+1):"partLeft" +(i+1);};content.style.animationName = "newPic"; //4.清空重置动画 让动画生效setTimeout(function(){    content.style.animationName = "none";    for (var i = 0; i < parts.length; i++) {        parts[i].style.animationName="none";        //5.parts显示下一次退场的图片        parts[i].style.backgroundImage = content.style.backgroundImage;    };},700);

}

“`

你可能感兴趣的文章