jQuery实现图片伦播效果(淡入淡出+左右切换)
Posted 郑福坤
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery实现图片伦播效果(淡入淡出+左右切换)相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 ul li { 12 list-style: none; 13 } 14 a{ 15 text-decoration: none; 16 } 17 #banner{ 18 width: 100%; 19 height: 300px; 20 overflow: hidden; 21 background: rgb(40, 40, 40 , .4); 22 } 23 #center{ 24 width: 760px; 25 height: 300px; 26 margin: 0 auto; 27 position: relative; 28 } 29 #center ul { 30 width: 760px; 31 height: 300px; 32 } 33 #center ul li{ 34 width: 760px; 35 height: 300px; 36 } 37 #center ul li a img{ 38 width: 100%; 39 height: 100%; 40 display: block; 41 } 42 #center .btn{ 43 display: none; 44 position: absolute; 45 width: 46px; 46 height: 70px; 47 top: 110px; 48 font-size: 30px; 49 color: #fff; 50 text-align: center; 51 line-height: 70px; 52 background: rgba( 0 , 0 , 0 , .4 ); 53 font-weight: 600; 54 } 55 #center .btn:hover{ 56 background: rgba( 0 , 0 , 0 , .8 ); 57 } 58 #center .left{ 59 left: 15px; 60 } 61 #center .right{ 62 right: 15px; 63 } 64 #list{ 65 width: 88px; 66 position: absolute; 67 bottom: 15px; 68 left: 50%; 69 margin-left: -44px; 70 background: rgba(0,0,0,.4); 71 border-radius: 20px; 72 padding: 2px 10px; 73 } 74 #list span{ 75 display: inline-block; 76 width: 9px; 77 height: 9px; 78 border-radius: 50%; 79 border: 1px solid #fff; 80 cursor: pointer; 81 } 82 #list span.active{ 83 background: #fff; 84 } 85 86 </style> 87 </head> 88 <body> 89 <div id="banner"> 90 <div id="center"> 91 <ul> 92 <li><a href="javascript:;"><img src="img/1.jpg"/></a></li> 93 <li><a href="javascript:;"><img src="img/2.jpg"/></a></li> 94 <li><a href="javascript:;"><img src="img/3.jpg"/></a></li> 95 <li><a href="javascript:;"><img src="img/4.jpg"/></a></li> 96 <li><a href="javascript:;"><img src="img/5.jpg"/></a></li> 97 </ul> 98 <a href="javascript:;" class="btn left"><</a> 99 <a href="javascript:;" class="btn right">></a> 100 <div id="list"> 101 <span class="active"></span> 102 <span></span> 103 <span></span> 104 <span></span> 105 <span></span> 106 </div> 107 </div> 108 </div> 109 <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script> 110 <script type="text/javascript"> 111 var $banner = $(‘#banner‘); 112 var $span = $(‘#list span‘); 113 var $li = $(‘#center ul li‘); 114 var $btn = $(‘#center .btn‘); 115 var $right = $(‘#center .right‘); 116 var $left = $(‘#center .left‘); 117 var timer = null; 118 var $index = 0; 119 $banner.hover(function(){ 120 $btn.fadeIn( 500 ); 121 clearInterval(timer); 122 },function(){ 123 $btn.fadeOut( 500 ); 124 timer = setInterval(rightC,2000); 125 }) 126 $right.click(function(){ 127 rightC(); 128 }) 129 $left.click(function(){ 130 leftC(); 131 }); 132 133 timer = setInterval(rightC,2000); 134 $span.mouseover(function(){ 135 $index = $(this).index(); 136 change(); 137 }) 138 function rightC(){ 139 $index ++; 140 if($index>$span.size()-1){ 141 $index = 0; 142 } 143 change(); 144 } 145 function leftC(){ 146 $index --; 147 if($index<0){ 148 $index = $span.size()-1; 149 } 150 change(); 151 } 152 function change(){ 153 $span.eq($index).addClass(‘active‘).siblings().removeClass(‘active‘); 154 $li.eq($index).stop().fadeIn(500).siblings().stop().fadeOut(500); 155 } 156 </script> 157 </body> 158 </html>
以上是关于jQuery实现图片伦播效果(淡入淡出+左右切换)的主要内容，如果未能解决你的问题，请参考以下文章
JQuery: JQuery效果（隐藏显示切换，滑动，淡入淡出，以及动画）