jquery培训班课程项目换一换代码
其他特效 次 2018-07-06探索jQuery培训班，课程项目丰富多彩，除了经典代码实践，更有创新特效等你来挑战。从基础到进阶，逐步深入，助你掌握jQuery的精髓。赶快加入，开启你的前端开发新篇章！
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>
文件目录
本资源来自：代码 » 其他特效 » jquery培训班课程项目换一换代码
注：此资源非帝国CMS模板/特效/源码，需要帝国CMS整站模板源码的小伙伴，请移步 帝国CMS模板，感谢支持！
jQuery div容器自定义滚动条插件
« 上一篇 2018年06月13日
jquery快捷方式图标视差效果代码
下一篇 » 2018年06月22日
1、如非特殊说明，本站对本文提供的代码或者素材不拥有任何权利，其版权归原著者拥有。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来，仅供学习和研究使用。
3、如有侵犯你版权的，请来信（邮箱:48444431@qq.com）指出，核实后，本站将立即改正。
4、如有链接无法下载、失效或广告，请点击下面的报错或者联系墨鱼处理！
5、以上资源售价只是赞助，不代表代码或者素材本身价格。收取费用仅维持本站的服务器开销！
6、如无特殊说明，如：织梦或者帝国等开源CMS核心模板，那么默认提供的只是HTML模板！
7、所有代码素材效果均为演示打包，最终效果请参考演示效果，本站不提供任何技术支持和服务。
8、代码素材均为虚拟物品，演示和描述无错的情况下，无法进行退换服务。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来，仅供学习和研究使用。
3、如有侵犯你版权的，请来信（邮箱:48444431@qq.com）指出，核实后，本站将立即改正。
4、如有链接无法下载、失效或广告，请点击下面的报错或者联系墨鱼处理！
5、以上资源售价只是赞助，不代表代码或者素材本身价格。收取费用仅维持本站的服务器开销！
6、如无特殊说明，如：织梦或者帝国等开源CMS核心模板，那么默认提供的只是HTML模板！
7、所有代码素材效果均为演示打包，最终效果请参考演示效果，本站不提供任何技术支持和服务。
8、代码素材均为虚拟物品，演示和描述无错的情况下，无法进行退换服务。
