jQuery屏幕焦点图轮播滚动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery屏幕焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh-CN">
<head profile="http://gmpg.org/xfn/11">
<meta charset="UTF-8">
<title>jQuery屏幕焦点图切换</title>
<style>
/*css reset*/
html,body,div,span,h1,h2,h3,h4,p,form,img,b,i,ul,li,ol,label,aside,footer,header,nav,section,figure{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;color:#333;}
body{line-height:1;font:12px/1.5 "Microsoft YaHei","微软雅黑" !important;}
a{outline:none;}
/*content start*/
#container{position:absolute;background:url(images/screen.png) no-repeat;width:776px;height:600px;top:50%;margin-top:-300px;left:50%;margin-left:-388px;}
#container h1 a{font-size:30px;position:absolute;top:-60px;width:100%;text-align:center;text-shadow:0px 0px 1px rgba(0,0,0,0.7);text-decoration:none;color:#333;}

#scroll{width:744px;height:419px;overflow:hidden;position:absolute;left:17px;top:14px;}
/* prev and next btn style */
.btn{position:absolute;top:170px;width:83px;height:141px;display:block;overflow:hidden;background:url(images/arrows.png) no-repeat;cursor:pointer;text-indent:-999em;}
#btn_prev{left:-100px;}
#btn_next{right:-100px;background-position:right bottom;}
/* slider bar start*/
#slider_bar{width:100%;height:22px;position:absolute;bottom:135px;text-align:center;}
#slider_bar a{width:16px;height:22px;display:inline-block;overflow:hidden;background:url(images/bullets.png) no-repeat;margin:0px 3px;}
#slider_bar a.cur,#slider_bar a:hover{background-position:0px -21px;}

#scroll .child{width:744px;height:419px;position:absolute;top:0px;left:744px;z-index:10;display:block;}
#scroll .child img{width:744px;height:419px;}
#scroll_wrapper{position:relative;top:0px;}

</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/pislider.js"></script>
<script>
$(function(){
	$("#scroll").pislider({
		child:"child",
		slider_bar:"slider_bar",
		scrollTime:500,
		autoScroll:"true",
		autoTime:7000
	});
})
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>

<div id="container">
	<div id="scroll">
		<div class="child"><a href="#"><img src="images/img1.jpg" /></a></div>
		<div class="child"><a href="#"><img src="images/img2.jpg" /></a></div>
		<div class="child"><a href="#"><img src="images/img3.jpg" /></a></div>
		<div class="child"><a href="#"><img src="images/img4.jpg" /></a></div>
		<div class="child"><a href="#"><img src="images/img5.jpg" /></a></div>
	</div>
	<a href="#" id="btn_prev" class="btn">prev</a>
	<a href="#" id="btn_next" class="btn">next</a>
	<div id="slider_bar"></div>
</div>
</body>
</html>

JS代码(pislider.js):

(function($){
	$.fn.pislider=function(options){
	var defaults={
	child:"child",slider_bar:"slider_bar",scrollTime:500,autoScroll:"true",autoTime:7000}
;
	var options=$.extend(defaults,options);
	var _this=$(this);
	var child=_this.find("."+options.child);
	var slider_bar=$("#"+options.slider_bar);
	var len=child.length-1;
	child.wrapAll("<div id=scroll_wrapper></div>");
	var width=child.width();
	var two_width=width*2;
	var thr_width=width*3;
	var wrap=$("#scroll_wrapper");
	wrap.css({
	width:thr_width+"px",left:-width+"px"}
);
	child.not(":first").hide();
	function noMove(){
	if(!wrap.is(":animated")){
	return true;
}
else{
	return false;
}
;
}
;
	child.each(function(index){
	if(index==0){
	slider_bar.append("<a href='#' class='cur'></a>");
}
else{
	slider_bar.append("<a href='#'></a>");
}
;
}
);
	var cur_a=slider_bar.find("a.cur");
	slider_bar.find("a").click(function(){
	var clickIndex=$(this).index();
	var nowIndex=slider_bar.find("a.cur").index();
	if(noMove()){
	if (clickIndex > nowIndex){
	scroll(clickIndex,two_width);
}
else if(clickIndex < nowIndex){
	scroll(clickIndex,"0");
}
else{
	return false;
}
;
}
;
	return false;
}
);
	function scroll(num,scroll_width){
	slider_bar.find("a").eq(num).addClass("cur").siblings().removeClass("cur");
	child.eq(num).show().css({
	left:scroll_width+"px"}
);
	wrap.animate({
	left:-scroll_width+"px"}
,options.scrollTime,function(){
	child.eq(num).css({
	left:width+"px"}
).siblings().hide();
	wrap.css({
	left:-width+"px"}
);
}
);
}
;
	$("#btn_prev").click(function(){
	var curIndex=slider_bar.find("a.cur").index();
	if(noMove()){
	if (curIndex == 0){
	scroll(len,"0");
}
else{
	slider_bar.find("a.cur").prev("a").trigger("click");
}
;
}
;
	return false;
}
);
	$("#btn_next").click(function(){
	var curIndex=slider_bar.find("a.cur").index();
	if(noMove()){
	if (curIndex == len){
	scroll("0",two_width);
}
else{
	slider_bar.find("a.cur").next("a").trigger("click");
}
;
}
;
	return false;
}
);
	if(options.autoScroll=="true"){
	autoScroll=setInterval(function(){
	$("#btn_next").trigger("click")}
,options.autoTime);
	autoPlay=function(){
	autoScroll=setInterval(function(){
	$("#btn_next").trigger("click")}
,options.autoTime);
}
;
	stopPlay=function(){
	clearInterval(autoScroll);
}
;
	_this.hover(stopPlay,autoPlay);
	$("#btn_prev,#btn_next").hover(stopPlay,autoPlay);
}
;
}
;
}
)(jQuery);

附件:下载该文件资源,减少时间成本(增值服务)