jQuery实现图片轮播效果（仿QQ商城首页、天猫首页）

图片轮播是网站中的常用功能，用于在有限的网页空间内展示一组产品图片或者照片，同时还有非常吸引人的动画效果。相信很多同学都在各种类型的网站上看过花样百出的轮播效果图，不少同学也想尝试下自己做出来一个，但网上的代码纰漏百出，不能学以致用，这里我将给大家介绍两种方式的图片轮播实现供大家参考。

实现一

1.制作界面

 <div class="wrapper">
    <h1>仿2012QQ商城jQuery轮播图效果h1>
    <div id="focus">
        <ul>
            <li><a href="#"><img src="img/01.jpg" alt="" />a>li>
            <li><a href="#"><img src="img/02.jpg" alt="" />a>li>
            <li><a href="#"><img src="img/03.jpg" alt="" />a>li>
            <li><a href="#"><img src="img/04.jpg" alt="" />a>li>
        ul>
    div>
div>

 

	
仿2012QQ商城jQuery轮播图效果
	

		

			

			

			

			

		
	

这里我们着重关注id为focus的div，里面我们放了

，首先我们要做的就是把所有轮播图片编排进去，其次才是对其操作。

1.1统一设置一个样式

* {
    margin:0;
    padding:0;
}
body {
    font-size:12px;
    color:#222;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    background:#f0f0f0;
    }
ul,li {
    list-style:none;
}
.wrapper {
    width:800px;
    margin:0 auto;
    padding-bottom:50px;
}
h1 {
    height:50px;
    line-height:50px;
    font-size:22px;
    font-weight:normal;
    font-family:"Microsoft YaHei",SimHei;
}

* {
	margin:0; 
	padding:0;
}
body {
	font-size:12px;
	color:#222; 
	font-family:Verdana,Arial,Helvetica,sans-serif; 
	background:#f0f0f0;
	}
ul,li {
	list-style:none;
}
.wrapper {
	width:800px; 
	margin:0 auto; 
	padding-bottom:50px;
}
h1 {
	height:50px; 
	line-height:50px; 
	font-size:22px; 
	font-weight:normal; 
	font-family:"Microsoft YaHei",SimHei;
}

1.2给轮播图设置样式

#focus {
    height:280px;
    width:800px;
    overflow:hidden;
    position:relative;
}
#focus ul {
    position:absolute;
}
#focus ul li {
    float:left;
    width:800px;
    height:280px;
    background:#000;
}

#focus {
	height:280px; 
	width:800px;
	overflow:hidden;
	position:relative;
}
#focus ul {
	position:absolute;
}
#focus ul li {
	float:left; 
	width:800px; 
	height:280px; 
	background:#000;
}

由于图片的高宽分别是280px、800px，这里我们给div设置这个高宽应该很好理解，overflow:hidden;也好理解li经过左浮动以后长度已经远远超出div的width值，需要把多出的部分隐藏。

1.3给轮播图下方的半透明横幅设置样式，这里提供手动鼠标移动切换图片的功能

#focus div.btn {
    position:absolute;
    width:800px;
    height:10px;
    padding:5px 10px;
    right:0;
    bottom:0;
    text-align:right;
    background:#000;
    opacity:0.5;
    filter:alpha(opacity=50);
}
#focus div.btn span {
    display:inline-block;
    width:25px;
    height:10px;
    margin-left:5px;
    cursor:pointer;
    background:#fff;
    border:1px solid #A020F0;
}

#focus div.btn {
	position:absolute; 
	width:800px; 
	height:10px; 
	padding:5px 10px;
	right:0; 
	bottom:0; 
	text-align:right;
	background:#000;
 	opacity:0.5;
	filter:alpha(opacity=50);
}
#focus div.btn span {
	display:inline-block; 
	width:25px; 
	height:10px; 
	margin-left:5px; 
	cursor:pointer; 
	background:#fff;
	border:1px solid #A020F0;
}

div.btn为下方横幅，为半透明；div.btn span为小方框。

1.4点击图片左半部分、右半部分出现的箭头指示，切换上下张图片的效果样式

