修正：图片使用background-image: url();

    .item:nth-child(1){ background-image: url(); }

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>轮播图</title>
    7.     <style>
    8.         body{
    9.             background-color: rgba(0, 110, 255, 0.1);
    10.         }
    11.         .contanier{
    12.             width: 500px;
    13.             height: 300px;
    14.             position: relative;
    15.             margin-left: 370px;
    16.         }
    17.         .item{
    18.             width: 500px;
    19.             height: 300px;
    20.             position: absolute;
    21.             opacity: 0;
    22.         }
    24.         img{
    25.             width: 500px;
    26.             height: 300px; 
    27.         }
    28.         .active{
    29.             z-index: 1;
    30.             opacity: 1;
    31.             transition: opcacity 500ms linear;
    32.         }
    34.         /* 按钮 */
    35.         .pre{
    36.             content: '<';
    37.             display: block;
    38.             position: absolute;
    39.             top: 90px;
    40.             left: -50px;
    41.             height: 100px;
    42.             line-height: 100px;
    43.             text-align: center;
    44.             width: 60px;
    45.             font-size: 60px;
    46.             font-weight:400;
    47.             color:#ffffff;
    48.             cursor: pointer;
    49.             z-index: 6;
    50.         }
    51.         .next{
    52.             content: '>';
    53.             display: block;
    54.             position: absolute;
    55.             top: 90px;
    56.             right: -50px;
    57.             height: 100px;
    58.             line-height: 100px;
    59.             text-align: center;
    60.             width: 60px;
    61.             font-size: 60px;
    62.             font-weight:400;
    63.             color:#ffffff;
    64.             cursor: pointer;
    65.             z-index: 6;
    66.         }
    67.     </style>
    68. </head>
    69. <body>
    70.     <div class="contanier">
    71.         <div class="item active" data-index=1><img src="img/85-1.jpg" alt=""></div>
    72.         <div class="item" data-index=2><img src="img/小王.jpg" alt=""></div>
    73.         <div class="item" data-index=3><img src="img/85-2.jpg" alt=""></div>
    74.         <div class="item" data-index=4><img src="img/85-3.jpg" alt=""></div>
    75.         <div class="item" data-index=5><img src="img/85.jpg" alt=""></div>
    76.         <!-- 小按钮可以点击前后 -->
    77.         <div class="pre">&lt;</div>
    78.         <div class="next">&gt;</div>
    79.     </div>
    81.     <script src="../jquery.js"></script>
    82.     <script>
    83.     //索引
    84.         function next(index){
    85.             index = Number(index);
    86.             if($(".item").length===index){
    87.                 return 1;
    88.             }
    89.             return index+1;
    90.         }
    91.         //去下一页的方法
    92.         function goNext(){
    93.              //找到有active的元素
    94.              var active=$('.active');
    95.             //找到他的下标
    96.             var index=active.attr('data-index');
    97.             //删除他的active样式
    98.             active.removeClass('active');
    99.            //给下一个元素添加active样式
    100.             $(".item[data-index="+next(index)+"]").addClass('active');
    101.         }
    102.         //调用方法
    103.         $('.next').click(function(){
    104.             goNext();
    105.         });
    107.         //去上一页索引
    108.         function pre(index){
    109.             index = Number(index);
    110.             if(index===1){
    111.                 return $('.item').length;
    112.             }
    113.             return index-1;
    114.         }
    115.         //去上一页的方法
    116.         function goPre(){
    117.              //找到有active的元素
    118.              var active=$('.active');
    119.             //找到他的下标
    120.             var index=active.attr('data-index');
    121.             //删除他的active样式
    122.             active.removeClass('active');
    123.            //给下一个元素添加active样式
    124.             $(".item[data-index="+pre(index)+"]").addClass('active');
    125.         }
    126.         //调用方法
    127.         $('.pre').click(function(){
    128.             goPre();
    129.         });
    131.         //周期轮播的方法
    132.         setInterval(goNext,3000);
    134.     </script>
    135. </body>
    136. </html>