JQuery插件bxslider的问题,求各位高手指点!
JQuery插件bxslider的问题,我是通过left.gif和right.gif来左右移动的,但图标却放在框架的下面,怎样将图样将图片放到框架的两边?设置prevSe...
JQuery插件bxslider的问题,我是通过left.gif和right.gif来左右移动的,但图标却放在框架的下面,怎样将图样将图片放到框架的两边?
设置prevSelector和nextSelector也许可以解决这个问题,可具体怎么设置呢?
以下是我的代码:
<!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=gb2312" />
<title>bxslider v3.0</title>
<style type="text/css">
*{padding:0px;margin:0px;}
body{padding-top:100px;}
img{border:0px;}
#banner{width:556px;height:252px;border:1px solid #eee;margin:0px auto;}
</style>
<script src="script/jquery-1.7.min.js" type="text/javascript"></script>
<script src="script/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$('#bxslider').bxSlider({
mode:'horizontal',//幻灯片模式'horizontal','vertical','fade'
speed:500,//速度(毫秒)
infiniteLoop:true,//回滚设置
controls:true,//是否显示上一页/下一页
prevText:'上一页',
nextText:'下一页',
prevImage:'images/left.gif',//上一页替换图片
nextImage:'images/right.gif',//下一页替换图片
prevSelector:null,
nextSelector:null,
auto:true//是否自动切换
});
});
-->
</script>
</head>
<body>
<div id="banner">
<div id="bxslider">
<div><img src="images/img1.gif" /></div>
<div><img src="images/img2.gif" /></div>
<div><img src="images/img3.gif" /></div>
<div><img src="images/img4.gif" /></div>
</div>
</div>
</body>
</html> 展开
设置prevSelector和nextSelector也许可以解决这个问题,可具体怎么设置呢?
以下是我的代码:
<!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=gb2312" />
<title>bxslider v3.0</title>
<style type="text/css">
*{padding:0px;margin:0px;}
body{padding-top:100px;}
img{border:0px;}
#banner{width:556px;height:252px;border:1px solid #eee;margin:0px auto;}
</style>
<script src="script/jquery-1.7.min.js" type="text/javascript"></script>
<script src="script/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$('#bxslider').bxSlider({
mode:'horizontal',//幻灯片模式'horizontal','vertical','fade'
speed:500,//速度(毫秒)
infiniteLoop:true,//回滚设置
controls:true,//是否显示上一页/下一页
prevText:'上一页',
nextText:'下一页',
prevImage:'images/left.gif',//上一页替换图片
nextImage:'images/right.gif',//下一页替换图片
prevSelector:null,
nextSelector:null,
auto:true//是否自动切换
});
});
-->
</script>
</head>
<body>
<div id="banner">
<div id="bxslider">
<div><img src="images/img1.gif" /></div>
<div><img src="images/img2.gif" /></div>
<div><img src="images/img3.gif" /></div>
<div><img src="images/img4.gif" /></div>
</div>
</div>
</body>
</html> 展开
若以下回答无法解决问题,邀请你更新回答
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询