js+jquery+css3炫酷幻灯片宽屏轮播效果

文章目录[隐藏]

Css部分 

  1. *{padding: 0;margin: 0;}
  2. 	body{padding: 50px 0;-webkit-font-smoothing:antialiased;}
  3. 	.wrapper,.main,.main-i{width: 100%;height: 400px;position: relative;}
  4. 	.main{overflow: hidden;}
  5. 	.main-i img{width: 100%;position: relative;left: 0;top: 0;}
  6. 	.caption{position: absolute;top: 50%;left: 30%;text-align: right;z-index: 100;}
  7. 	.caption h2{font-size: 40px;color: #b5b5b5;margin-right: 45px;}
  8. 	.caption h3{font-size: 70px;margin-right: -45px;}
  9. 	.caption h2,
  10. 	.caption h3{-webkit-transition:all .8s 0.5s;}
  11. 	.ctrl{position: absolute;width: 100%;height: 13px;line-height: 13px;text-align: center;bottom: -13px;}
  12. 	.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;}
  13. 	.ctrl-i img{width: 100%;position: absolute;left: 0;bottom: 50px;opacity: 0;-webkit-transition:all .5s;}
  14. 	.ctrl-i:hover img{bottom: 13px;-webkit-box-reflect:below 0px -webkit-gradient(
  15. 			linear,
  16. 			left top,
  17. 			left bottom,
  18. 			from( transparent ),
  19. 			color-stop( 50%,transparent ),
  20. 			to(rgba(255,255,255,.3))
  21. 		);opacity: 1;z-index: 100;}
  22. 	.ctrl-i_active{
  23. 		background: #000;
  24. 	}
  25. 	.ctrl-i_active:hover img{
  26. 		opacity: 0;
  27. 	}
  28. 	.main-i{opacity: 0;position: absolute;top: 0;-webkit-transition:all .5s;}
  29. 	.background_img,.main-i_active{opacity: 1;right: 0 !important;z-index: 2}
  30. 	.background_img{z-index: 1;width: 100%;}
  31. 	.main-i_active h2,
  32. 	.main-i_active h3{
  33. 		margin-right: 0;
  34. 	}

Js代码 

  1. $(function(){
  2. 		var _ctrl = $(".ctrl").find("a");
  3. 		$(".main-i:odd").css("right","50%");
  4. 		$(".main-i:even").css("right","-50%");
  5. 		_ctrl.on("click",function(){
  6. 			var index = $(this).index();
  7. 			$(this).addClass(".ctrl-i_active")
  8. 				   .siblings().removeClass("ctrl-i_active");
  9. 			$(".main>div").eq(index).addClass("main-i_active")
  10. 					 			.siblings().removeClass("main-i_active");
  11. 			$(".background_img").attr("src","img/" + (index + 1) + ".jpg")
  12. 		})
  13. 	})
  14. 	</script>

Html结构

加载img文件夹下的三张图片

  1. <div class="wrapper">
  2. 		<div class="main">
  3. 			<div class="main-i main-i_active">
  4. 				<div class="caption">
  5. 					<h2>Wordpress</h2>
  6. 					<h3>Wordpress</h3>
  7. 				</div>
  8. 				<img src="img/1.jpg">
  9. 			</div>
  10. 			<div class="main-i">
  11. 				<div class="caption">
  12. 					<h2>Bootstrap</h2>
  13. 					<h3>Bootstrap</h3>
  14. 				</div>
  15. 				<img src="img/2.jpg">
  16. 			</div>
  17. 			<div class="main-i">
  18. 				<div class="caption">
  19. 					<h2>jQuery</h2>
  20. 					<h3>jQuery</h3>
  21. 				</div>
  22. 				<img src="img/3.jpg">
  23. 			</div>
  24. 			<img src="" class="background_img" alt="">
  25. 		</div>
  26. 		<div class="ctrl">
  27. 			<a class="ctrl-i ctrl-i_active" >
  28. 				<img src="img/1.jpg">
  29. 			</a>
  30. 			<a class="ctrl-i" >
  31. 				<img src="img/2.jpg">
  32. 			</a>
  33. 			<a class="ctrl-i" >
  34. 				<img src="img/3.jpg">
  35. 			</a>
  36. 		</div>
  37. 	</div>

