最近一直在研究Ajax与后台的交互,今晚看了一下轮播图如何与结合Ajax与后台进行实时的数据连接。
首先我讲一下我做轮播图的思路吧。首先html的代码如下:
<div id="loading">loading...</div><!--在DOM结构还没完全加载出来是呈现-->
<!--#imagePanel是用于放图片和按钮的面板-->
<div id="imagePanel">
<!--a标签时用于放图片-->
<a href="#" id="imageLink">
<img src="./images/jiuzhaigou1.jpg" alt="轮播图_1" id="image">
</a>
<!--#imageTitle用于放序列按钮-->
<div id="imageTitle">
</div>
</div>
然后是基本的css样式,如下:
#imagePanel {
width: 480px;
height: 180px;
position: relative;
}
#imageTitle {
margin: 0;
padding:0;
height: 18px;
position: absolute;
bottom: 0;
right: 0;
/* background-color: red; */
background-color: #fff;
overflow: hidden;
}
a.button {
display: block;
width: 18px;
height: 18px;
background-color: #000;
text-decoration: none;
color: #fff;
font-size: 10px;
text-align: center;
line-height: 18px;
margin: 1px;
float: right;
}
(a.button这个样式是用于动态添加的序列按钮上)以上样式可以自行修改变得更美观吧,我比较懒就意思意思吧哈哈哈哈。
主要是讲功能的实现
我这里用的是jQuery,所以要引入jquery库。
需要实现的功能:图片的自动切换(changeImg());
动态生成按钮并点击可以跳到相应的图(createTitle);
向讲一下图片自动切换的函数吧。实现原理很简单,主要通过jquery的animate方法实现,改变dom结构中图片的src即可。
function changeImage(imgID){
clearTimeout(timer);//清除定时器
$("#image").animate({
opacity:'toggle'
},'fast');//通过改变当前图片的透明度(变为0)实现当前图片消失
if(imgID>imgUrl.length) imgID=1;//当imgID大于图片总数时,从头再来轮播
$("#image").attr('src',imgUrl[imgID]);//设置当前img元素的src
$("#imageLink").attr("href",imgLink[imgID]);
$("#image").animate({
opacity:'toggle'
},'slow');//通过设置imgID这个数字的图片 的opacity为1实现呈现图片效果
$("a.button").css("background-color",'#000');//设置全部按扭背景初始化
$('#link'+imgID).css("background-color",'#FF6600');//为 当前图片对应的按钮设置不同的背景
timer=setTimeout('changeImage('+(imgID+1)+')',5000);//设置一个定时器,每隔一段时间就自增执行一次这个函数
}
动态生成按钮函数:
function createTitle(){
var linkHtml='';
for(var i=imgUrl.length;i>0;i--){
linkHtml+='<a href="javascript:changeImage('+i+')" class="button" id="link'+i+'">'+i+'</a>';//动态生成的所有按钮,通过a元素实现按钮
}
return linkHtml;
}
基本上的代码全了,再加上一些代码即可,如下是全部的代码:
var imgUrl=new Array();
var imgAlt=new Array();
var imgLink=new Array();
imgUrl[0]='images/pic1.jpg';
imgLink[0]='#1';
imgUrl[1]='images/pic2.jpg';
imgLink[1]='#2';
imgUrl[2]='images/pic3.jpg';
imgLink[2]='#1';
imgUrl[3]='images/pic4.jpg';
imgLink[3]='#1';
imgUrl[4]='images/pic5.jpg';
imgLink[4]='#1';
imgUrl[5]='images/pic6.jpg';
imgLink[5]='#1';
var imgID=1;
var timer;
$(function(){
$("#loading").hide();
$("#imageTitle").html(createTitle());
changeImage(1);
})
function changeImage(imgID){
$("#image").animate({
opacity:'toggle'
},'fast');
if(imgID>imgUrl.length) imgID=1;
$("#image").attr('src',imgUrl[imgID]);
$("#imageLink").attr("href",imgLink[imgID]);
$("#image").animate({
opacity:'toggle'
},'slow');
$("a.button").css("background-color",'#000');
$('#link'+imgID).css("background-color",'#FF6600');
timer=setTimeout('changeImage('+(imgID+1)+')',5000);
}
function createTitle(){
var linkHtml='';
for(var i=imgUrl.length;i>0;i--){
linkHtml+='<a href="javascript:changeImage('+i+')" class="button" id="link'+i+'">'+i+'</a>';
}
return linkHtml;
}
</script>
对于与后台动态交换,主要就是从后台获取所有照片的信息(主要是src资源位置)。这一点可以通过Ajax向后台获取信息,后台反回响应即可。
——菜鸟一个,有不同意见可以留言00000—-