纯jQuery实现网页轮播图

初学者-菜鸟级别。直接上代码吧

①：HTML部分第一张图片和最后一张图片是一样的，这样做是为了实现从最后一张过渡到第一张，图片直接拿的是京东的链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播</title>
    <link rel="stylesheet" href="lunbo.css">
</head>
<body>
    <div class="box">
        <div class="img_list">
            <img class="img1" src="https://img13.360buyimg.com/da/jfs/t7606/15/4771093855/132890/5f055c11/5a0a49d8Nac7232c3.jpg" alt="">
            <img src="https://img14.360buyimg.com/da/jfs/t12241/114/347670663/76562/336432ea/5a096d57N09c765dc.jpg" alt="">
            <img src="https://img1.360buyimg.com/da/jfs/t11551/142/1785340879/196158/2354e0e0/5a094447N9ee98d86.jpg" alt="">
            <img src="https://img12.360buyimg.com/babel/jfs/t11884/62/1800646604/180354/fcc5f2d8/5a0a54aaN1e85ddbd.jpg" alt="">
            <img src="https://img20.360buyimg.com/da/jfs/t10597/214/1767280119/107853/e81bef25/59e5deffN82945fbf.jpg" alt="">
            <img src="https://img14.360buyimg.com/babel/jfs/t14050/118/403274213/59009/e82f37fa/5a0aba40N80e8267d.jpg" alt="">
            <img src="https://img10.360buyimg.com/babel/jfs/t7810/31/4276487469/125325/ce0e200e/5a03f5f9Nfeb6d594.jpg" alt="">
            <img src="https://img11.360buyimg.com/babel/jfs/t11983/140/1554125186/109877/17e077ad/5a05586fNc30b76da.jpg" alt="">
            <img class="img1" src="https://img13.360buyimg.com/da/jfs/t7606/15/4771093855/132890/5f055c11/5a0a49d8Nac7232c3.jpg" alt="">
        </div>
        <div id="point" class="poi">
            <span class="sp_poi on"></span>
            <span class="sp_poi"></span>
            <span class="sp_poi"></span>
            <span class="sp_poi"></span>
            <span class="sp_poi"></span>
            <span class="sp_poi"></span>
            <span class="sp_poi"></span>
            <span class="sp_poi"></span>
        </div>
        <span id="pre" class="arrow" ><</span>
        <span id="nex" class="arrow">></span>
    </div>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script src="lunbo-jq.js"></script>
</html>

②：css

@charset "UTF-8";
*{
    margin: 0;
    padding: 0;
    text-decoration: none;
}
body{
    padding: 20px;
}
/*最外围父级元素的样式*/
.box{
    position: relative;
    width: 790px;
    height: 340px;
    margin: 0 auto;
    overflow: hidden;
}
/*图片父级的样式*/
.img_list{
    position: absolute;
    z-index: 1;
    width: 6320px;
    height: 340px;
}
/*图片样式*/
.img_list img{
    float: left;
    width: 790px;
    height: 340px;
}
/*箭头的样式*/
.arrow{
    width: 40px;
    height: 60px;
    font-size: 30px;
    line-height: 60px;
    text-align: center;
    color: #ffffff;
    background-color: RGBA(0, 0, 0, .3);
    cursor: pointer;
    display: none;
    position: absolute;
    z-index: 2;
    top:160px;
}
#nex{
    right: 0px;
}
/*鼠标悬浮在父空间上时，显示两边的箭头*/
.box:hover .arrow{
    display: block;
}
 /*鼠标移到箭头上，改变背景色   也可以通过js*/
.arrow:hover{
    background-color: RGBA(0, 0, 0,7);
}
 /*小圆点外围父级元素样式*/
.poi{
    height: 10px;
    width: 180px;
    position: absolute;
    z-index: 2;
    left: 330px;
    bottom: 30px;
}
 /*小圆点样式*/
 span{
    margin-right: 5px;
    width: 10px;
    height: 10px;
     border-radius: 50%;
    float: left;
    background-color: #ffffff;
}
 /*单纯的 默认第一个小圆点的颜色*/
.on{
    background-color: #00c37e;
}

③jq

var num = 0;
$(function () {
    //右侧按钮 点击
    $('#nex').click(function () {
        if(num<8)
            num++;
        if(num>=8){
            $('.img_list').css('margin-left','0px');
            num=0;
        }
        // console.log(num);
        if(num==8){
            $('.sp_poi').css('backgroundColor','#ffffff');
            $('.sp_poi').eq(0).css('backgroundColor','#00c37e');
        }else{
            $('.sp_poi').css('backgroundColor','#ffffff');
            $('.sp_poi').eq(num).css('backgroundColor','#00c37e');
        }
        $('.img_list').stop().animate({'margin-left':-790*num+"px"},500);
    });
    //左侧按钮 点击
    $('#pre').click(function () {
        if (num>=0)
            num--;
        if(num<0){
            num=7;
            $('.img_list').css('margin-left','-5530px');
            $('.sp_poi').css('backgroundColor','#ffffff');
            $('.sp_poi').eq(7).css('backgroundColor','#00c37e');
        }else {
            $('.sp_poi').css('backgroundColor','#ffffff');
            $('.sp_poi').eq(num).css('backgroundColor','#00c37e');
        }
        console.log(num);
        $('.img_list').stop().animate({'margin-left':-790*num+"px"},100);
    });
    //鼠标悬浮在整个图片区域时 停止轮播， 离开后 继续轮播
    $('.box').hover(function () {
        clearInterval(m_auto);
        //鼠标在小圆点上滑过，显示对应位置的图片
        $('.sp_poi').on('mouseenter',function () {
            num = $(this).index();
            $('.sp_poi').css('backgroundColor','#ffffff');
            $('.sp_poi').eq(num).css('backgroundColor','#00c37e');
            $('.img_list').animate({'margin-left':-790*num+"px"},100);
        })
    },function () {
        m_auto = setInterval(auto,2000);
    })
    //自动轮播
    var m_auto = setInterval(auto,2000);
});
function auto() {
    if(num<8)
        num++;
    if(num>=8){
        num=0;
        $('.img_list').css('margin-left','0px');
        $('.sp_poi').css('backgroundColor','#ffffff');
        $('.sp_poi').eq(0).css('backgroundColor','#00c37e');
    }else {
        $('.sp_poi').css('backgroundColor','#ffffff');
        $('.sp_poi').eq(num).css('backgroundColor','#00c37e');
    }
    $('.img_list').animate({'margin-left':-790*num+"px"});
}

作为一位初学者，也是第一次尝试去写博客，有问题的可以帮忙指出来我去修改。还有就是大神们怎么将效果图放上来，指点一下咯。

这篇文章写的详细，有图有代码有解说思路-------http://blog.csdn.net/m0_37460263/article/details/76019842

纯jQuery实现网页轮播图

猜你喜欢