jQuery实现简单图片的轮播(自右向左播放)

拼搏现实的明天。 2022-09-24 12:30 128阅读 0赞

简单的轮播大概内容分为如下三点：

1.轮播图片的存储；

2.轮播的样式（注意：图片存储的总宽度，以及图片移动相对元素的定位的元素）；

3.JQuery中的计时器调用动画移动图片轮播。

一、carouselFigure.html编写图片的存储，以及所在范围

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CarouselFigure(自右向左)</title>
        <link rel="stylesheet" type="text/css" href="carouselFigureCSS.css">
        <script type="text/javascript" src="jquery-3.0.0.min.js"></script>
        <script type="text/javascript" src="carouselFigureJS.js"></script>
    </head>
    <body>
    
    
    <div class="carousel">
        
        <div class="banner">
            
            <ul class="figureList">
                <li><a href="javascript:void(0)" target="_blank"><img src="轮播图片/轮播图1.jpg"/></a>
                </li>
                <li><a href="javascript:void(0)" target="_blank"><img src="轮播图片/轮播图2.jpg"/></a>
                </li>
                <li><a href="javascript:void(0)" target="_blank"><img src="轮播图片/轮播图3.jpg"/></a>
                </li>
                <li><a href="javascript:void(0)" target="_blank"><img src="轮播图片/轮播图4.jpg"/></a>
                </li>
                <li><a href="javascript:void(0)" target="_blank"><img src="轮播图片/轮播图5.jpg"/></a>
                </li>
                <li><a href="javascript:void(0)" target="_blank"><img src="轮播图片/轮播图6.jpg"/></a>
                </li>
            </ul>
        </div>
    </div>
    </body>
    </html>

二、carouselFigureCSS.css以上html每层的样式。

/*通用CSS属性*/
    * {
        margin: 0;
        padding: 0;
    }
    
    /*最外层的*/
    .carousel {
        width: 580px;
        height: 360px;
        margin: 30px auto;
    }
    
    /*图片切换的范围*/
    .banner {
        width: 580px;
        height: 360px;
        overflow: hidden;
        position: relative;
    }
    
    /*存储图片的ul*/
    .figureList {
        list-style: none;
        /*存储的图片的总宽度*/
        width: 3480px;
        height: 360px;
        overflow: hidden;
        position: absolute;
    }
    
    .figureList li {
        float: left;
        /*转换为行元素*/
        display: inline;
    }
    
    .figureList li a {
        text-decoration: none;
    }
    
    .figureList li img {
        width: 580px;
        height: 360px;
    }

三、carouselFigureJS.js图片轮播动画

$(function () {
    
        //当前下标countIndex
        var countIndex = 0;
        //图片总数，即图片被包裹的li个数
        var imageCount = $(".figureList li").length;
    
        //计时器自动调用切换显示的图片下标，1.5秒调用一次。
        //一定要注意第一个函数调用不加括号
        var autoCarousel = setInterval(figureIndex, 1500);
    
        //转换下标，并调用动画切换图片
        function figureIndex() {
            if (countIndex < imageCount - 1) {
                countIndex++;
            } else {
                countIndex = 0;
            }
            //调用切换
            changeTo(countIndex);
        }
    
        //切换图片
        function changeTo(num) {
            //切换图片，也就是把figureList类（ul）向左移动。
            var leftGo = num * 580;
            $(".figureList").animate({
      "left": "-" + leftGo + "px"}, 500);
        }
    });
    /**
     * Created by 洋   汪 on 2016/7/31.
     */

以上为简单的只有图片的轮播，接下来的日子我将会写出带有按钮等之类的附加内容。请大家敬请关注。