多张图片自动及手动轮播

图片轮播效果

图片是网图,话不多说,直接上代码:

HTML:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>

<body>
    <div id="box">
        <div id="img">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602241114256&di=c8d6b3d0a8d125f2ccd5d08a1ae4ef56&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F-fo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Ffc1f4134970a304e53aea32bdbc8a786c8175c56.jpg" alt="">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602241158054&di=e0b7b4a97afe68c3bb3cdd5963052f70&imgtype=0&src=http%3A%2F%2Fimgup04.wdsj2.com%2Fwdsj2%2F2019-07%2F16%2F12%2F15632509587253_0.jpg" alt="">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1097141853,1956229949&fm=26&gp=0.jpg" alt="">
        div>
        <ul id="num">ul>  //图片小圆点
    div>
    <script src='./jquery-1.5.2.min.js'>script>
body>
html>

JS:

    <script>
        $(function () {
            init();
            changImg(); //解决第一次第一张到第二张的时间间隔
            start();
        });
        //初始化
        function init() {
            var len = $('#img img').length; //获取图片有多少张
            var html = '';
            //拼html
            for (var i = 0; i < len; i++) {
                html += '
  • + i + ')" οnmοuseοut="reStart(' + i + ')">' + (i + 1) + '
  • '
    ; } //写进ul $('#num').html(html); //显示第一张图片 $('#img img').first().css('display', 'block'); //第一个数字背景颜色 $('#num li').eq(0).addClass('active'); } //图片轮播 function changImg(num) { if (num == 'auto') { //定时器自动调用 num = index; } else { //鼠标放上的时候 清楚定时器 clearInterval(timer); } //链式写法 $('#img img').eq(num).css('display', 'block').siblings().css('display', 'none'); $('#num li').eq(num).addClass('active').siblings() .removeClass('active'); index++; if (index == $('#img img').length) { //最后一张 index = 0; //第一张 } } var index = 0; var timer; //定时器 //定时器 播放 function start() { timer = setInterval('changImg("auto")', 2500); } //鼠标离开之后 又要自动播放 function reStart(num) { index = num; changImg(num); start(); } </script>

    CSS:

        
    

    最后就是效果图:

    多张图片自动及手动轮播_第1张图片

    你可能感兴趣的:(html,jquery,css)