Jquery图片轮播（连续滚动+突出显示）

最新推荐文章于 2024-03-14 19:48:19 发布

ICY___

最新推荐文章于 2024-03-14 19:48:19 发布

阅读量1.2k

点赞数

分类专栏： ICY___的Jquery入门文章标签： jquery图片轮播

本文链接：https://blog.csdn.net/ICY___/article/details/87965577

版权

本文介绍了一种利用Jquery创建图片轮播的新方法，通过浮动特性、超出隐藏和动态改变图片位置来实现连续滚动效果，并通过克隆技术突出显示大图，从而达到独特的轮播体验。

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

之前已经写过很多的图片轮播了，但以下这种还真的没想到过

实现效果（图片来源于百度，侵权请与本人联系）

主要原理：利用浮动特性和超出部分隐藏，动态改变第一张图的右偏移量，动态改变图片排列，实现轮播

利用克隆，实现给大图的动态穿参，最终实现效果。

代码如下：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* 布局其实是有点痛苦的，自己调了好久，总会不理想 */
        * {
            margin: 0;
            padding: 0;
        }

        .block {
            position: relative;
            width: 400px;
            height: 600px;
            border: 1px solid silver;
            margin: 0 auto;
            overflow: hidden;
        }

        .small_img {