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

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

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

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

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>jQuery touchSlider满屏焦点图</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.event.drag-1.5.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSlider.js"></script>
<link href="css/common.css" rel="stylesheet"/>
<script type="text/javascript">
$(document).ready(function () {
	$(".main_visual").hover(function(){
		$("#btn_prev,#btn_next").fadeIn()
		},function(){
		$("#btn_prev,#btn_next").fadeOut()
		})
	$dragBln = false;
	$(".main_image").touchSlider({
		flexible : true,
		speed : 200,
		btn_prev : $("#btn_prev"),
		btn_next : $("#btn_next"),
		paging : $(".flicking_con a"),
		counter : function (e) {
			$(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on");
		}
	});
	$(".main_image").bind("mousedown", function() {
		$dragBln = false;
	})
	$(".main_image").bind("dragstart", function() {
		$dragBln = true;
	})
	$(".main_image a").click(function() {
		if($dragBln) {
			return false;
		}
	})
	timer = setInterval(function() { $("#btn_next").click();}, 5000);
	$(".main_visual").hover(function() {
		clearInterval(timer);
	}, function() {
		timer = setInterval(function() { $("#btn_next").click();}, 5000);
	})
	$(".main_image").bind("touchstart", function() {
		clearInterval(timer);
	}).bind("touchend", function() {
		timer = setInterval(function() { $("#btn_next").click();}, 5000);
	})
});
</script>
</head>
<body>
		<div class="main_visual">
                <div class="flicking_con">
                	<div class="flicking_inner">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                    <a href="#">4</a>
                    <a href="#">5</a>
               	 </div>
            </div>
			<div class="main_image">
				<ul>					
					<li><span class="img_3"></span></li>
					<li><span class="img_4"></span></li>
					<li><span class="img_1"></span></li>
					<li><span class="img_2"></span></li>
					<li><span class="img_5"></span></li>
				</ul>
				<a href="javascript:;" id="btn_prev"></a>
				<a href="javascript:;" id="btn_next"></a>
			</div>
			</div>
</body>
</html>

JS代码(jquery.touchSlider.js):

/** * @namejQuery.touchSlider * @version201209_2 * @since201106 * @param Objectsettings환경변수 오브젝트 *roll-순환 (default true) *flexible-유동 레이아웃 (default false) *view-다중 컬럼 (default 1) *speed-애니메이션 속도 (default 75) *range-넘김 판정 범위 (default 0.15) *page-초기 페이지 (default 1) *transition-CSS3 transition 사용 (default false) *btn_prev-prev 버튼 (jQuery Object,default null) *btn_next-next 버튼 (jQuery Object,default null) *paging-page 버튼 (jQuery Object,default null) *initComplete-초기화 콜백 *counter-슬라이드 콜백,카운터 * * @example$("#target").touchSlider({
	flexible:true}
);
	*/
(function ($){
	$.fn.touchSlider = function (settings){
	settings.supportsCssTransitions = (function (style){
	var prefixes = ['Webkit','Moz','Ms'];
	for(var i=0,l=prefixes.length;
	i < l;
	i++ ){
	if( typeof style[prefixes[i] + 'Transition'] !== 'undefined'){
	return true;
}
}
return false;
}
)(document.createElement('div').style);
	settings = jQuery.extend({
	roll:true,flexible:false,btn_prev:null,btn_next:null,paging:null,speed:75,view:1,range:0.15,page:1,transition:false,initComplete:null,counter:null,multi:false}
,settings);
	var opts = [];
	opts = $.extend({
}
,$.fn.touchSlider.defaults,settings);
	return this.each(function (){
	$.fn.extend(this,touchSlider);
	var _this = this;
	this.opts = opts;
	this._view = this.opts.view;
	this._speed = this.opts.speed;
	this._tg = $(this);
	this._list = this._tg.children().children();
	this._width = parseInt(this._tg.css("width"));
	this._item_w = parseInt(this._list.css("width"));
	this._len = this._list.length;
	this._range = this.opts.range * this._width;
	this._pos = [];
	this._start = [];
	this._startX = 0;
	this._startY = 0;
	this._left = 0;
	this._top = 0;
	this._drag = false;
	this._scroll = false;
	this._btn_prev;
	this._btn_next;
	this.init();
	$(this).bind("touchstart",this.touchstart).bind("touchmove",this.touchmove).bind("touchend",this.touchend).bind("dragstart",this.touchstart).bind("drag",this.touchmove).bind("dragend",this.touchend)$(window).bind("orientationchange resize",function (){
	_this.resize(_this);
}
);
}
);
}
;
	var touchSlider ={
	init:function (){
	var _this = this;
	$(this).children().css({
	"width":this._width + "px","overflow":"visible"}
);
	if(this.opts.flexible) this._item_w = this._width / this._view;
	if(this.opts.roll) this._len = Math.ceil(this._len / this._view) * this._view;
	var page_gap = (this.opts.page > 1 && this.opts.page <= this._len) ? (this.opts.page - 1) * this._item_w:0;
	for(var i=0;
	i<this._len;
	++i){
	this._pos[i] = this._item_w * i - page_gap;
	this._start[i] = this._pos[i];
	this._list.eq(i).css({
	"float":"none","display":"block","position":"absolute","top":"0","left":this._pos[i] + "px","width":this._item_w + "px"}
);
	if(this.opts.supportsCssTransitions && this.opts.transition){
	this._list.eq(i).css({
	"-moz-transition":"0ms","-moz-transform":"","-ms-transition":"0ms","-ms-transform":"","-webkit-transition":"0ms","-webkit-transform":"","transition":"0ms","transform":""}
);
}
}
if(this.opts.btn_prev && this.opts.btn_next){
	this.opts.btn_prev.bind("click",function(){
	_this.animate(1,true);
	return false;
}
)this.opts.btn_next.bind("click",function(){
	_this.animate(-1,true);
	return false;
}
);
}
if(this.opts.paging){
	$(this._list).each(function (i,el){
	//var btn_page = _this.opts.paging.eq(0).clone();
	var btn_page = _this.opts.paging.eq(i);
	//_this.opts.paging.before(btn_page);
	btn_page.bind("click",function(e){
	_this.go_page(i,e);
	return false;
}
);
}
);
	//this.opts.paging.remove();
}
this.counter();
	this.initComplete();
}
,initComplete:function (){
	if(typeof(this.opts.initComplete) == "function"){
	this.opts.initComplete(this);
}
}
,resize:function (e){
	if(e.opts.flexible){
	var tmp_w = e._item_w;
	e._width = parseInt(e._tg.css("width"));
	e._item_w = e._width / e._view;
	e._range = e.opts.range * e._width;
	for(var i=0;
	i<e._len;
	++i){
	e._pos[i] = e._pos[i] / tmp_w * e._item_w;
	e._start[i] = e._start[i] / tmp_w * e._item_w;
	e._list.eq(i).css({
	"left":e._pos[i] + "px","width":e._item_w + "px"}
);
	if(this.opts.supportsCssTransitions && this.opts.transition){
	e._list.eq(i).css({
	"-moz-transition":"0ms","-moz-transform":"","-ms-transition":"0ms","-ms-transform":"","-webkit-transition":"0ms","-webkit-transform":"","transition":"0ms","transform":""}
);
}
}
}
this.counter();
}
,touchstart:function (e){
	if((e.type == "touchstart" && e.originalEvent.touches.length <= 1) || e.type == "dragstart"){
	this._startX = e.pageX || e.originalEvent.touches[0].pageX;
	this._startY = e.pageY || e.originalEvent.touches[0].pageY;
	this._scroll = false;
	this._start = [];
	for(var i=0;
	i<this._len;
	++i){
	this._start[i] = this._pos[i];
}
}
}
,touchmove:function (e){
	if((e.type == "touchmove" && e.originalEvent.touches.length <= 1) || e.type == "drag"){
	this._left = (e.pageX || e.originalEvent.touches[0].pageX) - this._startX;
	this._top = (e.pageY || e.originalEvent.touches[0].pageY) - this._startY;
	var w = this._left < 0 ? this._left * -1:this._left;
	var h = this._top < 0 ? this._top * -1:this._top;
	if (w < h || this._scroll){
	this._left = 0;
	this._drag = false;
	this._scroll = true;
}
else{
	e.preventDefault();
	this._drag = true;
	this._scroll = false;
	this.position(e);
}
for(var i=0;
	i<this._len;
	++i){
	var tmp = this._start[i] + this._left;
	if(this.opts.supportsCssTransitions && this.opts.transition){
	var trans = "translate3d(" + tmp + "px,0,0)";
	this._list.eq(i).css({
	"left":"","-moz-transition":"0ms","-moz-transform":trans,"-ms-transition":"0ms","-ms-transform":trans,"-webkit-transition":"0ms","-webkit-transform":trans,"transition":"0ms","transform":trans}
);
}
else{
	this._list.eq(i).css("left",tmp + "px");
}
this._pos[i] = tmp;
}
}
}
,touchend:function (e){
	if((e.type == "touchend" && e.originalEvent.touches.length <= 1) || e.type == "dragend"){
	if(this._scroll){
	this._drag = false;
	this._scroll = false;
	return false;
}
this.animate(this.direction());
	this._drag = false;
	this._scroll = false;
}
}
,position:function (d){
	var gap = this._view * this._item_w;
	if(d == -1 || d == 1){
	this._startX = 0;
	this._start = [];
	for(var i=0;
	i<this._len;
	++i){
	this._start[i] = this._pos[i];
}
this._left = d * gap;
}
else{
	if(this._left > gap) this._left = gap;
	if(this._left < - gap) this._left = - gap;
}
if(this.opts.roll){
	var tmp_pos = [];
	for(var i=0;
	i<this._len;
	++i){
	tmp_pos[i] = this._pos[i];
}
tmp_pos.sort(function(a,b){
	return a-b;
}
);
	var max_chk = tmp_pos[this._len-this._view];
	var p_min = $.inArray(tmp_pos[0],this._pos);
	var p_max = $.inArray(max_chk,this._pos);
	if(this._view <= 1) max_chk = this._len - 1;
	if(this.opts.multi){
	if((d == 1 && tmp_pos[0] >= 0) || (this._drag && tmp_pos[0] >= 100)){
	for(var i=0;
	i<this._view;
	++i,++p_min,++p_max){
	this._start[p_max] = this._start[p_min] - gap;
	this._list.eq(p_max).css("left",this._start[p_max] + "px");
}
}
else if((d == -1 && tmp_pos[0] <= 0) || (this._drag && tmp_pos[0] <= -100)){
	for(var i=0;
	i<this._view;
	++i,++p_min,++p_max){
	this._start[p_min] = this._start[p_max] + gap;
	this._list.eq(p_min).css("left",this._start[p_min] + "px");
}
}
}
else{
	if((d == 1 && tmp_pos[0] >= 0) || (this._drag && tmp_pos[0] > 0)){
	for(var i=0;
	i<this._view;
	++i,++p_min,++p_max){
	this._start[p_max] = this._start[p_min] - gap;
	this._list.eq(p_max).css("left",this._start[p_max] + "px");
}
}
else if((d == -1 && tmp_pos[max_chk] <= 0) || (this._drag && tmp_pos[max_chk] <= 0)){
	for(var i=0;
	i<this._view;
	++i,++p_min,++p_max){
	this._start[p_min] = this._start[p_max] + gap;
	this._list.eq(p_min).css("left",this._start[p_min] + "px");
}
}
}
}
else{
	if(this.limit_chk()) this._left = this._left / 2;
}
}
,animate:function (d,btn_click){
	if(this._drag || !this._scroll || btn_click){
	var _this = this;
	var speed = this._speed;
	if(btn_click) this.position(d);
	var gap = d * (this._item_w * this._view);
	if(this._left == 0 || (!this.opts.roll && this.limit_chk()) ) gap = 0;
	this._list.each(function (i,el){
	_this._pos[i] = _this._start[i] + gap;
	if(_this.opts.supportsCssTransitions && _this.opts.transition){
	var transition = speed + "ms";
	var transform = "translate3d(" + _this._pos[i] + "px,0,0)";
	if(btn_click) transition = "0ms";
	$(this).css({
	"left":"","-moz-transition":transition,"-moz-transform":transform,"-ms-transition":transition,"-ms-transform":transform,"-webkit-transition":transition,"-webkit-transform":transform,"transition":transition,"transform":transform}
);
}
else{
	$(this).stop();
	$(this).animate({
	"left":_this._pos[i] + "px"}
,speed);
}
}
);
	this.counter();
}
}
,direction:function (){
	var r = 0;
	if(this._left < -(this._range)) r = -1;
	else if(this._left > this._range) r = 1;
	if(!this._drag || this._scroll) r = 0;
	return r;
}
,limit_chk:function (){
	var last_p = parseInt((this._len - 1) / this._view) * this._view;
	return ( (this._start[0] == 0 && this._left > 0) || (this._start[last_p] == 0 && this._left < 0) );
}
,go_page:function (i,e){
	var crt = ($.inArray(0,this._pos) / this._view) + 1;
	var cal = crt - (i + 1);
	while(cal != 0){
	if(cal < 0){
	this.animate(-1,true);
	cal++;
}
else if(cal > 0){
	this.animate(1,true);
	cal--;
}
}
}
,counter:function (){
	if(typeof(this.opts.counter) == "function"){
	var param ={
	total:Math.ceil(this._len / this._view),current:($.inArray(0,this._pos) / this._view) + 1}
;
	this.opts.counter(param);
}
}
}
;
}
)(jQuery);

CSS代码(common.css):

@charset "utf-8";*{margin:0;padding:0;list-style:none;border:0;}
/* body */
body{margin:0;padding:0}
{width:100%;margin:0 auto;overflow:hidden}
.main_image{width:100%;height:422px;border-top:1px solid #d7d7d7;overflow:hidden;margin:0 auto;position:relative}
.main_image ul{width:9999px;height:422px;overflow:hidden;position:absolute;top:0;left:0}
.main_image li{float:left;width:100%;height:422px;}
.main_image li span{display:block;width:100%;height:422px}
.main_image li a{display:block;width:100%;height:422px}
.main_image li .img_1{background:url('../images/img_main_1.jpg') center top no-repeat}
.main_image li .img_2{background:url('../images/img_main_2.jpg') center top no-repeat}
.main_image li .img_3{background:url('../images/img_main_3.jpg') center top no-repeat}
.main_image li .img_4{background:url('../images/img_main_4.jpg') center top no-repeat}
.main_image li .img_5{background:url('../images/img_main_5.jpg') center top no-repeat}
div.flicking_con{width:990px;margin:0 auto;position:relative}
div.flicking_con .flicking_inner{position:absolute;top:360px;left:90px;z-index:999;width:300px;height:21px}
/* 121126 */
div.flicking_con a{float:left;width:21px;height:21px;margin:0;padding:0;background:url('../images/btn_main_img.png') 0 0 no-repeat;display:block;text-indent:-1000px}
div.flicking_con a.on{background-position:0 -21px}
#btn_prev,#btn_next{z-index:11111;position:absolute;display:block;width:73px!important;height:74px!important;top:50%;margin-top:-37px;display:none;}
#btn_prev{background:url(../images/hover_left.png) no-repeat left top;left:100px;}
#btn_next{background:url(../images/hover_right.png) no-repeat right top;right:100px;}

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