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>
