javascript+CSS3的幻灯片特效

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

*{padding: 0;margin: 0;}

body{padding: 50px 0;-webkit-font-smoothing:antialiased;}

.wrapper,.main,.main-i{width: 100%;height: 400px;position: relative;}

.main{overflow: hidden;}

.main-i img{width: 100%;position: relative;left: 0;top: 0;}

.caption{position: absolute;top: 50%;left: 30%;text-align: right;z-index: 100;}

.caption h2{font-size: 40px;color: #b5b5b5;margin-right: 45px;}

.caption h3{font-size: 70px;margin-right: -45px;}

.caption h2,

.caption h3{-webkit-transition:all .8s 0.5s;}

.ctrl{position: absolute;width: 100%;height: 13px;line-height: 13px;text-align: center;bottom: -13px;}

.ctrl-i{width: 150px;display: inline-block;height: 13px;background: #666;box-shadow: 0 1px 1px rgba(0,0,0,.3);position: relative;cursor: pointer;}

.ctrl-i img{width: 100%;position: absolute;left: 0;bottom: 50px;opacity: 0;-webkit-transition:all .5s;}

.ctrl-i:hover img{bottom: 13px;-webkit-box-reflect:below 0px -webkit-gradient(

linear,

left top,

left bottom,

from( transparent ),

color-stop( 50%,transparent ),

to(rgba(255,255,255,.3))

);opacity: 1;z-index: 100;}

.ctrl-i_active{

background: #000;

}

.ctrl-i_active:hover img{

opacity: 0;

}

.main-i{opacity: 0;position: absolute;top: 0;-webkit-transition:all .5s;}

.background_img,.main-i_active{opacity: 1;right: 0 !important;z-index: 2}

.background_img{z-index: 1;width: 100%;}

.main-i_active h2,

.main-i_active h3{

margin-right: 0;

}


</style>

</head>

<body>

<div>

<div>

<div class="main-i main-i_active">

<div>

<h2>你好</h2>

<h3>Hello</h3>

</div>

<img src="img/1.jpg">

</div>

<div>

<div>

<h2>你好</h2>

<h3>Hello</h3>

</div>

<img src="img/2.jpg">

</div>

<div>

<div>

<h2>你好</h2>

<h3>Hello</h3>

</div>

<img src="img/3.jpg">

</div>

<img src="" alt="">

</div>

<div>

<a class="ctrl-i ctrl-i_active" >

<img src="img/1.jpg">

</a>

<a >

<img src="img/2.jpg">

</a>

<a >

<img src="img/3.jpg">

</a>

</div>

</div>

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

var _ctrl = $(".ctrl").find("a");

$(".main-i:odd").css("right","50%");

$(".main-i:even").css("right","-50%");

_ctrl.on("click",function(){

var index = $(this).index();

$(this).addClass(".ctrl-i_active")

  .siblings().removeClass("ctrl-i_active");

$(".main>div").eq(index).addClass("main-i_active")

.siblings().removeClass("main-i_active");

$(".background_img").attr("src","img/" + (index + 1) + ".jpg")

})

})

</script>

</body>

</html>



你可能感兴趣的:(javascript+CSS3的幻灯片特效)