用jQuery实现图片轮播

最新推荐文章于 2024-09-28 11:04:27 发布

平丘君

最新推荐文章于 2024-09-28 11:04:27 发布

阅读量1.7k

点赞数 2

分类专栏：每周博客文章标签： jQuery

本文链接：https://blog.csdn.net/qq_45145165/article/details/101109909

版权

本文介绍了如何利用jQuery实现图片轮播效果。通过获取图片区域、设置左右按钮和小圆点的监听事件，以及应用定时器进行自动切换，实现了图片的无缝轮播。在鼠标悬停时，定时器暂停，移开后继续轮播。

摘要由CSDN通过智能技术生成

jQuery是对JavaScript的简化，语法没有太大区别，比较JavaScript更加容易理解，代码量更少。

用jQuery实现图片轮播需要有以下步骤：

1.对图片区域获取，想象中我们所用的图片是按照顺序排列起来，按照一定的时间切换图片的位置来实现轮播

2.对左右两个按钮设置监听，当点击按钮时，要切换到前一张或者后一张

3.对图片底部的小圆点设置监听事件，当点击小圆点时，切换到相应的图片位置，而且小圆点也要点亮

4.对图片整体设置定时器，让图片自己轮播，再设置一个监听函数，让鼠标在图片区域悬停的时候停止定时器，挪开的之后继续轮播。

html+css区域代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>焦点轮播图</title>
    <style type="text/css">
        /*去除内边距,没有链接下划线*/
        * {
    
            margin: 0;
            padding: 0;
            text-decoration: none;
        }

        /*让<body有20px的内边距*/
        body {
    
            padding: 20px;
        }

        /*最外围的div*/
        #container {
    
            width: 600px;
            height: 400px;
            overflow: hidden;
            position: relative; /*相对定位*/
            margin: 0 auto;
        }

        /*包含所有图片的<div>*/

        #list {
    
            width: 4200px; /*7张图片的宽: 7*600 */
            height: 400px;
            position: absolute; /*绝对定位*/
            z-index: 1;

        }

        /*所有的图片<img>*/
        #list img {
    
            float: left; /*浮在左侧*/
        }

        /*包含所有圆点按钮的<div>*/
        #pointsDiv {
    
            position: absolute;
            height: 10px;
            width: 100px;
            z-index: 2;
            bottom: 20px;
            left: 250px;
        }

        /*所有的圆点<span>*/

        #pointsDiv span {
    
            cursor: pointer;
            float: left;
            border: 1px solid #fff;
            width: 10px