博客

方法一（用轮播插件来进行修改）：

用轮播图来进行轮播，网上一大把的轮播插件，直接拿来调试一下即可，将每个图片进行轮播样式轮播即可，不作过多介绍。

优缺点

：该方法运行工作量大，图片需要单独切割，多个轮播图或多个图片，可能会导致有点卡顿。循环轮播没有闪点。

方法二（用背景图片css3 animation来进行轮播）：

下面只介绍左右滚动方法，上下滚动方法掉转即可。

将图片切成两张很长的图片，进行轮播

.box1{
    background: url(/img/logion/rotation01.jpg) no-repeat;
    background-size: auto 100%;
    background-repeat: repeat;
    -webkit-animation: scrollBad1 100s linear infinite;
    -moz-animation: scrollBad1 100s linear infinite;
    animation: scrollBad1 100s linear infinite;
}
.box2{
    background: url(/img/logion/rotation02.jpg) no-repeat;
    background-size: auto 100%;
    background-repeat: repeat;
    -webkit-animation: scrollBad2 200s linear infinite;
    -moz-animation: scrollBad2 200s linear infinite;
    animation: scrollBad2 200s linear infinite;
}

@-webkit-keyframes scrollBad1 {
	0% {
        background-position: 0 0;
    }
    100% {
        background-position: -3700px 0;
    }
}
@-moz-keyframes scrollBad1 {
	0% {
        background-position: 0 0;
    }
    100% {
        background-position: -3700px 0;
    }
}
@keyframes scrollBad1 {
	0% {
        background-position: 0 0;
    }
    100% {
        background-position: -4700px 0;
    }
}
@-webkit-keyframes scrollBad2 {
	0% {
        background-position: 0 0;
    }
    100% {
        background-position: -4700px 0;
    }
}
@-moz-keyframes scrollBad2 {
	0% {
        background-position: 0 0;
    }
    100% {
        background-position: -4700px 0;
    }
}
@keyframes scrollBad2 {
	0% {
        background-position: 0 0;
    }
    100% {
        background-position: -4700px 0;
    }
}

优缺点：流畅度比轮播图效果要好，代码量少、图片整张切，但进行到100%后面重置0%会有闪烁一下效果。