jQuery焦点图蓝色箭头按钮切换特效代码



8 31 11



特效描述:焦点图 蓝色箭头 按钮切换,jQuery焦点图蓝色箭头按钮切换特效代码

代码结构

1. 引入JS

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

2. HTML代码

<div class="box">
	<div class="list">
		<ul>
			<li class="p7"><a href="#"><img src="img/1.png" alt="" /></a></li>
			<li class="p6"><a href="#"><img src="img/2.png" alt="" /></a></li>
			<li class="p5"><a href="#"><img src="img/3.png" alt="" /></a></li>
			<li class="p4"><a href="#"><img src="img/44.jpg" alt="" /></a></li>
			<li class="p3"><a href="#"><img src="img/55.jpg" alt="" /></a></li>
			<li class="p2"><a href="#"><img src="img/66.jpg" alt="" /></a></li>
			<li class="p1"><a href="#"><img src="img/77.jpg" alt="" /></a></li>
		</ul>
	</div>
	<a href="javascript:;" class="prev btn"><</a>
	<a href="javascript:;" class="next btn">></a>
	<div class="buttons">
		<a href="javascript:;"><span class="blue"></span></a>
		<a href="javascript:;"><span></span></a>
		<a href="javascript:;"><span></span></a>
		<a href="javascript:;"><span></span></a>
		<a href="javascript:;"><span></span></a>
		<a href="javascript:;"><span></span></a>
		<a href="javascript:;"><span></span></a>
	</div>
</div>
<script type="text/javascript">
var $a=$(".buttons a");
var $s=$(".buttons span");
var cArr=["p7","p6","p5","p4","p3","p2","p1"];
var index=0;
$(".next").click(
	function(){
	nextimg();
	}
)
$(".prev").click(
	function(){
	previmg();
	}
)
//上一张
function previmg(){
	cArr.unshift(cArr[6]);
	cArr.pop();
	//i是元素的索引,从0开始
	//e为当前处理的元素
	//each循环,当前处理的元素移除所有的class,然后添加数组索引i的class
	$("li").each(function(i,e){
		$(e).removeClass().addClass(cArr[i]);
	})
	index--;
	if (index<0) {
		index=6;
	}
	show();
}
//下一张
function nextimg(){
	cArr.push(cArr[0]);
	cArr.shift();
	$("li").each(function(i,e){
		$(e).removeClass().addClass(cArr[i]);
	})
	index++;
	if (index>6) {
		index=0;
	}
	show();
}
//通过底下按钮点击切换
$a.each(function(){
	$(this).click(function(){
		var myindex=$(this).index();
		var b=myindex-index;
		if(b==0){
			return;
		}
		else if(b>0) {
			/*
			 * splice(0,b)的意思是从索引0开始,取出数量为b的数组
			 * 因为每次点击之后数组都被改变了,所以当前显示的这个照片的索引才是0
			 * 所以取出从索引0到b的数组,就是从原本的这个照片到需要点击的照片的数组
			 * 这时候原本的数组也将这部分数组进行移除了
			 * 再把移除的数组添加的原本的数组的后面
			 */
			var newarr=cArr.splice(0,b);
			cArr=$.merge(cArr,newarr);
			$("li").each(function(i,e){
			$(e).removeClass().addClass(cArr[i]);
			})
			index=myindex;
			show();
		}
		else if(b<0){
			/*
			 * 因为b<0,所以取数组的时候是倒序来取的,也就是说我们可以先把数组的顺序颠倒一下
			 * 而b现在是负值,所以取出索引0到-b即为需要取出的数组
			 * 也就是从原本的照片到需要点击的照片的数组
			 * 然后将原本的数组跟取出的数组进行拼接
			 * 再次倒序,使原本的倒序变为正序
			 */
			cArr.reverse();
			var oldarr=cArr.splice(0,-b)
			cArr=$.merge(cArr,oldarr);
			cArr.reverse();
			$("li").each(function(i,e){
			$(e).removeClass().addClass(cArr[i]);
			})
			index=myindex;
			show();
		}
	})
})
//改变底下按钮的背景色
function show(){
		$($s).eq(index).addClass("blue").parent().siblings().children().removeClass("blue");
}
//点击class为p2的元素触发上一张照片的函数
$(document).on("click",".p2",function(){
	previmg();
	return false;//返回一个false值,让a标签不跳转
});
//点击class为p4的元素触发下一张照片的函数
$(document).on("click",".p4",function(){
	nextimg();
	return false;
});
//			鼠标移入box时清除定时器
$(".box").mouseover(function(){
	clearInterval(timer);
})
//			鼠标移出box时开始定时器
$(".box").mouseleave(function(){
	timer=setInterval(nextimg,4000);
})
//			进入页面自动开始定时器
timer=setInterval(nextimg,4000);
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动导航菜单 图片头像上传 带标题的焦点图 滑动选项卡切换 文件上传 带缩略图的幻灯片 带简介的焦点图 图片滑动 文本框 图片轮播 文字滑动 下拉框 自动滚动图片轮播 滑动手风琴 复选 马赛克幻灯片 滑动星星打分 单选 全屏焦点图 登录框 注册框 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 滑动滑过 flash焦点图 切换按钮 form表单 焦点图幻灯片

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到