jQuery 实现图片轮播效果

首先放上一个,我自己写的极简版的轮播,只用了几行jq语句

极简版论播

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-3.1.1.min.js"></script>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			li{
				list-style: none;
			}
			body{
				margin: 50px;
			}
			li{
				list-style: none;
			}
			.wrap{
				width:500px;
				height: 338px;
				border: 3px solid #ABCDEF;
				position: relative;
				overflow: hidden;
			}
			.wrap ul{
				width:2000px;
				position: absolute;
				left:0;
				top:0;
			}
			.wrap ul li{
				float:left;
				width:500px;
			}
			.wrap ol{
				position: absolute;
				bottom: 10px;
				right: 10px;
			}
			.wrap ol li{
				float:left;
				width:16px;
				height: 16px;
				line-height: 16px;
				text-align: center;
				border: #fc0;
				background: #000;
				color: #fff;
				margin-right:3px;
			}
			.wrap ol li.current{
				background:#fff;
				color:#000000;
			}
			.hide{
				display: none;
			}
			
		</style>
		<script type="text/javascript">
			$(function(){
				var oul = $('.wrap ul li');
				var numli = $('.wrap ol li');
				
				numli.mouseover(function(){
					var index = $(this).index();
					
					$(this).addClass('current').siblings().removeClass();					
					oul.eq(index).removeClass('hide').siblings().addClass('hide');
				});
			});
		</script>
	</head>
	<body>
		<div class="wrap">
			<ul>
				<li><img src="myimages/1.jpg" * [slider description] 图片运动的函数
	 * @return {[type]} [description] 无返回值
	 */
	function slider(){
		//为了进行无缝滚动,当图片到达最末端后,将第一个图片后移变成了后一张
        //'position':'relative'虽然第一个图移到末端了,但原位置依然占用
        //'position':'absolute'会因为第一个图片移到末端而空出一块位置,造成图片位移
		if(_now==numLi.length-1){
			ali.eq(0).css({
					'position':'relative',
					'left': oul.width()
			});
			_now=0;
		}else{
			_now++;
		}

		_now2++;

		numLi.eq(_now).addClass('current').siblings().removeClass();

		var imgAlt = aimg.eq(_now).attr('alt');
		op.html(imgAlt);
		
		//animate有一个回调函数,在执行完animate,后续跟进的动作可放在这里面
		oul.animate({'left':-aliWidth*_now2},500,function(){
			if(_now==0){
				ali.eq(0).css('position','static');
				oul.css('left',0);
				_now2=0;
			}
		});


	}

	timeId = setInterval(slider,1500);

	//hover事件,可以将鼠标移入移出绑定在里面
	$('.wrap').hover(function(){
		//这儿是鼠标移入执行
		clearInterval(timeId);
	},function(){
		//这儿是鼠标移出执行
		timeId = setInterval(slider,1500);
	});
});
		</script>
	</head>
	<body>
		<div class="wrap">
			<ul>
				<li><img src="myimages/1.jpg" alt="111" /></li>
				<li><img src="myimages/2.jpg" alt="222" /></li>
				<li><img src="myimages/3.jpg" alt="333" /></li>
				<li><img src="myimages/4.jpg" alt="444" /></li>
			</ul>
			<ol>
				<li class="current">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ol>
			<p class="introduce">111</p>
		</div>
	</body>
</html>


评论

大侠名号:   验证暗号: 点击我更换图片

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND