纯jQuery实现网页轮播图

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

①：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