#focus div.preNext {
    width:45px;
    height:100px;
    position:absolute;
    top:90px;
    background-image:url(../img/sprite.png);
    background-repeat:no-repeat;
    opacity:0;
    filter:alpha(opacity=0);
    cursor:pointer;
}
#focus div.pre {
    left:0;
    background-position:left top;
}
#focus div.next {
    right:0;
    background-position:right top;
}
#focus span.hidden {
    display:block;
    width:400px;
    height:260px;
    background:#000;
    opacity:0;
    filter:alpha(opacity=0);
    position:absolute;
    cursor:pointer;
}
#focus span.left {
    top:0;
    left:0;
}
#focus span.right {
    top:0;
    right:0;
}

#focus div.preNext {
	width:45px; 
	height:100px; 
	position:absolute; 
	top:90px; 
	background-image:url(../img/sprite.png); 
	background-repeat:no-repeat;
	opacity:0;
	filter:alpha(opacity=0);
	cursor:pointer;
}
#focus div.pre {
	left:0;
	background-position:left top;
}
#focus div.next {
	right:0; 
	background-position:right top;
}
#focus span.hidden {
	display:block;
	width:400px;
	height:260px;
	background:#000;
	opacity:0;
	filter:alpha(opacity=0);
	position:absolute;
	cursor:pointer;
}
#focus span.left {
	top:0;
	left:0;
}
#focus span.right {
	top:0;
	right:0;
}

span.hidden这里虽然我们定义了，但是只是为了把图片一分为2的效果，事实上我们也是把它设为全透明的，界面上根本看不到任何效果

div.preNext 设置了箭头指向，然后再通过图片定位分离出来

2、制作动画效果

由于代码中我都有相关的注释，这里就不再重复的累赘，有不明白的地方可以评论或留言。再多说一句，由于图片轮播效果用到了大量的jquery事件、动画，以及css稍微深一点的知识，如果看起本代码还是费力的同学可以适当的重温下基础。

$(function() {
    var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积）
    var len = $("#focus ul li").length; //获取焦点图个数
    var index = 0;
    var picTimer;

    //以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
    var btn = "";
    for(var i=0; i < len; i++) {btn += "";}
    btn += "

";  

    btn +="

"+"

"+  

              ""+"";  

    $("#focus").append(btn);  

      

      

    //为小按钮添加鼠标滑入事件，以显示相应的内容   

    $("#focus div.btn span").css("opacity",0.4).mouseenter(function() {  

        index = $("#focus div.btn span").index(this);  

        showPics(index);  

    });  

      

    //图片鼠标划过   

    $('#focus span.left').hover(function(){  

        $('#focus div.pre').animate({opacity:'0.5'},500);  

    },function(){  

        $('#focus div.pre').animate({opacity:'0'},500);  

    });  

    $('#focus span.right').hover(function(){  

        $('#focus div.next').animate({opacity:'0.5'},500);  

    },function(){  

        $('#focus div.next').animate({opacity:'0'},500);  

    });  

      

    //上一页按钮   

    $("#focus span.left").click(function() {  

        if(index == -1) {index = len - 1;}  

        showPics(index);  

        index--;  

    });  

    //下一页按钮   

    $("#focus span.right").click(function() {  

        if(index == len){  

            index = 0;  

            showFirstPic();  

        }else{  

            showPics(index);  

        }  

        index ++;  

    });  

  

    //本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度   

    $("#focus ul").css("width",sWidth * (len+1));  

      

    //鼠标滑上焦点图时停止自动播放，滑出时开始自动播放   

    $("#focus").hover(function() {  

        clearInterval(picTimer);  

    },function() {  

        picTimer = setInterval(function() {  

            if(index == len) { //如果索引值等于li元素个数，说明最后一张图播放完毕，接下来要显示第一张图，即调用showFirPic()，然后将索引值清零   

                index = 0;  

                showFirstPic();  

            } else { //如果索引值不等于li元素个数，按普通状态切换，调用showPics()   

                showPics(index);  

            }  

            index++;  

        },2000); //此2000代表自动播放的间隔，单位：毫秒   

    });  

      

    //显示图片函数，根据接收的index值显示相应的内容   

    function showPics(index) { //普通切换   

        var nowLeft = -index*sWidth; //根据index值计算ul元素的left值   

        $("#focus ul").stop(true,false).animate({"left":nowLeft},500); //通过animate()调整ul元素滚动到计算出的position   

        $("#focus div.btn span").animate({"opacity":"0.4"},300).eq(index).animate({"opacity":"1"},100); //为当前的按钮切换到选中的效果   

    }  

    function showFirstPic() { //最后一张图自动切换到第一张图时专用   

        $("#focus ul").append($("#focus ul li:first").clone());//为了达到从最右边到最左边还是往左移动效果，而不是往右移动   

        var nowLeft = -len*sWidth; //通过li元素个数计算ul元素的left值，也就是最后一个li元素的右边   

        $("#focus ul").stop(true,false).animate({"left":nowLeft},500,function() {  

            //通过callback，在动画结束后把ul元素重新定位到起点，然后删除最后一个复制过去的元素   

            $("#focus ul").css("left","0");  

            $("#focus ul li:last").remove();  

        });   

        $("#focus div.btn span").animate({"opacity":"0.4"},300).eq(index).animate({"opacity":"1"},100); //为当前的按钮切换到选中的效果   

    }  

});  

