首页 > 代码库 > jQuery实现图片伦播效果(淡入淡出+左右切换)
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实现图片伦播效果(淡入淡出+左右切换)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。