<img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/robocop-1987-wallpaper-2.jpg">
<img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/sJALsDXak4EehSg2F2y92rt5hPe.jpg">
</div>
<!--左右按钮-->
<div class="btn">
<span class="prev"><</span>
<span class="next">></span>
</div>
<!--小圆点-->
<div class="lib">
<span class="on" ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
</div>
</div>
</body>
</html>
shufflingfigure.css:
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
width:600px ;
height: 260px;
margin: 50px auto;
}
#wrap .pic{
width: 600px;
height: 260px;
position: relative;
cursor: pointer;
}
#wrap .pic img{
position:absolute;
width:600px ;
height: 260px;
}
#wrap .btn span{
position: absolute;
top: 50%;
display: block;
width: 50px;
height: 90px;
margin-top: -45px;
background: rgba(0,0,0,.5);
font-size: 20px;
text-align: center;
line-height: 90px; /*设置垂直居中*/
cursor: pointer;
}
#wrap .btn span.next{
position: absolute;
right: 0;
}
#wrap .lib{
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -65px;
display: flex; /*弹性盒子模型*/
flex-direction: row; /*主轴为行*/
justify-content:space-between;/*主轴方向排列方式*/
align-items: center; /*辅轴方向排列方式*/
width:130px ;
height: 30px;
background: rgba(0,0,0,.5);
}
#wrap .lib span {
display: block;
width: 10px;
height: 10px;
background: #fff;
margin: 5px;
border-radius: 50%; /*设置圆角设置圆形*/
cursor: pointer;
}
#wrap .lib span.on{
background: red;
}shufflingfigure.js:
/**
* Created by Administrator on 2017/4/6.
*/
window.onload=function () {
/**定义*/
/*点击 下一张按钮 被点击的时候 图片进行切换 小圆点切换*/
var $pic=$(".pic"); /*获取图片点击区域*/
var $next=$(".next");/*获取下一张的按钮*/
var $prev=$(".prev");/*获取上一张的按钮*/
var $img=$(".pic img"); /*获取pic下所有的img*/
var $lib=$(".lib span"); /*获取所有的小圆点*/
var index=0; //定义当前图片下标
var length=$img.length; //图片个数
//图片从左向右切换
