jQuery-ajax-json实现自动+序号+点击轮播图

 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
		<style>
			* {
				padding: 0;
				margin: 0;
				list-style: none
			}

			#wrap {
				width: 960px;
				height: 320px;
				border: 2px solid red;
				margin: 50px auto;
				position: relative;
				overflow: hidden;
			}

			#wrap img {
				width: 960px;
				height: 320px;
			}

			#wrap ul {
				width: 4800px;
				position: absolute;
			}

			#wrap li {
				float: left;
			}

			#wrap p {
				position: absolute;
				bottom: 20px;
				width: 100%;
				text-align: center;
			}

			#wrap span {
				padding: 2px 8px;
				background: blue;
				color: #fff;
				margin-right: 4px;
				cursor: default;
			}

			#wrap .active {
				background: red;
			}

			#wrap .bar {
				position: absolute;
				top: 50%;
				width: 960px;
				height: 80px;
				transform: translateY(-50%);
				overflow: hidden;
			}

			#wrap .bar>div {
				position: absolute;
				width: 60px;
				height: 80px;
				border-radius: 4px;
				opacity: .6;
				background: #eee url(img/btn_show.png) no-repeat 0px -80px;
			}

			#wrap .bar>.right {
				position: absolute;
				right: 0;
				background: #eee url(img/btn_show.png) no-repeat 0px 0px;
			}
		</style>
	</head>
	<body>
		<!--1.可视区：一张图片的大小-->
		<div id="wrap">
			<!--2.图片列表-->
			<ul>
				<!-- <li><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
            <li><img src="img/4.jpg" alt=""></li> -->
			</ul>
			<p>
				<!-- <span class="active">1</span><span>2</span><span>3</span><span>4</span> -->
			</p>
			<div class="bar">
				<div class="left"></div>
				<div class="right"></div>
			</div>
		</div>
		<script src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
		<script src="./js/lun-jqajax.js"></script>
	</body>
</html>

js

$(function() {
	//jQuery-Ajax数据请求 ./data/img.json
	$.get('./data/img.json', function(res) {
		// console.log(res)
		$.each(res, function(idx, item) {
			console.log(idx, item)
			var $li = $('<li><img src="' + item + '" alt=""></li>');
			$('ul').append($li);
			var $span = $('<span>' + (idx + 1) + '</span>');
			$('p').append($span);
		})
		//初始默认样式 宽
		$('p').children('span:nth-child(1)').addClass('active');
		$('ul').width(res.length * $('li').width());

		var n = 0;

		function auto() {
			if (n >= res.length) {
				$('ul').animate({left: 0}, 0);
				n = 0;
			}
			n++;
			//图片移动
			var end = -n * $('li').width();
			$('ul').animate({left: end}, 2000);
			//序号移动
			$('span').removeClass('active');
			if (n >= res.length) {
				$('span:nth-child(1)').addClass('active');
			} else {
				$('span:nth-child(' + (n + 1) + ')').addClass('active');
			}
		}
		
		//无缝轮播
		var $fade = $('li:nth-child(1)').clone(true);
		$('ul').append($fade);
		$('ul').width($('ul li').length * $('li').width());

		//序号切换
		$('span').on('mouseover', function(ev) {
			n = $(ev.target).text()-1;
			// console.log(this,$(ev.target).text(),end)
			var end = -n * $('li').width();
			$('ul').animate({left: end}, 1500);
			//序号移动
			$('span').removeClass('active');
			if (n >= res.length) {
				$('span:nth-child(1)').addClass('active');
			} else {
				$('span:nth-child(' + (n + 1) + ')').addClass('active');
			}
		});
		
		//箭头轮播
		$('.bar').on('click','.left,.right',function(){
			if($(this).hasClass('left')){
				if(n<=0){
					$('ul').animate({left: -(res.length * $('li').width())}, 0);
					n = res.length;
				}
				n--;
				var end = -n * $('li').width();
				$('ul').animate({left: end}, 1500);
				$('span').removeClass('active');
				if (n >= res.length) {
					$('span:nth-child(1)').addClass('active');
				} else {
					$('span:nth-child(' + (n + 1) + ')').addClass('active');
				}
			}else if($(this).hasClass('right')){
				auto();
			}
		})
		
		//开始自动动画
		var timer = setInterval(auto, 3000);

		//鼠标移入 合并
		$('#wrap').hover(function() {
			clearInterval(timer);
		}, function() {
			timer = setInterval(auto, 3000);
		});
	})
})

 

posted @ 2020-04-25 21:32  JackieDYH  阅读(4)  评论(0)  编辑  收藏  举报  来源