jquery培训班课程项目换一换代码

jquery培训班课程项目换一换代码

收藏
jquery培训班课程项目换一换代码
jquery 实现培训班课程时间换一换特效,点击换一换 切换一批效果 。默认设置8个项目为一组,点击换一换按钮切换下一组8个项目,结构简单清晰,下载即可使用。
  • 软件 Dreamweaver
  • 格式 HTML
  • 作者 歪秀
  • 上传时间 7年前

使用方法:

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>

使用声明

1. 本站所有素材(未指定商用),仅限学习交流请勿用于商业用途。
2. 会员在本站下载的原创商用和VIP素材后,只拥有使用权,著作权归原作者及17素材网所有。
3. 原创商用和VIP素材,未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。