HTML+CSS+JS实现 ❤️HTML5图片幻灯片轮播切换❤️

Love The Way You Lie 2022-09-10 11:24 172阅读 0赞

> ##    效果演示：  **文末获取源码** ##
> 
> ![20210907210142796.gif][]

> ## 代码目录： ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16][]

> ## 主要代码实现： ##

### HTML代码 : ###

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>图像画廊主题——Jssor滑块,旋转木马</title>
    </head>
    
    <body style="padding: 0; margin: 0; font-family:Arial, Verdana;background-color:#fff;">
        
        <script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
        
        
        <script type="text/javascript" src="js/jssor.js"></script>
        <script type="text/javascript" src="js/jssor.slider.js"></script>
        <script>
            jQuery(document).ready(function($) {
    
                var _SlideshowTransitions = [
                    //Fade in L
                    {
                        $Duration: 1200,
                        x: 0.3,
                        $During: {
                            $Left: [0.3, 0.7]
                        },
                        $Easing: {
                            $Left: $JssorEasing$.$EaseInCubic,
                            $Opacity: $JssorEasing$.$EaseLinear
                        },
                        $Opacity: 2
                    }
                    //Fade out R
                    , {
                        $Duration: 1200,
                        x: -0.3,
                        $SlideOut: true,
                        $Easing: {
                            $Left: $JssorEasing$.$EaseInCubic,
                            $Opacity: $JssorEasing$.$EaseLinear
                        },
                        $Opacity: 2
                    }
                    //Fade in R
                    , {
                        $Duration: 1200,
                        x: -0.3,
                        $During: {
                            $Left: [0.3, 0.7]
                        },
                        $Easing: {
                            $Left: $JssorEasing$.$EaseInCubic,
                            $Opacity: $JssorEasing$.$EaseLinear
                        },
                        $Opacity: 2
                    }
                    //Fade out L
                    , {
                        $Duration: 1200,
                        x: 0.3,
                        $SlideOut: true,
                        $Easing: {
                            $Left: $JssorEasing$.$EaseInCubic,
                            $Opacity: $JssorEasing$.$EaseLinear
                        },
                        $Opacity: 2
                    }
    
                    //Fade in T
                    , {
                        $Duration: 1200,
                        y: 0.3,
                        $During: {
                            $Top: [0.3, 0.7]
                        },
                        $Easing: {
                            $Top: $JssorEasing$.$EaseInCubic,
                            $Opacity: $JssorEasing$.$EaseLinear
                        },
                        $Opacity: 2,
                        $Outside: true
                    }
                    //Fade out B
                    , {
                        $Duration: 1200,
                        y: -0.3,
                        $SlideOut: true,
                        $Easing: {
                            $Top: $JssorEasing$.$EaseInCubic,
                            $Opacity: $JssorEasing$.$EaseLinear
                        },
                        $Opacity: 2,
                        $Outside: true
                    }
                    //Fade in B
                    , {
                        $Duration: 1200,
                        y: -0.3,
                        $During: {
                            $Top: [0.3, 0.7]
                        },
                        $Easing: {
                            $Top: $JssorEasing$.$EaseInCubic,
                            $Opacity: $JssorEasing$.$EaseLinear
                        },
                        $Opacity: 2
                    }
                    //Fade out T
                    , {
                        $Duration: 1200,
                        y: 0.3,
                        $SlideOut: true,
                        $Easing: {
                            $Top: $JssorEasing$.$EaseInCubic,
                            $Opacity: $JssorEasing$.$EaseLinear
                        },
                        $Opacity: 2
                    }
    
                    //Fade in LR
                    , {
                        $Duration: 1200,
                        x: 0.3,
                        $Cols: 2,
                        $During: {
                            $Left: [0.3, 0.7]
                        },
                        $ChessMode: {
                            $Column: 3
                        },
                        $Easing: {
                            $Left: $JssorEasing$.$EaseInCubic,
                            $Opacity: $JssorEasing$.$EaseLinear
                        },
                        $Opacity: 2,
                        $Outside: true
                    }
                    //Fade out LR
                    , {
                        $Duration: 1200,
                        x: 0.3,
                        $Cols: 2,
                        $SlideOut: true,
                        $ChessMode: {
                            $Column: 3
                        },
                        $Easing: {
                            $Left: $JssorEasing$.$EaseInCubic,
                            $Opacity: $JssorEasing$.$EaseLinear
                        },
                        $Opacity: 2,
                        $Outside: true
                    }
                    //Fade in TB
                    , {
                        $Duration: 1200,
                        y: 0.3,
                        $Rows: 2,
                        $During: {
                            $Top: [0.3, 0.7]
                        },
                        $ChessMode: {
                            $Row: 12
                        },
                        $Easing: {
                            $Top: $JssorEasing$.$EaseInCubic,
                            $Opacity: $JssorEasing$.$EaseLinear
                        },
                        $Opacity: 2
                    }
                    //Fade out TB
                    , {
                        $Duration: 1200,
                        y: 0.3,
                        $Rows: 2,
                        $SlideOut: true,
                        $ChessMode: {
                            $Row: 12
                        },
                        $Easing: {
                            $Top: $JssorEasing$.$EaseInCubic,
                            $Opacity: $JssorEasing$.$EaseLinear
                        },
                        $Opacity: 2
                    }
    
                    //Fade in LR Chess
                    , {
                        $Duration: 1200,
                        y: 0.3,
                        $Cols: 2,
                        $During: {
                            $Top: [0.3, 0.7]
                        },
                        $ChessMode: {
                            $Column: 12
                        },
                        $Easing: {
                            $Top: $JssorEasing$.$EaseInCubic,
                            $Opacity: $JssorEasing$.$EaseLinear
                        },
                        $Opacity: 2,
                        $Outside: true
                    }
                   
    </body>
    
    </html>

上面的图片文件和js需要引入

> ## 源码获取 ##
> 
> **查看博主主页或私信博主获取**
> 
> 精彩推荐更新中：
> 
> ### [HTML5大作业实战100套][HTML5_100] ###

>   打卡 文章 更新** 42 **/  100天
> 
> 大家可以**点赞、收藏、关注、评论**我啦 、需要完整文件或技术资料点击**下方微信获取**~！~！

[20210907210142796.gif]: /images/20220829/b4ab050cc5854d609faa26bd4b4bde34.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/0ae061b2a3a846a1951c4a04d4035d7b.png
[HTML5_100]: https://blog.csdn.net/weixin_39709134/category_11287267.html