Shulou(Shulou.com)06/01 Report--

This article is about how to create a focus slide carousel js effect. Xiaobian thinks it is quite practical, so share it with everyone for reference. Let's follow Xiaobian and have a look.

Html section:

Focus slide carousel large image js special effect

window.jQuery || [xss_clean]('')

$(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

});

});

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

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.