整体源码 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<style type="text/css">
  7. 	*{padding: 0;margin: 0;}
  8. 	body{padding: 50px 0;-webkit-font-smoothing:antialiased;}
  9. 	.wrapper,.main,.main-i{width: 100%;height: 400px;position: relative;}
  10. 	.main{overflow: hidden;}
  11. 	.main-i img{width: 100%;position: relative;left: 0;top: 0;}
  12. 	.caption{position: absolute;top: 50%;left: 30%;text-align: right;z-index: 100;}
  13. 	.caption h2{font-size: 40px;color: #b5b5b5;margin-right: 45px;}
  14. 	.caption h3{font-size: 70px;margin-right: -45px;}
  15. 	.caption h2,
  16. 	.caption h3{-webkit-transition:all .8s 0.5s;}
  17. 	.ctrl{position: absolute;width: 100%;height: 13px;line-height: 13px;text-align: center;bottom: -13px;}
  18. 	.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;}
  19. 	.ctrl-i img{width: 100%;position: absolute;left: 0;bottom: 50px;opacity: 0;-webkit-transition:all .5s;}
  20. 	.ctrl-i:hover img{bottom: 13px;-webkit-box-reflect:below 0px -webkit-gradient(
  21. 			linear,
  22. 			left top,
  23. 			left bottom,
  24. 			from( transparent ),
  25. 			color-stop( 50%,transparent ),
  26. 			to(rgba(255,255,255,.3))
  27. 		);opacity: 1;z-index: 100;}
  28. 	.ctrl-i_active{
  29. 		background: #000;
  30. 	}
  31. 	.ctrl-i_active:hover img{
  32. 		opacity: 0;
  33. 	}
  34. 	.main-i{opacity: 0;position: absolute;top: 0;-webkit-transition:all .5s;}
  35. 	.background_img,.main-i_active{opacity: 1;right: 0 !important;z-index: 2}
  36. 	.background_img{z-index: 1;width: 100%;}
  37. 	.main-i_active h2,
  38. 	.main-i_active h3{
  39. 		margin-right: 0;
  40. 	}
  41.  
  42. 	</style>
  43. </head>
  44. <body>
  45. 	<div class="wrapper">
  46. 		<div class="main">
  47. 			<div class="main-i main-i_active">
  48. 				<div class="caption">
  49. 					<h2>Wordpress</h2>
  50. 					<h3>Wordpress</h3>
  51. 				</div>
  52. 				<img src="img/1.jpg">
  53. 			</div>
  54. 			<div class="main-i">
  55. 				<div class="caption">
  56. 					<h2>Bootstrap</h2>
  57. 					<h3>Bootstrap</h3>
  58. 				</div>
  59. 				<img src="img/2.jpg">
  60. 			</div>
  61. 			<div class="main-i">
  62. 				<div class="caption">
  63. 					<h2>jQuery</h2>
  64. 					<h3>jQuery</h3>
  65. 				</div>
  66. 				<img src="img/3.jpg">
  67. 			</div>
  68. 			<img src="" class="background_img" alt="">
  69. 		</div>
  70. 		<div class="ctrl">
  71. 			<a class="ctrl-i ctrl-i_active" >
  72. 				<img src="img/1.jpg">
  73. 			</a>
  74. 			<a class="ctrl-i" >
  75. 				<img src="img/2.jpg">
  76. 			</a>
  77. 			<a class="ctrl-i" >
  78. 				<img src="img/3.jpg">
  79. 			</a>
  80. 		</div>
  81. 	</div>
  82. 	<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  83. 	<script type="text/javascript">
  84. 	$(function(){
  85. 		var _ctrl = $(".ctrl").find("a");
  86. 		$(".main-i:odd").css("right","50%");
  87. 		$(".main-i:even").css("right","-50%");
  88. 		_ctrl.on("click",function(){
  89. 			var index = $(this).index();
  90. 			$(this).addClass(".ctrl-i_active")
  91. 				   .siblings().removeClass("ctrl-i_active");
  92. 			$(".main>div").eq(index).addClass("main-i_active")
  93. 					 			.siblings().removeClass("main-i_active");
  94. 			$(".background_img").attr("src","img/" + (index + 1) + ".jpg")
  95. 		})
  96. 	})
  97. 	</script>
  98. </body>
  99. </html>

发布日期： 作者： 511遇见

所属分类： JavaScript/jquery 标签： 　　　

没有相关文章!

相关文章: