jq 图片轮播

CSS

@font-face {
font-family: "iconfont";
src: url('../font/iconfont.eot?t=1504059207010'); /* IE9*/
src: url('../font/iconfont.eot?t=1504059207010#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAWYAAsAAAAACGgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kg3Y21hcAAAAYAAAABuAAABsv/K06JnbHlmAAAB8AAAAZAAAAHsPoQt6WhlYWQAAAOAAAAALwAAADYOt8SCaGhlYQAAA7AAAAAcAAAAJAfeA4ZobXR4AAADzAAAABMAAAAUE+kAAGxvY2EAAAPgAAAADAAAAAwBQAGWbWF4cAAAA+wAAAAeAAAAIAEUAF1uYW1lAAAEDAAAAUUAAAJtPlT+fXBvc3QAAAVUAAAAQQAAAGHvm3SveJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/s04gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDzzYm7438AQw9zA0AAUZgTJAQAp0wy5eJzFkMENgEAIBAfvNMZYirEE49tafPmyYtrQvcOHVuCSIbAhgQC0QBKTyGAHRtEu16qfGKqfWdUP9DSK02dffLsuee86ZJqLKHXWvHZYx2+y/1Z/Nda8Pp0+zvmgE30Oiu9LoN/hW0C6AR96FjQAAHicVY67btRAFIbnn2HOeIPX3vi69mbXeyEeUGARxngLRLahAVEgUVHyANCmIVIiLqKg4BkQEgUVfZ4EKgSCapHsBzCMEwmUo6P/6D+XT4dJxv58EydiyHx2md1gd9lDxkB7mDt8jJkul3wP4UyGceAIvdAztZgvxR3EcwqioirzmBS5cDDBzVlR6SXXuFXu89soojGQjNJH3u6OJ95ha6gnr9r7/D3CbLHj7l9r711dB8XUtw5sz0s8761FUlqcX3AdPI2jnuxtUftBuml4kl3hGexEpw8e96cj78mb8tl4N+4BR0fwR1Pn43o73Tb5PI18L1GDvjVM+4tLAQ5+XBz69jj/zkygE/6af2ahMeUKVZEhClzEndBcI0dOSGhAE6LNhkwZUPuL8MIipGf296YbK2XW/jO/8k+nzEAZzHXk5Rq6k6qIEfEvHeMc0xzj0KL253mmWfvHFIK/ZLExqyp3DY0yKIqjYm2+LVaV5nYjbaobsmXTSCmUqBuhOBGO67Pe6ZSEqGshyID/AvipT6F4nGNgZGBgAGIZ1zX18fw2Xxm4WRhA4OoZBzcE/f8hCwOzBJDLwcAEEgUAEgUJlAB4nGNgZGBgbvjfwBDDwgACQJKRARWwAgBHCwJueJxjYWBgYH7JwMDCgMAADpsA/QAAAAAAAHYAoADKAPZ4nGNgZGBgYGUIBGIQYAJiLiBkYPgP5jMAABEtAXIAAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgJWRiZGZkYWRlZGNgbGCt6o0vzK/NCszMa8kv1QchaebnF9QCSY4M5Pz83RLUotLGBgAH9wToQAAAA==') format('woff'), url('../font/iconfont.ttf?t=1504059207010') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('../font/iconfont.svg?t=1504059207010#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-zuoyoujiantou:before {
content: "\e63e";
}
.icon-zuoyoujiantou-copy-copy:before {
content: "\e64a";
}
.icon-icon-test:before {
content: "\e62e";
}
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
background-color: #252525;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
font-size: 0;
}
.clearfix {
*zoom: 1;
}
.Cooldog_container {
width: 1800px;
height: 920px;
margin: 5% auto 0;
left: 0px;
position: relative;
overflow: hidden;
}
.Cooldog_container .Cooldog_content {
    position: absolute;
    height: 900px;
    top: 0;
    left: 50%;
    margin-left: -800px;

}
    .Cooldog_container .Cooldog_content li {
        position: absolute;
        top: 0;
        left: 0;
        width: 1600px;
        height: 900px;
        transition: all 0.3s ease;
    }
        .Cooldog_container .Cooldog_content li img {
            width: 1600px;
            height: 900px;
            vertical-align: middle;
            display: inline-block;
        }
.Cooldog_container .btn_left, .Cooldog_container .btn_right {
    display: none;
    width: 126px;
    height: 900px;
    position: absolute;
    top: 21px;
    z-index: 50;
    color: #fff;
    line-height: 900px;
}
.Cooldog_container .btn_left {
    text-align: left;
    left: 0;
}
.Cooldog_container .btn_right {
    text-align: right;
    right: 0;
}
.Cooldog_container i {
    font-size: 50px;
}
.Cooldog_container .btn_close {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    display: none;
    line-height: 20px;
    text-align: center;
    background-color: #BCB9B9;
    color: #fff;
}
    .Cooldog_container .btn_close i {
        font-size: 18px;
    }
