jquery左右透明遮罩图片左右切换特效代码下载


jquery左右透明遮罩图片左右切换特效代码下载
jquery左右透明遮罩图片左右切换特效代码下载以及左右透明遮罩、图片左右切换等js/jquery网页特效代码下载。

1. 引入CSS

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

2. 引入JS

<script src="js/jquery-1.11.1.min.js"></script>

3. HTML代码

	<div class="teachers_team ov pr clearfix">
		<div class="teachers_team_tit tc ">团队风采</div>
		<div class="teachers_list pr">
			<div class="teachers_scroll roll-box">
				<a class="prev" id="prev" href="javascript:;"></a>
				<div class="teachers_box sp-box roll-content ">
					<ul class="teachers-cont">
						<li class="on">
							<a href="javascript:;">
								<h3><strong>【张三三】</strong>资深前端工程师,常用昵称”大花“</h3>
								<img src="images/1.jpg" alt="">
							</a>
							<span></span>
							<div class="teachers_infobg"></div>
							<p class="teachers_info fsize_20"><strong class="fsize_24">张三三:</strong>申论、面试讲师,17landing创始人,多年潜心修炼,教学返璞归真,打破公考培训诸多弊端,坚信“一切不能提高成绩的培训都是耍流氓”,致力于提供国内最好的教学,理想是创立一所太湖大学堂式的新式学校。</p>
						</li>
						<li>
							<a href="javascript:;">
								<h3><strong>【李四四】</strong>资深前端工程师,常用昵称”二花“</h3>
								<img src="images/2.jpg" alt="">
							</a>
							<span></span>
							<div class="teachers_infobg"></div>
							<p class="teachers_info fsize_20"><strong class="fsize_24">李四四:</strong>数量和资料、面试讲师,多次国考省考行测80+高分,且数量和资料往往只错1题,故称“马一题”,又因及其擅长用方程等基础方法快速而准确地解答各类数量题型,又被称“马方程”。教学方法多有独到之处,教学过程轻松愉悦。</p>
						</li>
						<li>
							<a href="javascript:;">
								<h3><strong>【王五五】</strong>资深前端工程师,常用昵称”小花“</h3>
								<img src="images/3.jpg" alt="">
							</a>
							<span></span>
							<div class="teachers_infobg"></div>
							<p class="teachers_info fsize_20"><strong class="fsize_24">王五五:</strong>言语理解、判断推理、面试讲师,号称智商140的美少女,创过业,考过公,两周准备考公就笔面第一,实战派教学,简单实用,言辞犀利,直指要害,公考途中不可多得良师。</p>
						</li>
						<li>
							<a href="javascript:;">
								<h3><strong>【麻六六】</strong>资深前端工程师,常用昵称”小小花“</h3>
								<img src="images/4.jpg" alt="">
							</a>
							<span></span>
							<div class="teachers_infobg"></div>
							<p class="teachers_info fsize_20"><strong class="fsize_24">麻六六:</strong>申论、面试讲师,多次进面,现为在职公务员,某单位笔杆子,长期从事文件起草及稿件撰写,文笔优美,功底深厚,且实战经验丰富,注重因材施教,点石成金,能根据学生个人情况提供针对性指导,效果显著。</p>
						</li>
					</ul>
				</div>
				<a class="next" id="next" href="javascript:;"></a>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function(){
			$(".teachers_team").css("width",$(window).width());
			$(window).resize(function(e) {
				$(".teachers_team").css("width",$(window).width());
			});
			//li的个数
			var len=$(".teachers-cont li").length;
			//向左箭头
			$("#prev").on("click",function(){
				//获取当前li的index
				var cur=$(".teachers-cont li[class='on']").index();
				//如果不是第一个
				if(cur!=0){
					$(".teachers-cont li").eq(cur-1).addClass("on").siblings().removeClass("on");
					$(".teachers_box").animate({marginLeft:"-"+(cur-1)*600+"px"});
				}else{
					return;
				}
			});
			//向右箭头
			$("#next").on("click",function(){
				//获取当前li的index
				var cur=$(".teachers-cont li[class='on']").index();
				//如果不是最后一个
				if(cur!=(len-1)){
					$(".teachers-cont li").eq(cur+1).addClass("on").siblings().removeClass("on");
					$(".teachers_box").animate({marginLeft:"-"+(cur+1)*600+"px"});
				}else{
					return;
				}
			});
		})
	</script>

相关推荐

发表评论

相关文章