• 【Html+JS+CSS】简易轮播图核心代码分享 + 效果展示

    目录

    直接上代码吧！

    Html启动页代码：

    DOCTYPE HTML>
<html>
	<head>
		<title>please enter your titletitle>
		<meta charset="utf-8">
		<meta name="Author" content="追光者♂">
		<style type='text/css'>
			*{ margin:0; padding:0;}
			
			#wrap{
				width:970px;
				height:300px;
				margin:50px auto;
				position:relative;
				overflow:hidden;
			}
			
			#pic{
				width:970px;
				height:270px;
				position:relative;
			}
			#pic li{
				list-style:none;
				width:0;
				height:0;
				position:absolute;
				top:135px;
				left:485px;
				opacity:0;
				filter:alpha(opacity=0);
			}
			#pic li span{
				width:100%;
				height:100%;
				position:absolute;
				top:0;
				left:0;
				filter:alpha(opacity=50);
				background:rgba(0,0,0,.5);
				display:block;
			}
			#pic li img{
				width:100%;
				height:100%;
			}
			#pic li.l1{ width:640px; height:270px; left:165px; top:0px; z-index:10;opacity:1;
				filter:alpha(opacity=100);}

			#pic li.l2{ width:530px; height:220px; left:440px; top:25px; z-index:9;opacity:1;
				filter:alpha(opacity=100);}
			#pic li.l0{ width:530px; height:220px; left:0px; top:25px; z-index:9;opacity:1;
				filter:alpha(opacity=100);}

			#pic li.l3{ width:300px; height:150px; left:970px; top:60px; z-index:8;}
			#pic li.l9{ width:300px; height:150px; left:-300px; top:60px; z-index:8;}

			#btn div{
				width:45px;
				height:45px;
				position:absolute;
				top:50%;
				margin-top:-22px;
				z-index:999;
				cursor:pointer;
			}
			#left{
				background:url(img/left.png);
				left:0;
			}
			#right{
				background:url(img/right.png);
				right:0;
			}
			#tab{
				width:200px;
				height:10px;
				padding:10px 0;
				position:absolute;
				left:50%;
				margin-left:-100px;
				bottom:0;
			}
			#tab li{
				list-style:none;
				float:left;
				width:10px;
				height:10px;
				margin:0 5px;
				border-radius:100%;
				background:#bbb;
				cursor:pointer;
			}
			#tab li.on{
				background:#0cf;
			}

		style>
	head>
	<body>
		
		<div id="wrap">
			<div id='pic'>
				<li class='l1'><img src="img/1.jpg" alt="" />li>
				<li class='l2'><img src="img/2.jpg" alt="" />li>
				<li class='l3'><img src="img/3.jpg" alt="" />li>
				<li><img src="img/4.jpg" alt="" />li>
				<li><img src="img/5.jpg" alt="" />li>
				<li><img src="img/6.jpg" alt="" />li>
				<li><img src="img/7.jpg" alt="" />li>
				<li><img src="img/8.jpg" alt="" />li>
				<li class='l9'><img src="img/9.jpg" alt="" />li>
				<li class='l0'><img src="img/10.jpg" alt="" />li>
			div>
			<div id="btn">
				<div id="left">div>
				<div id="right">div>
			div>
			<div id="tab">
				<li class='on'>li>
				<li>li>
				<li>li>
				<li>li>
				<li>li>
				<li>li>
				<li>li>
				<li>li>
				<li>li>
				<li>li>
			div>
		div>

		<script type="text/javascript" src='js/jquery-1.12.1.min.js'>script>
		<script type="text/javascript">
			
			(function(){
				var $left = $('#left');
				var $right = $('#right');
				var $li = $('#pic li');
				var $tabLi = $('#tab li');
				var index = 0;

				$li.append('');
				$('#pic li span').eq(0).css('display' , 'none');
				
				var arrW=[],arrH=[],arrL=[],arrT=[],arrZ=[],arrS=[],arrO=[];
				var nowTime = 0;
				$right.click(function(){
					if ( new Date() - nowTime > 500 )
					{
						nowTime = new Date();
						index ++;
						index %= $li.length;
						$tabLi.eq(index).addClass('on').siblings().removeClass('on');
						fn( $(this).index() );
					}
					
				});

				$left.click(function(){
					if ( new Date() - nowTime > 500 )
					{
						nowTime = new Date();
						index --;
						if(index<0)index=$li.length-1;
						$tabLi.eq(index).addClass('on').siblings().removeClass('on');
						fn( $(this).index() );
					}
				});

				$tabLi.click(function(){
					$(this).addClass('on').siblings().removeClass('on');
					var nowIndex = $(this).index();
					var x = nowIndex - index;
					if ( x == 1 || x == -($li.length-1) )
					{
						fn( true );
						index = nowIndex;
					}
					else if ( x == -1 || x == $li.length-1 )
					{
						fn( false );
						index = nowIndex;
					}
					else if ( nowIndex != index )
					{
						$li.each(function(i){
							arrW[i] = $(this).css('width');
							arrH[i] = $(this).css('height');
							arrL[i] = $(this).css('left');
							arrT[i] = $(this).css('top');
							arrZ[i] = $(this).css('zIndex');
							arrS[i] = $(this).find('span').css('display');
							arrO[i] = $(this).css('opacity');
						});
						$li.each(function(i){
							$(this).animate({
								width : 0,
								height : 0,
								opacity : 0,
								left : '485px',
								top : '135px'
							},300);
						});
						setTimeout(function(){
							$li.each(function(i){
								var a = i - (nowIndex - index);
								if(a<0)a+=$li.length;
								if(a>=$li.length)a-=10;
								$(this).find('span').css('display' , arrS[a]);
								$(this).css('zIndex' , arrZ[a]).animate({
									width : arrW[a],
									height : arrH[a],
									left : arrL[a],
									top : arrT[a],
									opacity : arrO[a]
								},500);
							});
							index = nowIndex;
						},300);
					}

					
				});

				function fn( x ){
					$li.each(function(i){
						arrW[i] = $(this).css('width');
						arrH[i] = $(this).css('height');
						arrL[i] = $(this).css('left');
						arrT[i] = $(this).css('top');
						arrZ[i] = $(this).css('zIndex');
						arrS[i] = $(this).find('span').css('display');
						arrO[i] = $(this).css('opacity');
					});
					$li.each(function(i){
						if ( x )
						{
							var a = i-1;
							if(a<0)a=$li.length-1;
						}
						else
						{
							var a = i+1;
							if(a==$li.length)a=0;
						}
						
						$(this).find('span').css('display' , arrS[a]);
						$(this).css('zIndex' , arrZ[a]).animate({
							width : arrW[a],
							height : arrH[a],
							left : arrL[a],
							top : arrT[a],
							opacity : arrO[a]
						},500);
					});
				}


			})();

		script>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255
    • 256
    • 257
    • 258
    • 259
    • 260
    • 261
    • 262
    • 263
    • 264

    另外一个是jquery小组件的代码，代码行稍长，可以自行找到。找不到的朋友可以去我的资源下载哈！

    简单效果展示

    这里我以一个简单的轮播图示例来展示。各位可以自行运行进行测试哦！
    在这里插入图片描述

  • 相关阅读:
    我的十年程序员生涯--无锡之旅，开启岗前培训
    技术分享 | 如何使用代理配置快速定位接口测试脚本问题？
    基于java小组学习系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署
    leetcode刷题：动态规划02（爬楼梯）
    【C++进阶之路】封装unordered_set 、unordered_map
    java ssm勤工助学岗位管理系统
    算法学习—双指针
    【目标检测】30、
    黑马旅游网-JavaWeb学成练手小项目-包含老师资料
    阿里二面准备(Java 研发)，精心准备200题（含答案）成为JAVA收割机
  • 原文地址：https://blog.csdn.net/qq_44731019/article/details/126176531