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

这篇文章给大家分享的是有关怎么制作焦点幻灯轮播大图js特效的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

我们提供的服务有：成都做网站、网站设计、微信公众号开发、网站优化、网站认证、色尼ssl等。为近1000家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的色尼网站制作公司

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特效”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！