一、首先去下载jquery和使用它

把它放在你的项目的js目录下面，引用就可以用了

二、编写代码

思路：

（1）先定义html,定义一个div（图片轮播的大小），在div里面加存放图片的li列表标签，添加图片

（2）编写css样式，设置div居中、去掉li标签的样式（去点）

（3）编写js，抓取li列表标签内容第一个显示其他同级元素隐藏(只显示一张图片)，然后编写函数  setInterval

setInterval动作的作用是在播放动画的时，每隔一定时间就调用函数，方法或对象；

循环列表标签，定义变量i++，轮播图片，最后设置轮播样式，是上下淡出，还是左右淡出

以上就是简单的轮播图思路，后面的原点与左右点击标签也是差不多的思路。

代码：

(代码里面都有我自己的理解解释)

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" href="../css/lb.css">
    <script src="../javascript/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="ban" class="box">
    <!--先定一个框，例如div、section-->
    <ul>
        <!--存放把图片-->
    <li><img src="../image/1.jpg"></a></li>
    <li><img src="../image/2.jpg"></a></li>
    <li><a href="#"><img src="../image/3.jpg"></a></li>
    <li><a href="#"><img src="../image/4.jpg"></a></li>
    <li><a href="#"><img src="../image/5.jpg"></a></li>
    </ul>
    <!--原点-->
    <p>
        <span class="cur"></span>
        <!--只需要一个-->
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </p>
    <!--左右点击-->
    <strong id="right" >></strong>
    <strong id="left" ><</strong>
</div>

<script src="../javascript/lb.js"></script>
</body>
</html>

css:

*{
    margin: 0;
    padding: 0;
}
.box{
    width: 800px;
    height: 400px;
    position: relative;
    /**/
    margin: 100px auto;
    /*上边距 居中*/
    /*border:1px solid red;*/
    /*边框样式：粗细 实线 颜色*/
}
.box li{
    position: absolute;
    left: 0;
    top:0;
    list-style: none;
    /*去除列表样式*/
}
.box p{
    position: absolute;;
    left: 300px;
    bottom: 20px;
}
.box p span{
    float:left;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    /*画圆弧*/
    margin-left: 20px;
    /*之间的间距*/
    border: 2px solid white;
    /*box-shadow: 0px 0px 2px 2px goldenrod;*/
    /* 是圆外的样式 左右偏移 上下偏移 虚化度 大小 颜色*/
}
.box p .cur{
    /*移动的原点样式，轮播到的点变化成实心点*/
    background:#FFFFFF;
    box-shadow: 0px 0px 10px 5px #FFFFFF;
}
#left{
    position: absolute;
    left: 0px;
    top: 180px;
    padding: 10px;
    background:rgba(0,0,0,0.3);
    color: #FFFFFF;
    cursor: pointer;
}
#right{
    position: absolute;
    right: 0px;
    top: 180px;
    padding: 10px;
    background:rgba(0,0,0,0.3);
    color: #FFFFFF;
    cursor: pointer;   /*鼠标变手指*/
}

js:

$('#ban li').eq(0).show().siblings().hide();
//抓取li.第一个.显示.其他 同级元素.隐藏
var i = 0;
var t = '';  //方便后面的动作执行，给它赋值
function autoPlay(){   //封装
    t=setInterval(function () {
        //setInterval动作的作用是在播放动画的时，每隔一定时间就调用函数，方法或对象
        i++;
        if(i>4){i=0;}
        // $('#ban li').eq(i).show(500).siblings().hide(500);  //从左上角开始
        // $('#ban li').eq(i).slideDown(500).siblings().slideUp(500);   //从上面和下面进行轮播变化
        $('#ban li').eq(i).fadeIn(500).siblings().fadeOut(500);   //渐入渐出变化
        $('#ban span').eq(i).addClass('cur').siblings().removeClass('cur')
    //    该元素增加一个类cur同时它的兄弟元素去掉cur类,并获取它的子元素
    },2000);   //设置定时器
}
autoPlay();  //调用

$('#ban').mousemove(function () {
    //鼠标移入
    clearInterval(t);
//    这里就使用到了上面的轮播的赋值，清除轮播动作所以就停止轮播
})
$('#ban').mouseout(function () {
    autoPlay();
//移开鼠标调用函数，继续轮播
})
$('#ban span').mouseover(function () {
    i=$(this).index();    //找到当前的下标值
    $('#ban li').eq(i).fadeIn(500).siblings().fadeOut(500);   //渐入渐出变化
    $(this).addClass('cur').siblings().removeClass('cur');
})
$('#left').click(function () {
    //这里是点击左边动作
    i--;
    if(i<0){i=4;}     //如果图片到第一张后会循环从最后一张重新开始向左轮播
    $('#ban li').eq(i).fadeIn(500).siblings().fadeOut(500);   //渐入渐出变化
    $('#ban span').eq(i).addClass('cur').siblings().removeClass('cur')
})
$('#right').click(function () {
    //这里是点击右边动作
    i++;
    if (i>4){i=0;}      //如果图片到最后一张后会循环从第一张重新开始向右轮播
    $('#ban li').eq(i).fadeIn(500).siblings().fadeOut(500); //渐入渐出变化
    $('#ban span').eq(i).addClass('cur').siblings().removeClass('cur')
})

效果：

jquery 手机端视频轮播 jquery怎么做轮播图_html