.Cooldog_container .buttons {
    width: 370px;
    height: 5px;
    line-height: 5px;
    position: absolute;
    bottom: 5px;
    left: 50%;
    margin-left: -130px;
    z-index: 80;
}
    .Cooldog_container .buttons a {
        float: left;
        width: 40px;
        height: 5px;
        background-color: #898F94;
        margin-right: 15px;
    }
        .Cooldog_container .buttons a.color {
            background-color: #92ffff;
        }
        .Cooldog_container .buttons a:last-child {
            margin-right: 0;
        }
.p1 {
transform: translate3d(-325px, 0, 0) scale(0.81);
transform-origin: 0 50%;
opacity: 0.6;
z-index: 2;
}
.p2 {
transform: translate3d(-125px, 0, 0) scale(0.81);
transform-origin: 0 50%;
opacity: 0.8;
z-index: 3;
}
.p3 {
transform: translate3d(0px, 0, 0) scale(1);
opacity: 1;
z-index: 4;
}
.p4 {
transform: translate3d(220px, 0, 0) scale(0.81);
transform-origin: 0 50%;
opacity: 0.8;
z-index: 3;
}
.p5 {
transform: translate3d(425px, 0, 0) scale(0.81);
transform-origin: 0 50%;
opacity: 0.6;
z-index: 2;
}

JS
 $(function () {
    //鼠标移入显示左右箭头和关闭按钮
    var timer = '';
    $('.Cooldog_container').mouseover(function () {
        $('.btn_left').show('1000');
        $('.btn_right').show('1000');
        clearInterval(timer);
    }).mouseleave(function () {
        $('.btn_left').hide('1000');
        $('.btn_right').hide('1000');
        timer = setInterval(btn_right, 4000);
    });
    var arr = ['p1', 'p2', 'p3', 'p4', 'p5'];
    var index = 0;
    //上一张
    $('.btn_left').on('click', function () {
        btn_left();
    });
    //下一张
    $('.btn_right').on('click', function () {
        btn_right();
    });
    //图片自动轮播
    timer = setInterval(btn_right, 4000);
    //点击上一张的封装函数
    function btn_left() {
        arr.unshift(arr[4]);
        arr.pop();
        $('.Cooldog_content li').each(function (i, e) {
            $(e).removeClass().addClass(arr[i]);
        })
        index--;
        if (index < 0) {
            index = 4;
        }
        show();
    }
    //点击下一张的封装函数
    function btn_right() {
        arr.push(arr[0]);
        arr.shift();
        $('.Cooldog_content li').each(function (i, e) {
            $(e).removeClass().addClass(arr[i]);
        })
        index++;
        if (index > 4) {
            index = 0;
        }
        show();
    }
    //点击底部的按钮切换图片
    $('.buttons a').each(function () {
        $(this).on('click', function () {
            var myindex = $(this).index();
            var mindex = myindex - index;
            if (mindex == 0) {
                return;
            }
            else if (mindex > 0) {
                var newarr = arr.splice(0, mindex);
                //$.merge() 函数用于合并两个数组内容到第一个数组
                arr = $.merge(arr, newarr);
                $('.Cooldog_content li').each(function (i, e) {
                    $(e).removeClass().addClass(arr[i]);
                })
                index = myindex;
                show();
            }
            else if (mindex < 0) {
                //reverse() 方法用于颠倒数组中元素的顺序。
                arr.reverse();
                var oldarr = arr.splice(0, -mindex);
                arr = $.merge(arr, oldarr);
                arr.reverse();
                $('.Cooldog_content li').each(function (i, e) {
                    $(e).removeClass().addClass(arr[i]);
                })
                index = myindex;
                show();
            }
        })
    })
    //底部按钮高亮
    function show() {
        $('.buttons a').eq(index).addClass('color').siblings().removeClass('color');
    }
})


html
<div class="Cooldog_container">
<div class="Cooldog_content">
    <ul>
        <li class="p1">
            <a href="#">
                <img src="~/Image/a1.png" alt="">
            </a>
        </li>
        <li class="p2">
            <a href="#">
                <img src="~/Image/a2.png" alt="">
            </a>
        </li>
        <li class="p3">
            <a href="#">
                <img src="~/Image/a3.png" alt="">
            </a>
        </li>
        <li class="p4">
            <a href="#">
                <img src="~/Image/a4.png" alt="">
            </a>
        </li>
        <li class="p5">
            <a href="#">
                <img src="~/Image/a5.png" alt="">
            </a>
        </li>
       
    </ul>
</div>
<a href="javascript:;" class="btn_left">
    <i class="iconfont icon-zuoyoujiantou"></i>
</a>
<a href="javascript:;" class="btn_right">
    <i class="iconfont icon-zuoyoujiantou-copy-copy"></i>
</a>
<div class="buttons clearfix">
    <a href="javascript:;" class="color"></a>
    <a href="javascript:;"></a>
    <a href="javascript:;"></a>
    <a href="javascript:;"></a>
    <a href="javascript:;"></a>
   
</div>
</div>