文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么制作焦点幻灯轮播大图js特效

2024-04-02 19:55

关注

这篇文章给大家分享的是有关怎么制作焦点幻灯轮播大图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.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部分:

h4{ 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;

}

感谢各位的阅读!关于“怎么制作焦点幻灯轮播大图js特效”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