jQuery旋转木马自动切换代码

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

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

以下是 jQuery旋转木马自动切换代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta 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 type="text/css" rel="stylesheet" href="carousel.css">
<script src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="carousel.js"></script>
<style>
body { background-color:#222; color:#fff;font-family:"microsoft yahei";}
.container { margin:150px auto; max-width:1000px;}
h1 { margin-bottom:30px; text-align:center;font-size:30px;}
</style>
</head>
<body>
<div class="container">
<div class="pictureSlider poster-main" data-setting='{"width":1000,"height":270,"posterWidth":640,"posterHeight":270,"scale":0.8,"autoPlay":true,"delay":2000,"speed":300}'>
	<div class="poster-btn poster-prev-btn"></div>
    <ul class="poster-list">
    	<li class="poster-item"><a href="#"><img src="https://unsplash.it/640/270?image=1014" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="https://unsplash.it/640/270?image=1013" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="https://unsplash.it/640/270?image=1012" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="https://unsplash.it/640/270?image=1011" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="https://unsplash.it/640/270?image=1010" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="https://unsplash.it/640/270?image=1009" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="https://unsplash.it/640/270?image=1008" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="https://unsplash.it/640/270?image=1007" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="https://unsplash.it/640/270?image=1006" width="100%" height="100%"></a></li>
    </ul>
    <div class="poster-btn poster-next-btn"></div>
</div>
</div>
<script>
$(function(){
	Carousel.init($(".pictureSlider"));
});
</script>
</body>
</html>

JS代码(carousel.js):

;
	(function($){
	var Carousel = function(poster){
	var self = this;
	//保存单个旋转木马对象this.poster = poster;
	this.posterItemMain = poster.find("ul.poster-list");
	this.nextBtn = poster.find("div.poster-next-btn");
	this.prevBtn = poster.find("div.poster-prev-btn");
	this.posterItems = poster.find("li.poster-item");
	if( this.posterItems.size()%2 == 0 ){
	this.posterItemMain.append( this.posterItems.eq(0).clone() );
	this.posterItems = this.posterItemMain.children();
}
;
	this.posterFirstItem = this.posterItems.first();
	this.posterLastItem = this.posterItems.last();
	this.rotateFlag = true;
	//默认配置参数this.setting ={
	"width":1000,//幻灯片的宽度"height":270,//幻灯片的高度"posterWidth":640,//幻灯片第一帧的宽度"posterHeight":270,//幻灯片第一帧的高度"scale":0.9,//记录显示比例关系"speed":500,"autoPlay":false,"delay":5000,"verticalAlign":"middle" //top bottom}
;
	$.extend( this.setting,this.getSetting() );
	//设置配置参数值this.setSettingValue();
	//初始化幻灯片位置this.setPosterPos();
	//左旋转按钮this.nextBtn.click(function(){
	if(self.rotateFlag){
	self.rotateFlag = false;
	self.carouseRotate("left");
}
;
}
);
	//右旋转按钮this.prevBtn.click(function(){
	if(self.rotateFlag){
	self.rotateFlag = false;
	self.carouseRotate("right");
}
;
}
);
	//是否开启自动播放if(this.setting.autoPlay){
	this.autoPlay();
	this.poster.hover( function(){
	//self.timer是setInterval的种子window.clearInterval(self.timer);
}
,function(){
	self.autoPlay();
}
);
}
;
}
;
	Carousel.prototype ={
	autoPlay:function(){
	var self = this;
	this.timer = window.setInterval( function(){
	self.nextBtn.click();
}
,this.setting.delay );
}
,//旋转carouseRotate:function(dir){
	var _this_ = this;
	var zIndexArr = [];
	//左旋转if(dir === "left"){
	this.posterItems.each(function(){
	var self = $(this),prev = self.prev().get(0)?self.prev():_this_.posterLastItem,width = prev.width(),height =prev.height(),opacity = prev.css("opacity"),left = prev.css("left"),top = prev.css("top"),zIndex = prev.css("zIndex");
	zIndexArr.push(zIndex);
	self.animate({
	width:width,height:height,//zIndex:zIndex,opacity:opacity,left:left,top:top}
,_this_.setting.speed,function(){
	_this_.rotateFlag = true;
}
);
}
);
	//zIndex需要单独保存再设置，防止循环时候设置再取的时候值永远是最后一个的zindexthis.posterItems.each(function(i){
	$(this).css("zIndex",zIndexArr[i]);
}
);
}
else if(dir === "right"){
	//右旋转this.posterItems .each(function(){
	var self = $(this),next = self.next().get(0)?self.next():_this_.posterFirstItem,width = next.width(),height =next.height(),opacity = next.css("opacity"),left = next.css("left"),top = next.css("top"),zIndex = next.css("zIndex");
	zIndexArr.push(zIndex);
	self.animate({
	width:width,height:height,//zIndex:zIndex,opacity:opacity,left:left,top:top}
,_this_.setting.speed,function(){
	_this_.rotateFlag = true;
}
);
}
);
	//zIndex需要单独保存再设置，防止循环时候设置再取的时候值永远是最后一个的zindexthis.posterItems.each(function(i){
	$(this).css("zIndex",zIndexArr[i]);
}
);
}
;
}
,//设置剩余的帧的位置关系setPosterPos:function(){
	var self = this,sliceItems = this.posterItems.slice(1),sliceSize = sliceItems.size()/2,rightSlice = sliceItems.slice(0,sliceSize),//存在图片奇偶数问题level = Math.floor(this.posterItems.size()/2),leftSlice = sliceItems.slice(sliceSize);
	//设置右边帧的位置关系和宽度高度topvar firstLeft = (this.setting.width - this.setting.posterWidth)/2;
	var rw = this.setting.posterWidth,fixOffsetLeft = firstLeft + rw,rh = this.setting.posterHeight,gap = ((this.setting.width - this.setting.posterWidth)/2)/level;
	//设置右边位置关系rightSlice.each(function(i){
	level--;
	rw = rw * self.setting.scale;
	rh = rh * self.setting.scale;
	var j = i;
	$(this).css({
	zIndex:level,width:rw,height:rh,opacity:1/(++j),left:fixOffsetLeft+(++i)*gap - rw,top:self.setVerticalAlign(rh)}
);
}
);
	//设置左边的位置关系var lw = rightSlice.last().width(),lh =rightSlice.last().height(),oloop = Math.floor(this.posterItems.size()/2);
	leftSlice.each(function(i){
	$(this).css({
	zIndex:i,width:lw,height:lh,opacity:1/oloop,left:i*gap,top:self.setVerticalAlign(lh)}
);
	lw = lw/self.setting.scale;
	lh = lh/self.setting.scale;
	oloop--;
}
);
}
,//设置垂直排列对齐setVerticalAlign:function(height){
	var verticalType = this.setting.verticalAlign,top = 0;
	if(verticalType === "middle"){
	top = (this.setting.height-height)/2;
}
else if(verticalType === "top"){
	top = 0;
}
else if(verticalType === "bottom"){
	top = this.setting.height-height;
}
else{
	top = (this.setting.height-height)/2;
}
;
	return top;
}
,//设置配置参数值去控制基本的宽度高度。。。setSettingValue:function(){
	this.poster.css({
	width:this.setting.width,height:this.setting.height}
);
	this.posterItemMain.css({
	width:this.setting.width,height:this.setting.height}
);
	//计算上下切换按钮的宽度var w = (this.setting.width-this.setting.posterWidth)/2;
	//设置切换按钮的宽高，层级关系this.nextBtn.css({
	width:w,height:this.setting.height,zIndex:Math.ceil(this.posterItems.size()/2)}
);
	this.prevBtn.css({
	width:w,height:this.setting.height,zIndex:Math.ceil(this.posterItems.size()/2)}
);
	this.posterFirstItem.css({
	width:this.setting.posterWidth,height:this.setting.posterHeight,left:w,top:0,zIndex:Math.floor(this.posterItems.size()/2)}
);
}
,//获取人工配置参数getSetting:function(){
	var setting = this.poster.attr("data-setting");
	if(setting && setting != ""){
	return $.parseJSON(setting);
}
else{
	return{
}
;
}
;
}
}
;
	Carousel.init = function(posters){
	var _this_ = this;
	posters.each(function(){
	console.log("halo Louis;
	")new _this_($(this));
}
);
}
;
	//挂载到window下window["Carousel"] = Carousel;
}
)(jQuery);

CSS代码(carousel.css):

/*重置*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:;}
abbr,acronym{border:0;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix{zoom:1;}
/*旋转木马必要样式*/
.poster-main{position:relative;width:800px;height:270px;}
.poster-main a,.poster-main img{display:block;}
.poster-main .poster-list{width:800px;height:270px;}
.poster-main .poster-list .poster-item{position:absolute;left:0;top:0;}
.poster-main .poster-btn{position:absolute;top:0;width:100px;height:270px;z-index:10;cursor:pointer;opacity:0.8}
.poster-main .poster-prev-btn{left:0;background:url(btn_l.png) no-repeat center center;}
.poster-main .poster-next-btn{right:0;background:url(btn_r.png) no-repeat center center;}

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