图片简单的滑动特效

效果如下:

html部分：

<div id="pic">
    <a href="javaScript:;" id="prev">前</a>
    <a href="javaScript:;" id="next">后</a>
    <img src="img/头像1.jpg"/>
    <img src="img/头像2.jpg"/>
    <img src="img/头像3.jpg"/>
    <img src="img/头像4.png"/>
    <img src="img/头像5.jpg"/>
    <img src="img/头像6.png"/>
</div>
<div id="text">
    <p>要重新开始么？</p>
    <input type="button" value="取消"/>
    <input type="button" value="确认"/>
</div>
<div id="bgc"></div>
<div id="over">
<p>谢谢观赏～～～</p>
</div>

css部分：

 #pic{
            height: 300px;
            width: 300px;
            margin: 50px auto;
            position: relative;
            z-index: 1;}
        #pic a{
            display: inline-block;
            height: 70px;
            width: 70px;
            text-decoration: none;
            font-size: 30px;
            font-weight: 600;
            color: #ffffff;
            text-align: center;
            line-height: 70px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            background: #e4b43e;
            position: absolute;
            bottom: -80px;
            -webkit-transition: .5s;
            -moz-transition: .5s;
            -ms-transition: .5s;
            -o-transition: .5s;
            transition: .5s;}
        #pic img{weight:300px;
            height: 300px;
            position: absolute;
            top: 0;
            left: 0;
            transition: 1s;}
        /*#pic:hover #img1{*/
            /*left: -300px;*/
            /*opacity: 0;}*/
        #prev{
            left: 70px;}
        #next{
            right: 70px;}
        #text{
            height: 100px;
            width: 200px;
            line-height: 50px;
            text-align: center;
            border: 10px solid #575757;
            position: absolute;
            background: #ffffff;
            top: 50%;
            left: 50%;
            margin: -100px 0 0 -200px;
            z-index: 3;
            display: none;}
        #bgc{
            width: 100%;
            height: 100%;
            background: #c2c2c2;
            opacity: .5;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            display: none;}
        body{
            width: 100%;
            height: 100%;
            margin: 0;}
        #text p{
            margin: 0;
            color: #971b2b;}
        #over {
            width: 100%;
            height: 100%;
            background: blanchedalmond;
            top: 0;
            left: 0;
            position: absolute;
            z-index: 3;
            display: none;}
        #over p{
            height: 50px;
            width: 300px;
            font-size: 40px;
            line-height: 40px;
            text-align: center;
            color: #971b2b;
            margin:300px auto;}

JavaScript部分：

 window.onload = function () {
            var oPic = document.getElementById('pic');
            var aImg = oPic.getElementsByTagName('img');
            var oPrev = document.getElementById('prev');
            var oNext = document.getElementById('next');

            var oText = document.getElementById('text');
            var aBtn = oText.getElementsByTagName('input');
            var oBgc = document.getElementById('bgc');
            var oOver = document.getElementById('over');

            var num = 0;
            var flag = 1;//使用正负数来控制图片的移动方向

            //为每个ｉｍｇ添加显示顺序
            for (var i=0;i<aImg.length;i++){
                aImg[i].style.zIndex = aImg.length - i;
            }

            //防止下方的ａ标签被遮挡
            oPrev.style.zIndex = aImg.length + 1;
            oNext.style.zIndex = aImg.length + 1;

            //下一张
            oNext.onclick = function () {
                if ( num>=aImg.length-1){
                    bombShow();
                }else{
                    flag = 1
                    nextMove();
                    num ++;
                }
            }

            //上一张
            oPrev.onclick = function () {
                if (num>0){
                    flag = -1;
                    num --;
                    prevMove();
                } else{
                    bombShow();
                }
            }

            //结束
            aBtn[0].onclick =function () {
                oOver.style.display = 'block';
            }


            //重新开始
            aBtn[1].onclick = function () {
                bombHidn();
                for (var i=0;i<aImg.length;i++){
                    aImg[i].style.left = 0;
                    aImg[i].style.opacity = 1;
                }
                num = 0;
            }


            //下一张函数
            function nextMove() {
                aImg[num].style.left = flag*300 +'px';
                aImg[num].style.opacity = 0;
            }

            //上一张函数
            function prevMove() {
                aImg[num].style.left = 0 +'px';
                aImg[num].style.opacity = 1;
            }

            //控制弹出窗口
            //显示
            function bombShow () {
                oText.style.display = 'block';
                oBgc.style.display = 'block';
            }
            //隐藏
            function bombHidn () {
                oText.style.display = 'none';
                oBgc.style.display = 'none';
            }
        }