经验分享程序开发文档资料数据资源其它资源

jQuery商城网站全屏图片切换滑动滚动特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery商城网站全屏图片切换滑动滚动特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery商城网站全屏图片切换滑动滚动特效代码

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,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery商城网站全屏图片切换代码</title>
<link rel="stylesheet" type="text/css" href="css/slide.css"/>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/slide.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$(".slideInner").slide({
		slideContainer: $('.slideInner a'),
		effect: 'easeOutCirc',
		autoRunTime: 5000,
		slideSpeed: 1000,
		nav: true,
		autoRun: true,
		prevBtn: $('a.prev'),
		nextBtn: $('a.next')
	});
});
</script>
</head>
<body>
<div class="slides">
	<div class="slideInner">
		<a href="#" style="background: url(img/slide1.jpg) no-repeat;">
			<div class="moveElem img1" rel="0,easeInOutExpo"> <img src="img/slide1p1.png" /> </div>
			<div class="moveElem img2" rel="150,easeInOutExpo"> <img src="img/slide1p2.png" /> </div>
		</a>
		<a href="#" style="background: url(img/slide2.jpg) no-repeat">
			<div class="moveElem img1" rel="0,easeInOutExpo"> <img src="img/slide2p1.png" /> </div>
		</a>
		<a href="#" class="slide3" style="background: url(img/slide3.jpg) no-repeat;">
			<div class="moveElem img1" rel="0,easeInOutExpo"> <img src="img/slide3p1.png" /> </div>
			<div class="moveElem img2" rel="150,easeInOutExpo"> <img src="img/slide3p2.png" /> </div>
			<div class="moveElem img3" rel="300,easeInOutExpo"> <img src="img/slide3p3.png" /> </div>
		</a>
		<a href="#" style="background: rgb(113, 209, 231);">
			<div class="moveElem img1" rel="0,easeInOutExpo"> <img src="img/slide1p1.png" /> </div>
			<div class="moveElem img2" rel="150,easeInOutExpo"> <img src="img/slide1p2.png" /> </div>
		</a>
		<a href="#" style="background: rgb(178, 44, 44);">
			<div class="moveElem img1" rel="0,easeInOutExpo"> <img src="img/slide1p1.png" /> </div>
			<div class="moveElem img2" rel="150,easeInOutExpo"> <img src="img/slide1p2.png" /> </div>
		</a>
	</div>
	<div class="nav">
		<a class="prev" href="javascript:;"></a>
		<a class="next" href="javascript:;"></a>
	</div>
</div>
</body>
</html>

JS代码(slide.js):