$(function() {
	var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积）
	var len = $("#focus ul li").length; //获取焦点图个数
	var index = 0;
	var picTimer;
	
	//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
	var btn = "
";
	for(var i=0; i < len; i++) {btn += "";}
	btn += "
";
	btn +="
"+"
"+
			  ""+"";
	$("#focus").append(btn);
	
	
	//为小按钮添加鼠标滑入事件，以显示相应的内容
	$("#focus div.btn span").css("opacity",0.4).mouseenter(function() {
		index = $("#focus div.btn span").index(this);
		showPics(index);
	});
	
	//图片鼠标划过
	$('#focus span.left').hover(function(){
		$('#focus div.pre').animate({opacity:'0.5'},500);
	},function(){
		$('#focus div.pre').animate({opacity:'0'},500);
	});
	$('#focus span.right').hover(function(){
		$('#focus div.next').animate({opacity:'0.5'},500);
	},function(){
		$('#focus div.next').animate({opacity:'0'},500);
	});
	
	//上一页按钮
	$("#focus span.left").click(function() {
		if(index == -1) {index = len - 1;}
		showPics(index);
		index--;
	});
	//下一页按钮
	$("#focus span.right").click(function() {
		if(index == len){
			index = 0;
			showFirstPic();
		}else{
			showPics(index);
		}
		index ++;
	});

	//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
	$("#focus ul").css("width",sWidth * (len+1));
	
	//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
	$("#focus").hover(function() {
		clearInterval(picTimer);
	},function() {
		picTimer = setInterval(function() {
			if(index == len) { //如果索引值等于li元素个数，说明最后一张图播放完毕，接下来要显示第一张图，即调用showFirPic()，然后将索引值清零
				index = 0;
				showFirstPic();
			} else { //如果索引值不等于li元素个数，按普通状态切换，调用showPics()
				showPics(index);
			}
			index++;
		},2000); //此2000代表自动播放的间隔，单位：毫秒
	});
	
	//显示图片函数，根据接收的index值显示相应的内容
	function showPics(index) { //普通切换
		var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
		$("#focus ul").stop(true,false).animate({"left":nowLeft},500); //通过animate()调整ul元素滚动到计算出的position
		$("#focus div.btn span").animate({"opacity":"0.4"},300).eq(index).animate({"opacity":"1"},100); //为当前的按钮切换到选中的效果
	}
	function showFirstPic() { //最后一张图自动切换到第一张图时专用
		$("#focus ul").append($("#focus ul li:first").clone());//为了达到从最右边到最左边还是往左移动效果，而不是往右移动
		var nowLeft = -len*sWidth; //通过li元素个数计算ul元素的left值，也就是最后一个li元素的右边
		$("#focus ul").stop(true,false).animate({"left":nowLeft},500,function() {
			//通过callback，在动画结束后把ul元素重新定位到起点，然后删除最后一个复制过去的元素
			$("#focus ul").css("left","0");
			$("#focus ul li:last").remove();
		}); 
		$("#focus div.btn span").animate({"opacity":"0.4"},300).eq(index).animate({"opacity":"1"},100); //为当前的按钮切换到选中的效果
	}
});

 天猫商城图片轮播效果

主要代码是一样的，主要是界面不再是一张图片占用整个板块，而是划分好几块，且鼠标移动到相关小图片块，颜色会变亮。

代码下载地址

实现二

后面补充。。。。。