首页 / 知识

焦点幻灯轮播大图js特效制作代码

2023-04-11 16:09:00

焦点幻灯轮播大图js特效制作代码

 

Html部分：

<!doctype html>

<html lang="zh">

<head>

         <meta charset="UTF-8">

         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

         <meta name="viewport" content="width=device-width, initial-scale=1.0">

         <title>焦点幻灯轮播大图js特效</title>

         <meta name="keywords" content="焦点幻灯轮播大图js特效" />

    <meta name="description" content="焦点幻灯轮播大图js特效" />

         <link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<body>    

                  

                   <!-- <div class="container"> -->

                            <div class="content" style="width:1000px;height:300px;margin:30px auto;overflow:hidden;">

                                     <div id="slider">

                                               <a href="#"><img src="img/demo1.webp"/></a>

                                               <a href="#"><img src="img/demo2.webp"/></a>

                                               <a href="#"><img src="img/demo3.webp"/></a>

                                              <a href="#"><img src="img/demo4.webp"/></a>

                                               <a href="#"><img src="img/demo5.webp"/></a>

                                               <a href="#"><img src="img/demo6.webp"/></a>

                                     </div>

                            </div>

                   <!-- </div> -->

                  

        

        

         <script src="js/jquery-1.10.2.js"></script>

         <script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>

         <script type="text/javascript" src="js/vmc.slider.full.min.js"></script>

         <script type="text/javascript">

                   $(function() {

                            $('#slider').vmcSlider({

                                     width: 1000,

                                     height: 300,

                                     gridCol: 10,

                                     gridRow: 5,

                                     gridVertical: 20,

                                     gridHorizontal: 10,

                                     autoPlay: true,

                                     ascending: true,

                                     effects: [

                                               'fade', 'fadeLeft', 'fadeRight', 'fadeTop', 'fadeBottom', 'fadeTopLeft', 'fadeBottomRight',

                                               'blindsLeft', 'blindsRight', 'blindsTop', 'blindsBottom', 'blindsTopLeft', 'blindsBottomRight',

                                               'curtainLeft', 'curtainRight', 'interlaceLeft', 'interlaceRight', 'mosaic', 'bomb', 'fumes'

                                     ],

                                     ie6Tidy: false,

                                     random: false,

                                     duration: 2000,

                                     speed: 900

                            });

                   });

         </script>

</body>

</html>

CSS部分：

h3{ text-align: center; color:#828282 }

body{ background-color:#2D2D2D}

.vui-slider {

         position:relative;

         overflow:hidden;

         background:#999;

}

.vui-slider .vui-items {

         overflow:hidden;

         width:100%;

         height:100%;

}

.vui-slider .vui-item {

         display:none;

         position:absolute;

         top:0;

         left:0;

         width:100%;

         height:100%;

}

.vui-slider .vui-item a,

.vui-slider .vui-item img {

         display:block;

         padding:0;

         margin:0;

         border:none;

}

.vui-slider .vui-buttons {

         position:absolute;

         z-index:5;

         bottom:16px;

         left:50%;

         float:left;

         display:inline;

         filter:alpha(Opacity=80);

         -moz-opacity:0.8;

         opacity: 0.8;

}

.vui-slider .vui-button {

         float:left;

         display:inline;

         overflow:hidden;

         height:12px;

         width:12px;

         margin:0 10px;

         padding:0;

         border:none;

         border-radius:6px;

         background:#FFF;

         cursor:pointer;

}

.vui-slider .vui-button-cur {

         background-color:#C00;

}

.vui-slider .vui-transfer {

         display:none;

         position:absolute;

         top:0;

         left:0;

         width:100%;

         height:100%;

         z-index:3;

}

.vui-slider .vui-prev {

         position:absolute;

         top:50%;

         left:0;

         z-index:5;

         width:60px;

         height:150px;

         margin-top:-75px;

         border-radius:0 10px 10px 0;

         background:url(prev.webp) no-repeat;

         cursor:pointer;

         filter:alpha(opacity=30);

         -moz-opacity:0.3;

         -khtml-opacity:0.3;

         opacity:0.3;

         transition:0.5s ease;

         -o-transition:0.5s ease;

         -webkit-transition:0.5s ease;

}

.vui-slider .vui-next {

         position:absolute;

         top:50%;

         right:0;

         z-index:5;

         width:60px;

         height:150px;

         margin-top:-75px;

         border-radius:10px 0 0 10px;

         background:url(next.webp) no-repeat;

         cursor:pointer;

         filter:alpha(opacity=30);

         -moz-opacity:0.3;

         -khtml-opacity:0.3;

         opacity:0.3;

         transition:0.5s ease;

         -o-transition:0.5s ease;

         -webkit-transition:0.5s ease;

}

.vui-slider .vui-sidebutton-hover {

         filter:alpha(opacity=40);

         -moz-opacity:0.4;

         -khtml-opacity:0.4;

         opacity:0.4;

         background-color:#000;

}

幻灯大图特效制作代码焦点HTML

最新内容

相关内容

热门文章

推荐文章

标签云

猜你喜欢