devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JS特效第153弹：jQuery响应式图片无缝切换代码_响应式 点击文字 图片切换

作者：繁依Fanyi0 | 2024-07-23 18:02:00

赞

踩

响应式 点击文字 图片切换

         jQuery响应式图片无缝切换代码是一款宽屏幻灯片轮播切换特效 ，先来看看效果：

        一部分关键的代码如下：

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>jQuery响应式图片无缝切换代码</title>
  8.  
  9. <style type="text/css">
  10. 	*{
  11. 			margin: 0;
  12. 			padding: 0;
  13. 			list-style-type: none;
  14. 		}
  15. 		.banner{
  16. 			width: 100%;
  17. 			/*height: 560px;*/
  18. 			/*background: black;*/
  19. 			/*子绝父相*/
  20. 			position: relative;
  21. 			/*超出部分全部隐藏，解决横向滚动条*/
  22. 			overflow: hidden;
  23. 		}
  24. 		.banner ul{
  25. 			position: absolute;
  26. 		}
  27. 		.banner ul li{
  28. 			/*这个100%是相对于父盒子的（会把父盒子的宽度继承过来,如父盒子300%,这这里的100%就会相当于300%）*/
  29. 			width: 100%;
  30. 			height: 560px;
  31. 			float: left;
  32. 			background:  no-repeat center center;
  33. 		}
  34. 		/*.banner ul li:nth-child(1){*/
  35. 			/*background: url('./1.jpg') no-repeat center center;*/
  36. 		/*}*/
  37. 		/*.banner ul li:nth-child(2){*/
  38. 			/*background: url('./2.jpg') no-repeat center center;*/
  39. 		/*}*/
  40. 		/*.banner ul li:nth-child(3){*/
  41. 			/*background: url('./3.jpg') no-repeat center center;*/
  42. 		/*}*/
  43. 		.banner ol{
  44. 			/*width: 60px;*/
  45. 			height: 20px;
  46. 			background: rgba(0,0,0,0.5);
  47. 			position: absolute;
  48. 			left:50%;
  49. 			/*margin-left: -40px;*/
  50. 			bottom: 30px;
  51. 			padding: 0 10px;
  52. 			border-radius: 10px;
  53. 		}
  54. 		.banner ol li{
  55. 			width: 10px;
  56. 			height: 10px;
  57. 			float: left;
  58. 			margin: 5px 5px;
  59. 			background: rgba(255,255,255,0.5);
  60. 			border-radius: 50%;
  61. 			cursor: pointer;
  62. 		}
  63. 		.banner ol .current{
  64. 			background: rgba(255,255,255,1);
  65. 		}
  66. 		.banner i{
  67. 			width: 58px;
  68. 			height: 120px;
  69. 			position: absolute;
  70. 			top: 50%;
  71. 			margin-top: -60px;
  72. 			cursor: pointer;
  73. 			border-radius: 5px;
  74. 			display: none;
  75. 		}
  76. 		.banner .left{
  77. 			left: 60px;
  78. 			background: url('img/left_right.png') no-repeat 0 0px;
  79. 		}
  80. 		.banner .right{
  81. 			right: 60px;
  82. 			background: url('img/left_right.png') no-repeat 0px -120px;
  83. 		}
  84. 		.banner .left:hover , .banner .right:hover{
  85. 			background-color: rgba(0, 0, 0, 0.31);
  86. 		}
  87. </style>
  88.  
  89. </head>
  90. <body>
  91.  
  92. <div class="banner">
  93. 	<ul></ul>
  94. 	<ol></ol>
  95. 	<i class="left"></i><i class="right"></i>
  96. </div>
  97.  
  98. <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
  99. <script type="text/javascript">
  100. 	$(function(){ //页面加载完毕才执行
  101.  
  102. 		//=========设置参数==========
  103. 		//图片统一高度：
  104. 		var images_height = '560px';
  105. 		//图片路径/链接(数组形式):
  106. 		var images_url = [
  107. 			'img/1.jpg',
  108. 			'img/2.jpg',
  109. 			'img/3.jpg'
  110. 		];
  111. 		var images_count = images_url.length;
  112. 		//console.log(images_count);
  113.  
  114. 		//创建节点
  115. 		//图片列表节点
  116. 		for(var j=0;j<images_count+1;j++){
  117. 			$('.banner ul').append('<li></li>')
  118. 		}
  119. 		//轮播圆点按钮节点
  120. 		for(var j=0;j<images_count;j++){
  121. 			if(j==0){
  122. 				$('.banner ol').append('<li class="current"></li>')
  123. 			}else{
  124. 				$('.banner ol').append('<li></li>')
  125. 			}
  126. 		}
  127.  
  128. 		//载入图片
  129. 		$('.banner ul li').css('background-image','url('+images_url[0]+')');
  130. 		$.each(images_url,function(key,value){
  131. 			$('.banner ul li').eq(key).css('background-image','url('+value+')');
  132. 		});
  133.  
  134. 		$('.banner').css('height',images_height);
  135.  
  136. 		$('.banner ul').css('width',(images_count+1)*100+'%');
  137.  
  138. 		$('.banner ol').css('width',images_count*20+'px');
  139. 		$('.banner ol').css('margin-left',-images_count*20*0.5-10+'px');
  140.  
  141. 		//=========================
  142.  
  143. 		var num = 0;
  144. 		//获取窗口宽度
  145. 		var window_width = $(window).width();
  146. 		$(window).resize(function(){
  147. 			window_width = $(window).width();
  148. 			$('.banner ul li').css({width:window_width});
  149. 			clearInterval(timer);
  150. 			nextPlay();
  151. 			timer = setInterval(nextPlay,2000);
  152. 		});
  153. 		//console.log(window_width);
  154. 		$('.banner ul li').width(window_width);
  155. 		//轮播圆点
  156. 		$('.banner ol li').mouseover(function(){//用hover的话会有两个事件(鼠标进入和离开)
  157. 			$(this).addClass('current').siblings().removeClass('current');
  158. 			//第一张图： 0 * window_width
  159. 			//第二张图： 1 * window_width
  160. 			//第三张图： 2 * window_width
  161. 			//获取当前编号
  162. 			var i = $(this).index();
  163. 			//console.log(i);
  164. 			$('.banner ul').stop().animate({left:-i*window_width},500);
  165. 			num = i;
  166. 		});
  167. 		//自动播放
  168. 		var timer = null;
  169. 		function prevPlay(){
  170. 			num--;
  171. 			if(num<0){
  172. 				//悄悄把图片跳到最后一张图(复制页,与第一张图相同),然后做出图片播放动画，left参数是定位而不是移动的长度
  173. 				$('.banner ul').css({left:-window_width*images_count}).stop().animate({left:-window_width*(images_count-1)},500);
  174. 				num=images_count-1;
  175. 			}else{
  176. 				//console.log(num);
  177. 				$('.banner ul').stop().animate({left:-num*window_width},500);
  178. 			}
  179. 			if(num==images_count-1){
  180. 				$('.banner ol li').eq(images_count-1).addClass('current').siblings().removeClass('current');
  181. 			}else{
  182. 				$('.banner ol li').eq(num).addClass('current').siblings().removeClass('current');
  183.  
  184. 			}
  185. 		}
  186. 		function nextPlay(){
  187. 			num++;
  188. 			if(num>images_count){
  189. 				//播放到最后一张(复制页)后,悄悄地把图片跳到第一张,因为和第一张相同,所以难以发觉,
  190. 				$('.banner ul').css({left:0}).stop().animate({left:-window_width},500);
  191. 				//css({left:0})是直接悄悄改变位置，animate({left:-window_width},500)是做出移动动画
  192. 				//随后要把指针指向第二张图片,表示已经播放至第二张了。
  193. 				num=1;
  194. 			}else{
  195. 				//在最后面加入一张和第一张相同的图片，如果播放到最后一张，继续往下播，悄悄回到第一张(肉眼看不见)，从第一张播放到第二张
  196. 				//console.log(num);
  197. 				$('.banner ul').stop().animate({left:-num*window_width},500);
  198. 			}
  199. 			if(num==images_count){
  200. 				$('.banner ol li').eq(0).addClass('current').siblings().removeClass('current');
  201. 			}else{
  202. 				$('.banner ol li').eq(num).addClass('current').siblings().removeClass('current');
  203.  
  204. 			}
  205. 		}
  206. 		timer = setInterval(nextPlay,2000);
  207. 		//鼠标经过banner，停止定时器,离开则继续播放
  208. 		$('.banner').mouseenter(function(){
  209. 			clearInterval(timer);
  210. 			//左右箭头显示(淡入)
  211. 			$('.banner i').fadeIn();
  212. 		}).mouseleave(function(){
  213. 			timer = setInterval(nextPlay,2000);
  214. 			//左右箭头隐藏(淡出)
  215. 			$('.banner i').fadeOut();
  216. 		});
  217. 		//播放下一张
  218. 		$('.banner .right').click(function(){
  219. 			nextPlay();
  220. 		});
  221. 		//返回上一张
  222. 		$('.banner .left').click(function(){
  223. 			prevPlay();
  224. 		});
  225. 	});
  226. </script>
  227.  
  228. <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
  229. <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
  230. </div>
  231. </body>
  232. </html>

        全部代码：jQuery响应式图片无缝切换代码

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/870961
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号