Html
    Css
    Js

    
                        
body {
	height:100%;
	margin:0;
	background-color:#782E63;
}
#app {
	width:180px;
	height:20px;
	margin:200px auto;
}
.button {
	width:20px;
	height:20px;
	float:left;
	margin-right:20px;
	background-color:#fff;
	border-radius:20px;
	cursor:pointer;
	/* 过渡动画 */
            transition:0.3s ease width;
}
.button:last-child {
	margin-right:0;
}
.button.active {
	width:60px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

jQuery实现左右轮播图翻页按钮

css样式添加animation动画效果,通过js添加和删除类,以达到点击按钮实现翻页效果

0