js图片轮播（翻页切换）

最新推荐文章于 2024-08-27 19:30:26 发布

ICY___

最新推荐文章于 2024-08-27 19:30:26 发布

阅读量3.4k

点赞数 15

分类专栏： ICY___的js进阶文章标签：图片轮播

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

版权

本文将介绍一种常见的图片轮播方式，类似淘宝网站的风格。内容涵盖三种基本的网站图片轮播类型，其中淡入淡出效果相对复杂。通过深入理解并实践，可以熟练掌握这种轮播技巧。详细的注释让学习过程更具挑战性。

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

前面已经介绍了两种常见的图片轮播样式，今天将介绍一种更为常见的图片轮播形式，和淘宝的功能样式类似，这三种轮播基本上涵盖了常见网站图片轮播的所有类型，难度的话，个人认为淡入淡出是比较难的，但只要用心，仔细的体会核心思想，一步步来，相信还是可以很好地掌握的！

<!DOCTYPE html>
<html lang="en">
<!-- 主要思想  结合无缝轮播，使得图片可以完成循环，利用计时器，切换页面，其中，切换的核心思想为margin值
的固定变化来实现图片的张张切换 -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片轮播</title>
    <!-- 利用margin-left的值的操作来实现图片的滚动 而不是之前的滚动条移动左边距 -->
    <style>
        .all {
            width: 700px;
            height: 400px;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }

        .block {
            width: 700px;
            height: 400px;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }

        .block>div:nth-child(1) {
            width: 4900px;
            height: 400px;
            margin-left: 0px;
        }

        .block>div>img {
            float: left;
            width: 700px;
            height: 400px;
        }

        .nowpage {
            transition: margin-left 0.5s ease-in-out;
        }

        .point {
            position: absolute;
            width: 108px;
            height: 15px;
            bottom: 20px;
            left: 296px;
        }

        .point>div {
            width: 14px;
            height: 14px;