纯jQuery实现网页轮播图

来源：互联网发布：vscode 小程序编辑：程序博客网时间：2024/06/11 20:17

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

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

阅读全文

0 0