jQuery网页自适应屏幕图片滚动切换



165 656 219



特效描述:jQuery 自适应屏幕 图片滚动切换,jQuery自适应,图片切换,图片滚动

代码结构

1. 引入CSS

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

2. 引入JS

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

3. HTML代码

<div id="top-main">
	<div class="mid">
		<ul class="left-banner">
			<li><a title="点击查看" target="_blank" href="http://www.dijiuzhanzhang.com/"><img src="images/058.png" /></a></li>
			<li style="left:-1920px"><a title="点击查看" target="_blank" href="http://www.dijiuzhanzhang.com/"><img src="images/023.png" /></a></li></li>
			<li style="left:-1920px"><img src="images/004.png" /></li>
			<li style="left:-1920px"><img src="images/002.png" /></li>
		</ul>
		<ul class="controller">
			<li data-ca="main-slide1" class="current"></li>
			<li data-ca="main-slide2"></li>
			<li data-ca="main-slide3"></li>
			<li data-ca="main-slide4"></li>
		</ul>
	</div>
</div>
<script type="text/javascript">
//首页轮播动画
;(function($){
	$.fn.fadeAnimate = function(options){
		options = $.extend({
			liDomList: $(this).find('li'),
			liDomListLen: $(this).find('li').length,
			disableAutoEle: $('#account-box'),
			curIndex: 0,
			nextIndex: 1,
			curDom:undefined,
			nextDom:undefined,
			curLeft:0,
			minLeft:-1470,
			fadeLock: false,
			fadeTime: 5000,
			imgWidth: 1470,
			controller: $('#top-main .controller'),
			controllerList: $('#top-main .controller li'),
			timer: undefined,
			accSpeed: 4,
			Cx: 0.02, //阻力系数
			minRes: 1, //最小阻力
			curSpeed: 0
		}, options);		
		//移动到
		function changeTo(index){
			if(true == options.fadeLock){return;}
			window.clearTimeout(options.timer);
			options.nextIndex = index;
			options.fadeLock = true;
			//初始化
			options.curDom = options.liDomList.eq(options.curIndex);
			options.nextDom = options.liDomList.eq(options.nextIndex);
			options.nextDom.css('opacity',0);
			options.curLeft = 0;
			options.curSpeed = 0;
			options.nextDom.css('left', options.curLeft + options.imgWidth);
			controlChange(options.nextIndex);
			move();
		}
		//动画
		function move(){
			var nextLeft = getNextLeft();
			var opacity = Math.abs(nextLeft/options.imgWidth);
			var opacityPer = parseInt(opacity * 100);
			options.curDom.css({'left': nextLeft, 'opacity': 1-opacity, 'filter': 'alpha(opacity=' + (100 - opacityPer) + ')'});
			options.nextDom.css({'left': nextLeft + options.imgWidth, 'opacity': opacity, 'filter': 'alpha(opacity=' + opacityPer + ')'});
			if(nextLeft <= options.minLeft){
				options.curIndex = options.nextIndex;
				options.fadeLock = false;
				autoFade();
			}else{
				window.setTimeout(move, 20);	
			}
		}
		//获取下次速度
		function getNextSpeed(){
			var incSpeed = options.accSpeed - options.minRes - options.curSpeed * options.Cx; 
			return options.curSpeed += incSpeed;
		}
		//获取下次便宜left
		function getNextLeft() {
			var nextSpeed = getNextSpeed();
			options.curLeft = options.curLeft - nextSpeed < options.minLeft ? options.minLeft : options.curLeft - nextSpeed;
			return options.curLeft;
		}
		//获取下个索引
		function changeNext() {
			var nextIndex = options.curIndex + 1 >= options.liDomListLen ? 0 : options.curIndex + 1; 	
			changeTo(nextIndex);
		}	
		//轮播图按钮点击效果
		options.controller.delegate('li', 'click', function(e){
			var index = $(e.currentTarget).index();
			changeTo(index);
		});
		//手动控制
		function controlChange(index) {
			options.controllerList.eq(index).addClass('current').siblings('.current').removeClass('current');
		}
		//自动轮播
		function autoFade() {
			window.clearTimeout(options.timer);	
			options.timer = window.setTimeout(changeNext, options.fadeTime);	
		}
		autoFade();
		/*
		options.disableAutoEle.focusin(function(){
			window.clearTimeout(options.timer);	
		}).focusout(function(){
			autoFade();
		})
		*/
		$(this).mouseenter(function(){
			window.clearTimeout(options.timer);	
		}).mouseleave(function(){
			autoFade();
		});
		return $(this);
	}	
})(jQuery);
$('#top-main .left-banner').fadeAnimate({});
</script>



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


热门标签: 滚动 flash焦点图 自动滚动图片轮播 全屏焦点图 全屏切换 宽屏全屏 焦点图 幻灯片 图片轮播 图片全屏 滚动切换 图片滚动 图片轮播

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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