焦点幻灯轮播大图js特效制作代码-Discuz教程下载

登录/ 注册
站长工具
 找回密码
 立即注册
QQ登录
搜索
返回列表 发新帖

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

来自版块: Discuz教程
40456
0
如本资源下载地址失效,请点击此处进行反馈
开通本站Svip会员，全站资源免费下
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.jpg"/></a>
                                               <a href="#"><img src="img/demo2.jpg"/></a>
                                               <a href="#"><img src="img/demo3.jpg"/></a>
                                              <a href="#"><img src="img/demo4.jpg"/></a>
                                               <a href="#"><img src="img/demo5.jpg"/></a>
                                               <a href="#"><img src="img/demo6.jpg"/></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.gif) 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.gif) 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;
}

制作

举报

全部评论 0

期待你的评论哦~

教程 / CSS+DIV素材

  • Discuz教程
  • CSS+DIV素材

所属版块

返回版块

您需要登录后才可以回帖 立即登录
登录
0
0
0

©2015-2022 www.tuyuanma.com 版权所有

本站内容皆来自网络分享，如有侵权请联系我们处理。

赣公网安备36112102000036号 赣ICP备17001544号-10

联系邮箱：tuyuanma@qq.com 联系QQ：3197813386

返回顶部