(function($){
	$.fn.slide = function(options){
	var defaults ={
	slideContainer:$('.slideInner a'),effect:'easeInQuint',//轮播图切换动画风格imgEffectOut:'easeInExpo',//里面元素动画离开风格autoRunTime:3000,slideSpeed:1000,imgSlideSpeed:800,imgDelay:50,//里面小元素动画延长时间执行nav:true,//点点列表autoRun:true,prevBtn:$('a.prev'),nextBtn:$('a.next')}
;
	var el = $(this),settings = $.extend({
}
,defaults,options),leftPos = 0,navlist = "",timer = null,imgpos = '',isMove = true;
	/* *slides 移动方法 * */
$.fn.changeSlide = function(settings,pos){
	$(this).animate({
	left:pos + "%"}
,{
	duration:settings.slideSpeed,easing:settings.effect,complete:function(){
	isMove = true;
}
}
);
}
;
	$.fn.clickChangeSlide = function(settings,pos){
	$(this).css({
	'left':pos + "%",opacity:.9}
).delay(10).animate({
	opacity:'1'}
,{
	duration:settings.slideSpeed,easing:settings.effect,complete:function(){
	isMove = true;
}
}
);
}
;
	/* * 小元素动画 * * */
$.fn.imgAnimate = function(delayTime,imgEffectIn,pos,where,settings){
	var el = $(this);
	switch (where){
	case 'right':el.stop(true).css({
	'left':'100%','opacity':'0'}
).delay(delayTime+15).animate({
	left:pos,opacity:'1'}
,{
	duration:settings.imgSlideSpeed,easing:imgEffectIn,complete:function(){
	el.css('left',pos);
}
}
);
	el.parent().siblings().children().animate({
	left:'20%',opacity:'0'}
,{
	duration:500,easing:settings.imgEffectOut,complete:function(){
	el.css('left',pos);
}
}
);
	break;
	case 'left':el.stop(true).css({
	'left':'0%','opacity':'0'}
).delay(delayTime+15).animate({
	left:pos,opacity:'1'}
,{
	duration:settings.imgSlideSpeed,easing:imgEffectIn,complete:function(){
	el.css('left',pos);
}
}
);
	el.parent().siblings().children().animate({
	left:'50%',opacity:'0'}
,{
	duration:500,easing:settings.imgEffectOut,complete:function(){
	el.css('left',pos);
}
}
);
	break;
}
;
}
;
	/* * 向左移动方法 * */
$.fn.moveLeft = function(){
	if (!isMove){
	return;
}
;
	isMove = false;
	var el = $(this);
	index = $(settings.slideContainer).parent().find('.active').attr("data-index");
	if (index <= total && index > 1){
	current = $(settings.slideContainer).eq(index - 1);
	next = $(settings.slideContainer).eq(index - 2);
	if (next){
	current.removeClass("active");
	next.addClass("active");
	changeNavList();
}
;
	pos = ((Number(index) - 2) * 100) * -1;
	el.changeSlide(settings,pos);
	el.find('.active').imgMoveSetting('left');
}
else{
	toLast('first');
}
}
;
	/* * 向右移动方法 * */
$.fn.moveRight = function(){
	if (!isMove){
	return;
}
;
	isMove = false;
	var el = $(this);
	index = $(settings.slideContainer).parent().find('.active').attr("data-index");
	if (index >= 1 && index < total){
	current = $(settings.slideContainer).eq(index - 1);
	next = $(settings.slideContainer).eq(index);
	if (next){
	current.removeClass("active");
	next.addClass("active");
	changeNavList();
}
;
	pos = ((Number(next.attr("data-index")) - 1) * 100) * -1;
	el.changeSlide(settings,pos);
	el.find('.active').imgMoveSetting('right');
}
else{
	toLast('last');
}
}
;
	//切换点列表function changeNavList(){
	if (settings.nav){
	var index = el.find('.active').attr("data-index");
	$(".navListBox li a").removeClass("active").eq(index - 1).addClass("active");
}
}
;
	//自动切换function autoRun(){
	if (settings.autoRun){
	clearInterval(timer);
	timer = setInterval(function(){
	el.moveRight();
}
,settings.autoRunTime);
}
}
;
	/* * 根据索引值切换 * */
$.fn.moveTo = function(index){
	var el = $(this),moveWhere = '';
	el.children().eq(index - 1).addClass('active').siblings().removeClass('active');
	pos = ((index - 1) * 100) * -1;
	el.clickChangeSlide(settings,pos);
	var nowIndex = $(".navListBox li a.active").attr('data-index');
	if (index < nowIndex){
	moveWhere = 'left';
}
else{
	moveWhere = 'right';
}
;
	$(".navListBox li").eq(index - 1).children().addClass('active').parent().siblings().children().removeClass('active');
	el.find('.active').imgMoveSetting(moveWhere);
}
;
	$.fn.imgMoveSetting = function(moveW){
	var el = $(this);
	if (moveW){
	$.each(el.children('.moveElem'),function(i){
	var arr = $(this).attr('rel').split(',');
	var thisDelay = arr[0] - 0;
	var imgEffectIn = arr[1];
	var thisImgpos = $(this).attr('offsetLeft');
	$(this).imgAnimate(thisDelay,imgEffectIn,thisImgpos,moveW,settings);
}
);
}
;
}
;
	function toLast(move){
	switch (move){
	case 'last':el.find('a:first').css('margin-left',(el.children().length * 100) + "%");
	el.changeSlide(settings,-el.children().length * 100);
	el.find('a:first').imgMoveSetting('right');
	setTimeout(function(){
	el.css('left','0%');
	el.find('a:first').css('margin-left','0');
	el.find('a:first').addClass('active').siblings().removeClass('active');
	changeNavList();
}
,settings.slideSpeed + 50);
	break;
	case 'first':el.find('a:last').css('margin-left',-(el.children().length * 100) + "%");
	el.changeSlide(settings,100);
	el.find('a:last').imgMoveSetting('left');
	setTimeout(function(){
	el.css('left',-((el.children().length - 1) * 100) + "%");
	el.find('a:last').css('margin-left','0');
	el.find('a:last').addClass('active').siblings().removeClass('active');
	changeNavList();
}
,settings.slideSpeed + 50);
	break;
}
}
;
	settings.prevBtn.hover(function(){
	$(this).css('opacity','.5');
}
,function(){
	$(this).css('opacity','.2');
}
);
	settings.nextBtn.hover(function(){
	$(this).css('opacity','.5');
}
,function(){
	$(this).css('opacity','.2');
}
);
	settings.nextBtn.click(function(){
	el.moveRight();
}
);
	settings.prevBtn.click(function(){
	el.moveLeft();
}
);
	el.parent().hover(function(){
	clearInterval(timer);
	settings.prevBtn.parent().show();
}
,function(){
	autoRun();
	settings.prevBtn.parent().hide();
}
);
	var total = $(settings.slideContainer).length;
	$.fn.init(autoRun());
	$.each($(settings.slideContainer),function(i){
	$(this).css({
	width:$(window).width(),position:"absolute",left:leftPos + "%"}
).attr("data-index",i + 1);
	leftPos = leftPos + 100;
	if (settings.nav){
	navlist += "<li style='cursor:pointer'><a data-index='" + (i + 1) + "'></a></li>";
}
;
	$.each($(this).children(),function(i){
	$(this).attr('offsetLeft',$(this).css('left'));
}
);
}
);
	$("<ul style='width:" + ($(settings.slideContainer).length * 12 + ($(settings.slideContainer).length - 1) * 5) + "px;
	margin-left:-" + ($(settings.slideContainer).length * 12 + (($(settings.slideContainer).length - 1) * 5)) / 2 + "px' class='navListBox'>" + navlist + "</ul>").appendTo(el.parent());
	$(settings.slideContainer).eq(0).addClass("active");
	if (settings.nav) $(".navListBox li a" + "[data-index=1]").addClass("active");
	$(".navListBox li a").bind({
	click:function(){
	if (!isMove){
	return;
}
;
	isMove = false;
	var index = $(this).attr('data-index');
	el.moveTo(index);
}
,mouseover:function(){
	$(this).parent().css('box-shadow','0 0 5px #fff');
}
,mouseout:function(){
	$(this).parent().css('box-shadow','none');
}
}
);
}
;
}
)(jQuery);
	/* * * 扩展jquery 动画组件 * */
