jQuery幻灯片

最新推荐文章于 2023-10-05 00:15:17 发布

小歘欻

最新推荐文章于 2023-10-05 00:15:17 发布

阅读量191

点赞数

分类专栏： HTML 文章标签： html5 javascript jquery css

本文链接：https://blog.csdn.net/qq_33840688/article/details/118877104

版权

HTML 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
		<script>
			$(function(){
				var $point = $('.point')
				var $left = $('.left')
				var $right = $('.right')
				var $img = $('.img li')
				var $len = $img.length
				var forTimer = null
				var timer = null
				var $prevs = 0
				var $next = 0
				var imove = false
				
				$img.not(':first').css({'left':500})
				$point.css({'margin-left':-16*$len})
				
				for(var i = 0 ; i<$len ; i++){
					var $li = $('<li>')
					if(i == 0){
						$li.addClass('active')
					}
					$point.append($li)
				}
				
				var $point_li = $('.point li')
				
				$point_li.click(function(){
					
					$next = $(this).index()
					$(this).addClass('active').siblings().removeClass('active')
					move()
				})
				
				function myTimer(){
					$next++
					move()
					$point_li.eq($next).addClass('active').siblings().removeClass('active')
					
				}
				
				forTimer = setInterval(myTimer,1000)
				
				// 移入移出事件
				$('.list').hover(function(){
					clearInterval(forTimer)
				},function(){
					forTimer = setInterval(myTimer,1000)
				})
				
				// 写一个函数方便复用
				function move(){
					// 当下一张图片是两边的时候
					if($next>$len-1){
						$next = 0
						$prevs = $len-1
						$img.eq($next).css({'left':500})
						$img.eq($next).animate({'left':0})
						$img.eq($prevs).animate({'left':-500}, function(){
							imove = false
						})
						$prevs = $next
						return
					}
					if($next < 0){
						$next = $len-1
						$prevs = 0
						$img.eq($next).css({'left':-500})
						$img.eq($next).animate({'left':0})
						$img.eq($prevs).animate({'left':500}, function(){
							imove = false
						})
						$prevs = $next
						return
					}
					
					if($prevs > $next){
						$img.eq($next).css({'left':-500})
						$img.eq($prevs).animate({'left':500})
					}
					if($prevs < $next){
						$img.eq($next).css({'left':500})
						$img.eq($prevs).animate({'left':-500})
					}
					
					$img.eq($next).animate({'left':0})
					$prevs = $next
					imove = false
				}
				
				// 左箭头移动
				$left.click(function(){
					// 防止多次点击 只有当动画完成时才会执行 否则return 在上面的move函数中改变imove的值 确保动画执行完成才能调用
					if(imove){
						return
					}
					imove = true
					$next--
					move()
					$point_li.eq($next).addClass('active').siblings().removeClass('active')
				})
				
				// 右箭头移动
				$right.click(function(){
					if(imove){
						return
					}
					imove = true
					$next++
					move()
					$point_li.eq($next).addClass('active').siblings().removeClass('active')
				})
				
			})
		</script>
		<style>
			.list{
				margin: 0 auto;
				position: relative;
				height: 333px;
				width: 500px;
				border: 1px solid #000000;
				overflow: hidden;
			}
			.img{
				height: 333px;
				width: 500px;
				list-style: none;
			}
			.img li{
				height: 333px;
				width: 500px;
				position: absolute;
				left: 0px;
				top: 0px;
			}
			.point{
				position: absolute;
				top: 75%;
				left: 50%;
				font-size: 30px;
				color: #F0F0F0;
				list-style: circle;
			}
			.point li{
				float: left;
				margin-left: 20px;
				cursor: pointer;
			}
			.active{
				color: #F0F0F0;
				opacity: 0.5;
				list-style: disc;
			}
			.left, .right{
				font-size: 30px;
				position: absolute;
				top: 20%;
				left: 50%;
				cursor: pointer;
			}
			.left{
				margin-left:-200px ;
			}
			.right{
				margin-left:200px ;
			}
		</style>
	</head>
	<body>
		<div class="list">
			<ul class="img">
				<li><a><img src="../u=11918710,2392753884&fm=26&gp=0.jpg" alt=""></a></li>
				<li><a><img src="../u=2925250590,2669150421&fm=26&gp=0.jpg" alt=""></a></li>
				<li><a><img src="../u=3571666204,3738747682&fm=26&gp=0.jpg" alt=""></a></li>
				<li><a><img src="../u=3841813921,3710409949&fm=26&gp=0.jpg" alt=""></a></li>
			</ul>
			<ul class="point">
			</ul>
			<div class="qwe">
				<span class="left">←</span>
				<span class="right">→</span>
			</div>
		</div>
	</body>
</html>