欢迎来到酱油妹!织梦模板,dede模板下载,织梦cms模板,免费网站模板下载站

酱油妹

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

企业模板

Html部分:

<html lang="zh">

<!doctype html>

<meta charset="UTF-8">

<head>

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

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

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

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

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

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

<body>

</head>

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

<p id="slider">

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

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

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

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

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

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

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

</p>

</p>

<!-- </p> -->

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

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

<script type="text/javascript">

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

$('#slider').vmcSlider({

$(function() {

height: 300,

width: 1000,

gridRow: 5,

gridCol: 10,

gridHorizontal: 10,

gridVertical: 20,

ascending: true,

autoPlay: true,

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

effects: [

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

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

ie6Tidy: false,

],

duration: 2000,

random: false,

});

speed: 900

</script>

});

</html>

</body>

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

CSS部分:

.vui-slider {

body{ background-color:#2D2D2D}

overflow:hidden;

position:relative;

}

background:#999;

overflow:hidden;

.vui-slider .vui-items {

height:100%;

width:100%;

.vui-slider .vui-item {

}

position:absolute;

display:none;

left:0;

TOP:0;

height:100%;

width:100%;

.vui-slider .vui-item a,

}

display:block;

.vui-slider .vui-item img {

margin:0;

padding:0;

}

border:none;

position:absolute;

.vui-slider .vui-buttons {

bottom:16px;

z-index:5;

float:left;

left:50%;

filter:alpha(Opacity=80);

display:inline;

opacity: 0.8;

-moz-opacity:0.8;

.vui-slider .vui-button {

}

display:inline;

float:left;

height:12px;

overflow:hidden;

margin:0 10px;

width:12px;

border:none;

padding:0;

background:#FFF;

border-radius:6px;

}

cursor:pointer;

background-color:#C00;

.vui-slider .vui-button-cur {

.vui-slider .vui-transfer {

}

position:absolute;

display:none;

left:0;

TOP:0;

height:100%;

width:100%;

}

z-index:3;

position:absolute;

.vui-slider .vui-prev {

left:0;

TOP:50%;

width:60px;

z-index:5;

margin-TOP:-75px;

height:150px;

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

border-radius:0 10px 10px 0;

filter:alpha(opacity=30);

cursor:pointer;

-khtml-opacity:0.3;

-moz-opacity:0.3;

transition:0.5s ease;

opacity:0.3;

-webkit-transition:0.5s ease;

-o-transition:0.5s ease;

.vui-slider .vui-next {

}

TOP:50%;

position:absolute;

z-index:5;

right:0;

height:150px;

width:60px;

border-radius:10px 0 0 10px;

margin-TOP:-75px;

cursor:pointer;

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

-moz-opacity:0.3;

filter:alpha(opacity=30);

opacity:0.3;

-khtml-opacity:0.3;

-o-transition:0.5s ease;

transition:0.5s ease;

}

-webkit-transition:0.5s ease;

filter:alpha(opacity=40);

.vui-slider .vui-sidebutton-hover {

-khtml-opacity:0.4;

-moz-opacity:0.4;

background-color:#000;

opacity:0.4;

}


希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
作者:酱油妹 来源:www.jiangyoumei.com 关注: 时间:2021-04-27 17:30
版权声明:凡注明来源为www.jiangyoumei.com的均为本站原创,转载请注明来源。
本文网址:http://www.jiangyoumei.com/HTML/HTMLjichu/20210427/12263.html
凡本站提供教程均已验证教程的准确性。
相关教程
在线客服

织梦模板 整站模板 新手教程 使用技巧