jQuery.easing['jswing'] = jQuery.easing['swing'];
	jQuery.extend(jQuery.easing,{
	def:'easeOutQuad',swing:function(x,t,b,c,d){
	//alert(jQuery.easing.default);
	return jQuery.easing[jQuery.easing.def](x,t,b,c,d);
}
,easeInQuad:function(x,t,b,c,d){
	return c * (t /= d) * t + b;
}
,easeOutQuad:function(x,t,b,c,d){
	return -c * (t /= d) * (t - 2) + b;
}
,easeInOutQuad:function(x,t,b,c,d){
	if ((t /= d / 2) < 1) return c / 2 * t * t + b;
	return -c / 2 * ((--t) * (t - 2) - 1) + b;
}
,easeInCubic:function(x,t,b,c,d){
	return c * (t /= d) * t * t + b;
}
,easeOutCubic:function(x,t,b,c,d){
	return c * ((t = t / d - 1) * t * t + 1) + b;
}
,easeInOutCubic:function(x,t,b,c,d){
	if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
	return c / 2 * ((t -= 2) * t * t + 2) + b;
}
,easeInQuart:function(x,t,b,c,d){
	return c * (t /= d) * t * t * t + b;
}
,easeOutQuart:function(x,t,b,c,d){
	return -c * ((t = t / d - 1) * t * t * t - 1) + b;
}
,easeInOutQuart:function(x,t,b,c,d){
	if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
	return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
}
,easeInQuint:function(x,t,b,c,d){
	return c * (t /= d) * t * t * t * t + b;
}
,easeOutQuint:function(x,t,b,c,d){
	return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
}
,easeInOutQuint:function(x,t,b,c,d){
	if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
	return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
}
,easeInSine:function(x,t,b,c,d){
	return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
}
,easeOutSine:function(x,t,b,c,d){
	return c * Math.sin(t / d * (Math.PI / 2)) + b;
}
,easeInOutSine:function(x,t,b,c,d){
	return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
}
,easeInExpo:function(x,t,b,c,d){
	return (t == 0) ? b:c * Math.pow(2,10 * (t / d - 1)) + b;
}
,easeOutExpo:function(x,t,b,c,d){
	return (t == d) ? b + c:c * (-Math.pow(2,-10 * t / d) + 1) + b;
}
,easeInOutExpo:function(x,t,b,c,d){
	if (t == 0) return b;
	if (t == d) return b + c;
	if ((t /= d / 2) < 1) return c / 2 * Math.pow(2,10 * (t - 1)) + b;
	return c / 2 * (-Math.pow(2,-10 * --t) + 2) + b;
}
,easeInCirc:function(x,t,b,c,d){
	return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
}
,easeOutCirc:function(x,t,b,c,d){
	return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
}
,easeInOutCirc:function(x,t,b,c,d){
	if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
	return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
}
,easeInElastic:function(x,t,b,c,d){
	var s = 1.70158;
	var p = 0;
	var a = c;
	if (t == 0) return b;
	if ((t /= d) == 1) return b + c;
	if (!p) p = d * .3;
	if (a < Math.abs(c)){
	a = c;
	var s = p / 4;
}
else var s = p / (2 * Math.PI) * Math.asin(c / a);
	return -(a * Math.pow(2,10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
}
,easeOutElastic:function(x,t,b,c,d){
	var s = 1.70158;
	var p = 0;
	var a = c;
	if (t == 0) return b;
	if ((t /= d) == 1) return b + c;
	if (!p) p = d * .3;
	if (a < Math.abs(c)){
	a = c;
	var s = p / 4;
}
else var s = p / (2 * Math.PI) * Math.asin(c / a);
	return a * Math.pow(2,-10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
}
,easeInOutElastic:function(x,t,b,c,d){
	var s = 1.70158;
	var p = 0;
	var a = c;
	if (t == 0) return b;
	if ((t /= d / 2) == 2) return b + c;
	if (!p) p = d * (.3 * 1.5);
	if (a < Math.abs(c)){
	a = c;
	var s = p / 4;
}
else var s = p / (2 * Math.PI) * Math.asin(c / a);
	if (t < 1) return -.5 * (a * Math.pow(2,10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
	return a * Math.pow(2,-10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
}
,easeInBack:function(x,t,b,c,d,s){
	if (s == undefined) s = 1.70158;
	return c * (t /= d) * t * ((s + 1) * t - s) + b;
}
,easeOutBack:function(x,t,b,c,d,s){
	if (s == undefined) s = 1.70158;
	return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
}
,easeInOutBack:function(x,t,b,c,d,s){
	if (s == undefined) s = 1.70158;
	if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
	return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
}
,easeInBounce:function(x,t,b,c,d){
	return c - jQuery.easing.easeOutBounce(x,d - t,0,c,d) + b;
}
,easeOutBounce:function(x,t,b,c,d){
	if ((t /= d) < (1 / 2.75)){
	return c * (7.5625 * t * t) + b;
}
else if (t < (2 / 2.75)){
	return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
}
else if (t < (2.5 / 2.75)){
	return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
}
else{
	return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
}
}
,easeInOutBounce:function(x,t,b,c,d){
	if (t < d / 2) return jQuery.easing.easeInBounce(x,t * 2,0,c,d) * .5 + b;
	return jQuery.easing.easeOutBounce(x,t * 2 - d,0,c,d) * .5 + c * .5 + b;
}
}
);
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
940.65 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
940.65 KB
立即下载
柯菲枫
了解
打赏作者 鼓励作者
Html 滑动滚动特效
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章