jQuery大氣寬屏的banner圖片切換,制作寬屏背景圖片和文字結(jié)合動畫效果切換代碼。適用于大氣的網(wǎng)站圖片切換展示類型代碼。
使用方法:
1、head引入css文件
<link type="text/css" href="css/style.css" rel="stylesheet" />
2、head引入js文件
<script type="text/javascript" src="js/jquery.min.js"></script>
3、body引入HTML代碼
<div class="banner-engine">
<ul class="banner-ul clearfix" id="slider-back">
<li class="banner-cloudapp"></li>
<li class="banner-cps"></li>
<li class="banner-trust"></li>
</ul>
<!-- 對應(yīng)banner文字 -->
<div class="slider-main">
<div class="banner-text">
<div class="slider-text" data-start_top="30" data-to_top="0" data-start_left="0" data-to_left="0">
<p class="banner-text1" >云應(yīng)用正式公測</p>
<p class=" banner-text2" >提供跨云多平臺一站式批量云服務(wù)器安全管理服務(wù)</p>
<a class="banner-link-button" href="#">參與公測</a>
</div>
</div>
<div class="banner-text">
<div class="slider-text" data-start_top="30" data-to_top="0" data-start_left="0" data-to_left="0">
<p class="banner-text1" >CPS推廣</p>
<p class=" banner-text2" ><span style="color: #ffd400;">5日結(jié)算隨時提現(xiàn)</span> 現(xiàn)在加入共贏云計算市場藍(lán)海</p>
<a class="banner-link-button" href="#">立即加入</a>
</div>
</div>
<div class="banner-text">
<div class="slider-text" data-start_top="30" data-to_top="0" data-start_left="0" data-to_left="0">
<p class="banner-text1" >信任中心</p>
<p style="line-height: 36px;" class=" banner-text2" >嚴(yán)格經(jīng)過16+2維度測試<br/>為您提供合規(guī)、可用、安全、可信的云計算服務(wù)</p>
<a class="banner-link-button" href="#">立即查看</a>
</div>
</div>
</div>
<!-- banner索引 -->
<div class="banner-point">
<div class="auto">
<ul class="banner-area" id="slider-btn">
<li class="active" data-delay="12000"></li>
<li data-delay="8000"></li>
<li data-delay="8000"></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
var d = $("#slider-btn li");
var j = $("#slider-back li");
var a = $(".banner-text");
var h = $(".slider-text");
var e = $(".banner-txt a");
var i = 0;
d.each(function(l) {
$(this).mouseover(function() {
f(l)
});
$(this).data("index")
});
function f(l) {
i = l;
d.eq(l).addClass("active").siblings().removeClass();
var m = a.eq(l);
var n = m.children();
m.siblings(".banner-text").stop(true).fadeOut(100);
m.show();
n.each(function() {
var o = $(this);
o.css({
display: "block",
opacity: 0,
top: o.data("start_top") || 0,
left: o.data("start_left") || 0
});
o.stop(true).delay(400).animate({
display: "none",
opacity: 1,
top: o.data("to_top"),
left: o.data("to_left")
},
1200);
if (o.data("class") !== undefined) {
o.removeClass(o.data("class"));
setTimeout(function() {
o.addClass(o.data("class"))
},
0)
}
});
j.eq(l).siblings().stop().animate({
opacity: 0
},
600);
j.eq(l).stop().animate({
opacity: 1
},
600)
}
function g() {
i++;
if (i == d.length) {
i = 0
}
f(i)
}
var c = null;
var b = $("#slider-btn");
var k = function() {
var l = b.find(".active");
c = setTimeout(function() {
g();
k()
},
l.data("delay") || 8000)
};
k();
d.hover(function() {
clearInterval(c)
},
function() {
k()
});
f(0)
});
</script>