无js实现焦点图

来源：互联网发布：哪个电影cms好用编辑：程序博客网时间：2024/05/17 03:54

焦点图在各项目中经常会用到，如：http://blog.csdn.net/pvfhv/article/details/8990220r所示的效果，其展示功能在此不在赘述，以下是应用css3的animate动画实现此效果，美中不足之处，不能点击切换每一张图片。此案例的重点是展示animate中的animation-timing-function的step-start，此功能函数实现无渐变，过渡帧之间以后一帧效果填充。例如：0%{}，10%{}，20%{}，则在0%-10%之间的效果以10%的效果填充，不会出现渐变的效果，这就是逐帧动画效果。

在此案例中，图片切换动画是以两个关键帧属性相同的方式来实现图片等待的效果；

图片dot部分则是按时间平分的方式设置每一dot的动画效果，所有图片切换完成需要10s，则第一个dot所需要的时间即10s/5张图片=2s，切换到每一张图片用时所占比例为20%，以此为基础实现每一个dot的位置的颜色变换，想法比较绕，好好想想应该能够想通。

效果图：

代码：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>焦点图无js</title><style type="text/css">    *{        margin: 0;        padding: 0;    }.scrollparent {width: 310px;height: 232px;margin: 50px auto;border: 1px solid lime;position: relative;overflow: hidden;}.scrollbanner {    width: 1860px;position: absolute;left: 0;top: 0;-webkit-animation: scroll 10s infinite linear;}.scrollbanner img {float: left;width: 310px;height: 232px;}.scrolldots {height: 15px;position: absolute;bottom: 10px;left: 100px;}.scrolldots li {width: 12px;height: 12px;list-style: none;border-radius: 50%;background-color: red;margin: 0 5px;float: left;cursor: pointer;}.scrolldots li:nth-child(1){    -webkit-animation: dot1 10s infinite step-start;}.scrolldots li:nth-child(2){                -webkit-animation: dot2 10s infinite step-start;            }            .scrolldots li:nth-child(3){                -webkit-animation: dot3 10s infinite step-start;            }            .scrolldots li:nth-child(4){                -webkit-animation: dot4 10s infinite step-start;            }            .scrolldots li:nth-child(5){                -webkit-animation: dot5 10s infinite step-start;            }@-webkit-keyframes scroll{from,to{left:0;}19%{left:0;}20%{left:-310px}/*21-39%过滤即为停留时间*/39%{left:-310px}40%{left:-620px}59%{left:-620px}60%{left:-930px}79%{left:-930px}80%{left:-1240px}99%{left:-1240px}}@-webkit-keyframes dot1{from,to{background-color: red;}20%{background-color: white;}}@-webkit-keyframes dot2{                from,to,20%{background-color: red;}                40%{background-color: white;}            }            @-webkit-keyframes dot3{                from,to,40%{background-color: red;}                60%{background-color: white;}            }            @-webkit-keyframes dot4{                from,to,60%{background-color: red;}                80%{background-color: white;}            }            @-webkit-keyframes dot5{                from,80%{background-color: red;}                100%{background-color: white;}            }</style></head><body><div class="scrollparent"><div class="scrollbanner"><img src="1.jpg" /><img src="2.jpg" /><img src="3.jpg" /><img src="4.jpg" /><img src="5.jpg" /></div><div class="scrolldots"><ul><li></li><li></li><li></li><li></li><li></li></ul></div></div></body></html>

补充使用step-start制作的Loading动画：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>        <style type="text/css">              body{                text-align: center;                color: darkgoldenrod;            }                      .dotting{                display: inline-block;                width: 10px;                min-height: 2px;                padding: 0 2px;                border-left: 2px solid currentcolor;                border-right: 2px solid currentcolor;                background: currentcolor;                background-clip: content-box;                box-sizing: border-box;                -webkit-animation-name: dot;                -webkit-animation-duration: 4s;                -webkit-animation-timing-function: step-start;/* 马上跳到动画每一结束桢的状态 */                -webkit-animation-iteration-count: infinite;            }            .dotting::before{                content: '';            }            @-webkit-keyframes dot{                from,to{border-left-color: currentcolor;background: currentcolor;border-right-color: currentcolor;}/*75-100%时显示，即有三个点*/                25%{border-color:transparent; background: transparent;}/*0-25%时显示,即没有点*/                50%{border-right-color:transparent; background: transparent;}/*25-50%时显示，即只有一个左点*/                75%{border-right-color:transparent;}/*50-75%时显示，即有两个点*/            }        </style>    </head>    <body>        loading<span class="dotting"></span>    </body></html>