jquery 实现培训班课程时间换一换特效，点击换一换 切换一批效果 。默认设置8个项目为一组，点击换一换按钮切换下一组8个项目，结构简单清晰，下载即可使用。

使用方法

1、head引入css文件

<link type="text/css" rel="stylesheet" href="css/style.css">

2、head引入js文件

<script type="text/javascript" src="js/jquery.js"></script>

3、body引入HTML代码

<div class="like-content">
	<div class="clearfix">
		<div class="like-fl">
			<img src="images/like-bg.png" alt="">
		</div>
		<div class="guess-box">
			<ul>
				<li class="guess-item">
					<a href="javascript:;">
						<p class="guess-item-text">初二语文秋季目标班</p>
						<p class="clearfix guess-mba">
							<span class="icon-add"></span>
							<span class="icon-til">北京,石园,顺义石园</span>
						</p>
						<p class="clearfix">
							<span class="icon-time"></span>
							<span class="icon-til">2018-09-15至2019-01-05</span>
						</p>
						<p class="price">￥3280</p>
					</a>
				</li>
				<li class="guess-item">
					<a href="javascript:;">
						<p class="guess-item-text">初一语文秋季目标班</p>
						<p class="clearfix guess-mba">
							<span class="icon-add"></span>
							<span class="icon-til">北京,大钟寺,海淀大</span>
						</p>
						<p class="clearfix">
							<span class="icon-time"></span>
							<span class="icon-til">2018-09-16至2019-01-06</span>
						</p>
						<p class="price">￥1980</p>
					</a>
				</li>
				<li class="guess-item">
					<a href="javascript:;">
						<p class="guess-item-text">高二数学秋季尖子班</p>
						<p class="clearfix guess-mba">
							<span class="icon-add"></span>
							<span class="icon-til">北京,东四,东城东四</span>
						</p>
						<p class="clearfix">
							<span class="icon-time"></span>
							<span class="icon-til">2018-09-15至2019-01-05</span>
						</p>
						<p class="price">￥2899</p>
					</a>
				</li>
				<li class="guess-item">
					<a href="javascript:;">
						<p class="guess-item-text">初二英语秋季目标班</p>
						<p class="clearfix guess-mba">
							<span class="icon-add"></span>
							<span class="icon-til">北京,通州梨园,通州</span>
						</p>
						<p class="clearfix">
							<span class="icon-time"></span>
							<span class="icon-til">2018-09-15至2019-01-05</span>
						</p>
						<p class="price">￥1980</p>
					</a>
				</li>
				<li class="guess-item">
					<a href="javascript:;">
						<p class="guess-item-text">初一数学秋季目标班</p>
						<p class="clearfix guess-mba">
							<span class="icon-add"></span>
							<span class="icon-til">北京,知春路,中关村</span>
						</p>
						<p class="clearfix">
							<span class="icon-time"></span>
							<span class="icon-til">2018-09-15至2019-01-05</span>
						</p>
						<p class="price">￥2980</p>
					</a>
				</li>
				<li class="guess-item">
					<a href="javascript:;">
						<p class="guess-item-text">高二化学秋季精英班(选修</p>
						<p class="clearfix guess-mba">
							<span class="icon-add"></span>
							<span class="icon-til">北京,永定路,海淀玉</span>
						</p>
						<p class="clearfix">
							<span class="icon-time"></span>
							<span class="icon-til">2018-09-15至2019-01-05</span>
						</p>
						<p class="price">￥1980</p>
					</a>
				</li>
				<li class="guess-item">
					<a href="javascript:;">
						<p class="guess-item-text">初二语文秋季目标班</p>
						<p class="clearfix guess-mba">
							<span class="icon-add"></span>
							<span class="icon-til">北京,远大路,海淀远</span>
						</p>
						<p class="clearfix">
							<span class="icon-time"></span>
							<span class="icon-til">2018-09-16至2019-01-06</span>
						</p>
						<p class="price">￥1890</p>
					</a>
				</li>
				<li class="guess-item">
					<a href="javascript:;">
						<p class="guess-item-text">初一语文秋季目标班</p>
						<p class="clearfix guess-mba">
							<span class="icon-add"></span>
							<span class="icon-til">北京,石园,顺义石园</span>
						</p>
						<p class="clearfix">
							<span class="icon-time"></span>
							<span class="icon-til">2018-09-15至2019-01-05</span>
						</p>
						<p class="price">￥1980</p>
					</a>
				</li>
				<li class="guess-item">
					<a href="javascript:;">
						<p class="guess-item-text">初二化学秋季目标班(二阶</p>
						<p class="clearfix guess-mba">
							<span class="icon-add"></span>
							<span class="icon-til">北京,中关村,中关村</span>
						</p>
						<p class="clearfix">
							<span class="icon-time"></span>
							<span class="icon-til">2018-09-16至2019-01-06</span>
						</p>
						<p class="price">￥1888</p>
					</a>
				</li>
				<li class="guess-item">
					<a href="javascript:;">
						<p class="guess-item-text">初二语文秋季目标班</p>
						<p class="clearfix guess-mba">
							<span class="icon-add"></span>
							<span class="icon-til">北京,石园,顺义石园</span>
						</p>
						<p class="clearfix">
							<span class="icon-time"></span>
							<span class="icon-til">2018-09-15至2019-01-05</span>
						</p>
						<p class="price">￥3280</p>
					</a>
				</li>
				<li class="guess-item">
					<a href="javascript:;">
						<p class="guess-item-text">初二语文秋季目标班</p>
						<p class="clearfix guess-mba">
							<span class="icon-add"></span>
							<span class="icon-til">北京,石园,顺义石园</span>
						</p>
						<p class="clearfix">
							<span class="icon-time"></span>
							<span class="icon-til">2018-09-15至2019-01-05</span>
						</p>
						<p class="price">￥3280</p>
					</a>
				</li>
				<li class="guess-item">
					<a href="javascript:;">
						<p class="guess-item-text">初二语文秋季目标班</p>
						<p class="clearfix guess-mba">
							<span class="icon-add"></span>
							<span class="icon-til">北京,石园,顺义石园</span>
						</p>
						<p class="clearfix">
							<span class="icon-time"></span>
							<span class="icon-til">2018-09-15至2019-01-05</span>
						</p>
						<p class="price">￥3280</p>
					</a>
				</li>
				<li class="guess-item">
					<a href="javascript:;">
						<p class="guess-item-text">初二语文秋季目标班</p>
						<p class="clearfix guess-mba">
							<span class="icon-add"></span>
							<span class="icon-til">北京,石园,顺义石园</span>
						</p>
						<p class="clearfix">
							<span class="icon-time"></span>
							<span class="icon-til">2018-09-15至2019-01-05</span>
						</p>
						<p class="price">￥3280</p>
					</a>
				</li>
				<li class="guess-item">
					<a href="javascript:;">
						<p class="guess-item-text">初二语文秋季目标班</p>
						<p class="clearfix guess-mba">
							<span class="icon-add"></span>
							<span class="icon-til">北京,石园,顺义石园</span>
						</p>
						<p class="clearfix">
							<span class="icon-time"></span>
							<span class="icon-til">2018-09-15至2019-01-05</span>
						</p>
						<p class="price">￥3280</p>
					</a>
				</li>
				<li class="guess-item">
					<a href="javascript:;">
						<p class="guess-item-text">初二语文秋季目标班</p>
						<p class="clearfix guess-mba">
							<span class="icon-add"></span>
							<span class="icon-til">北京,石园,顺义石园</span>
						</p>
						<p class="clearfix">
							<span class="icon-time"></span>
							<span class="icon-til">2018-09-15至2019-01-05</span>
						</p>
						<p class="price">￥3280</p>
					</a>
				</li>
				<li class="guess-item">
					<a href="javascript:;">
						<p class="guess-item-text">高二数学秋季尖子班</p>
						<p class="clearfix guess-mba">
							<span class="icon-add"></span>
							<span class="icon-til">北京,东四,东城东四</span>
						</p>
						<p class="clearfix">
							<span class="icon-time"></span>
							<span class="icon-til">2018-09-15至2019-01-05</span>
						</p>
						<p class="price">￥2899</p>
					</a>
				</li>
				<li class="guess-item">
					<a href="javascript:;">
						<p class="guess-item-text">初二语文秋季目标班</p>
						<p class="clearfix guess-mba">
							<span class="icon-add"></span>
							<span class="icon-til">北京,石园,顺义石园</span>
						</p>
						<p class="clearfix">
							<span class="icon-time"></span>
							<span class="icon-til">2018-09-15至2019-01-05</span>
						</p>
						<p class="price">￥3280</p>
					</a>
				</li>
				<li class="guess-item">
					<a href="javascript:;">
						<p class="guess-item-text">初一语文秋季目标班</p>
						<p class="clearfix guess-mba">
							<span class="icon-add"></span>
							<span class="icon-til">北京,大钟寺,海淀大</span>
						</p>
						<p class="clearfix">
							<span class="icon-time"></span>
							<span class="icon-til">2018-09-16至2019-01-06</span>
						</p>
						<p class="price">￥1980</p>
					</a>
				</li>
				<li class="guess-item">
					<a href="javascript:;">
						<p class="guess-item-text">高二数学秋季尖子班</p>
						<p class="clearfix guess-mba">
							<span class="icon-add"></span>
							<span class="icon-til">北京,东四,东城东四</span>
						</p>
						<p class="clearfix">
							<span class="icon-time"></span>
							<span class="icon-til">2018-09-15至2019-01-05</span>
						</p>
						<p class="price">￥2899</p>
					</a>
				</li>
				<li class="guess-item">
					<a href="javascript:;">
						<p class="guess-item-text">初二英语秋季目标班</p>
						<p class="clearfix guess-mba">
							<span class="icon-add"></span>
							<span class="icon-til">北京,通州梨园,通州</span>
						</p>
						<p class="clearfix">
							<span class="icon-time"></span>
							<span class="icon-til">2018-09-15至2019-01-05</span>
						</p>
						<p class="price">￥1980</p>
					</a>
				</li>
				<li class="guess-item">
					<a href="javascript:;">
						<p class="guess-item-text">初一数学秋季目标班</p>
						<p class="clearfix guess-mba">
							<span class="icon-add"></span>
							<span class="icon-til">北京,知春路,中关村</span>
						</p>
						<p class="clearfix">
							<span class="icon-time"></span>
							<span class="icon-til">2018-09-15至2019-01-05</span>
						</p>
						<p class="price">￥2980</p>
					</a>
				</li>
				<li class="guess-item">
					<a href="javascript:;">
						<p class="guess-item-text">高二化学秋季精英班(选修</p>
						<p class="clearfix guess-mba">
							<span class="icon-add"></span>
							<span class="icon-til">北京,永定路,海淀玉</span>
						</p>
						<p class="clearfix">
							<span class="icon-time"></span>
							<span class="icon-til">2018-09-15至2019-01-05</span>
						</p>
						<p class="price">￥1980</p>
					</a>
				</li>
				<li class="guess-item">
					<a href="javascript:;">
						<p class="guess-item-text">初二语文秋季目标班</p>
						<p class="clearfix guess-mba">
							<span class="icon-add"></span>
							<span class="icon-til">北京,远大路,海淀远</span>
						</p>
						<p class="clearfix">
							<span class="icon-time"></span>
							<span class="icon-til">2018-09-16至2019-01-06</span>
						</p>
						<p class="price">￥1890</p>
					</a>
				</li>
				<li class="guess-item">
					<a href="javascript:;">
						<p class="guess-item-text">初一语文秋季目标班</p>
						<p class="clearfix guess-mba">
							<span class="icon-add"></span>
							<span class="icon-til">北京,石园,顺义石园</span>
						</p>
						<p class="clearfix">
							<span class="icon-time"></span>
							<span class="icon-til">2018-09-15至2019-01-05</span>
						</p>
						<p class="price">￥1980</p>
					</a>
				</li>
			</ul>
			<div class="guess-switch">
				<a href="javascript:void(0)">
					<span class="switch">换一批</span>
				</a>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">

	var changeindex=1;
	var clickindex=2;
	$(".guess-box li").each(function(index,element){
		if(index/8<changeindex){

			element.className="change"+changeindex;
		}else{
			changeindex++;
			element.className="change"+changeindex;
		}
	})
	$(".change1").siblings().css("display","none");
	$(".change1").show();
	$(".switch").click(function(){
		if(clickindex<=changeindex){
			$(".change"+clickindex).siblings().css("display","none");
			$(".change"+clickindex).show();
			clickindex++;
		}else{
			clickindex=1;
			$(".change"+clickindex).siblings().css("display","none");
			$(".change"+clickindex).show();
		}

	});
</script>

资源出处：https://www.moyublog.com/codes/10652.html