想要实现的是 在数据库中查询图片地址 然后用网页进行轮播
现在完成的部分是图片可以轮播
但是不是动态获取标红部分不知道该如何用获取的方式替代
可以将获取的全部地址存放在数组中
然后进行轮播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>jquery水平方向平铺焦点图插件</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<style>
body{margin:0px;padding:0px}
.slider{position:relative}
.sliderContent{height:500px;width:100%;overflow:hidden;}
.sliderItem{height:100%;overflow: hidden;width:100%;background:none no-repeat center 0px;}
.sliderBtnWrapper{height:69px;margin:0 auto;width:100%;position:absolute;top:50%;margin-top:-35px}
.sliderBtnPre,.sliderBtnNext{display: block;height:69px;position:absolute;text-indent:-9999em;width:69px;z-index:3;background:url(/demo/h-slider/p-btn.png) no-repeat;outline:none}
.sliderBtnPre{left:50px}
.sliderBtnNext{background-image:url(/demo/h-slider/n-btn.png);left:inherit;right:50px;}</style>
<div class="slider" id="slider">
<div class="sliderContent">
<div class="sliderItem" style="background-image:url(img/ad1.JPG)"></div>
<div class="sliderItem" style="background-image:url(img/ad2.JPG)"></div>
<div class="sliderItem" style="background-image:url(img/ad3.JPG)"></div>
<div class="sliderItem" style="background-image:url(img/ad4.JPG)"></div>
</div>
</div>
<script>
(function ($) {
$.fn.slider = function (cfg) {
cfg = $.extend({//焦点图全屏默认配置
delay: 3000, //自动播放时间间隔,单位毫秒
animateDelay: 500, //切换动画效果时间,单位毫秒
position: 1, //滚动方向 1:垂直滚动 2:水平滚动
height: 500//焦点图高度,默认500,你的图片背景高度不是500,需要配置这个选项修正高度
}, cfg);
cfg.scroll = cfg.position == 2 ? 'scrollLeft' : 'scrollTop';
return this.each(function () {
var btn = $('<div class="sliderBtnWrapper"><a href="javascript:void(0);" class="sliderBtnPre">Previous Slide</a><a href="javascript:void(0);" class="sliderBtnNext">Next Slide</a></div>').appendTo(this).find('a'),
sliderContent = $(this).find('div.sliderContent'), itemContainer, step = cfg.height, items = sliderContent.find('div.sliderItem'), itemNum = items.length, total = (itemNum - 1) * step
, param = {}, timer, nowItem, auto = true;
if (cfg.position == 2) {
$(window).resize(function (e, p) {
if (p == 'init') { itemContainer = $('<div></div'); sliderContent.append(itemContainer.css('height', '100%')); itemContainer.append(items); }
else {
sliderContent.stop(); //停止动画,以便重新计算要移动的距离
nowItem = Math.ceil(param[cfg.scroll] / step);
}
step = Math.max(document.body.offsetWidth, document.documentElement.offsetWidth);
total = (itemNum - 1) * step;
itemContainer.css('width', itemNum * step);
items.css({ width: step, float: 'left' });
if (p != 'init') {
param[cfg.scroll] = nowItem * step;
sliderContent.attr(cfg.scroll, param[cfg.scroll]); //直接设置滚动长度显示要显示的图片,不用动画,应为动画的余下时间懒得算了,有兴趣自己计算
startTimer();
}
}).trigger('resize', 'init');
}
sliderContent.css('height', cfg.height);
param[cfg.scroll] = 0;
btn.click(function () { animate(this.className == 'sliderBtnPre' ? -1 : 1) });
function startTimer() {
clearTimeout(timer);
if (auto) timer = setTimeout(function () { animate(1) }, cfg.delay);
}
function animate(dir) {
console.log(param);
param[cfg.scroll] += step * dir;
if (param[cfg.scroll] > total) param[cfg.scroll] = 0;
else if (param[cfg.scroll] < 0) param[cfg.scroll] = total;
sliderContent.animate(param, cfg.animateDelay, function () { startTimer(); });
}
$(this).mouseenter(function () { auto = false; startTimer(); }).mouseleave(function () { auto = true; startTimer(); });
startTimer();
});
};
})(jQuery);
$(function () {
$('#slider').slider({ position: 2 });
});
</script>
现在完成的部分是图片可以轮播
但是不是动态获取标红部分不知道该如何用获取的方式替代
可以将获取的全部地址存放在数组中
然后进行轮播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>jquery水平方向平铺焦点图插件</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<style>
body{margin:0px;padding:0px}
.slider{position:relative}
.sliderContent{height:500px;width:100%;overflow:hidden;}
.sliderItem{height:100%;overflow: hidden;width:100%;background:none no-repeat center 0px;}
.sliderBtnWrapper{height:69px;margin:0 auto;width:100%;position:absolute;top:50%;margin-top:-35px}
.sliderBtnPre,.sliderBtnNext{display: block;height:69px;position:absolute;text-indent:-9999em;width:69px;z-index:3;background:url(/demo/h-slider/p-btn.png) no-repeat;outline:none}
.sliderBtnPre{left:50px}
.sliderBtnNext{background-image:url(/demo/h-slider/n-btn.png);left:inherit;right:50px;}</style>
<div class="slider" id="slider">
<div class="sliderContent">
<div class="sliderItem" style="background-image:url(img/ad1.JPG)"></div>
<div class="sliderItem" style="background-image:url(img/ad2.JPG)"></div>
<div class="sliderItem" style="background-image:url(img/ad3.JPG)"></div>
<div class="sliderItem" style="background-image:url(img/ad4.JPG)"></div>
</div>
</div>
<script>
(function ($) {
$.fn.slider = function (cfg) {
cfg = $.extend({//焦点图全屏默认配置
delay: 3000, //自动播放时间间隔,单位毫秒
animateDelay: 500, //切换动画效果时间,单位毫秒
position: 1, //滚动方向 1:垂直滚动 2:水平滚动
height: 500//焦点图高度,默认500,你的图片背景高度不是500,需要配置这个选项修正高度
}, cfg);
cfg.scroll = cfg.position == 2 ? 'scrollLeft' : 'scrollTop';
return this.each(function () {
var btn = $('<div class="sliderBtnWrapper"><a href="javascript:void(0);" class="sliderBtnPre">Previous Slide</a><a href="javascript:void(0);" class="sliderBtnNext">Next Slide</a></div>').appendTo(this).find('a'),
sliderContent = $(this).find('div.sliderContent'), itemContainer, step = cfg.height, items = sliderContent.find('div.sliderItem'), itemNum = items.length, total = (itemNum - 1) * step
, param = {}, timer, nowItem, auto = true;
if (cfg.position == 2) {
$(window).resize(function (e, p) {
if (p == 'init') { itemContainer = $('<div></div'); sliderContent.append(itemContainer.css('height', '100%')); itemContainer.append(items); }
else {
sliderContent.stop(); //停止动画,以便重新计算要移动的距离
nowItem = Math.ceil(param[cfg.scroll] / step);
}
step = Math.max(document.body.offsetWidth, document.documentElement.offsetWidth);
total = (itemNum - 1) * step;
itemContainer.css('width', itemNum * step);
items.css({ width: step, float: 'left' });
if (p != 'init') {
param[cfg.scroll] = nowItem * step;
sliderContent.attr(cfg.scroll, param[cfg.scroll]); //直接设置滚动长度显示要显示的图片,不用动画,应为动画的余下时间懒得算了,有兴趣自己计算
startTimer();
}
}).trigger('resize', 'init');
}
sliderContent.css('height', cfg.height);
param[cfg.scroll] = 0;
btn.click(function () { animate(this.className == 'sliderBtnPre' ? -1 : 1) });
function startTimer() {
clearTimeout(timer);
if (auto) timer = setTimeout(function () { animate(1) }, cfg.delay);
}
function animate(dir) {
console.log(param);
param[cfg.scroll] += step * dir;
if (param[cfg.scroll] > total) param[cfg.scroll] = 0;
else if (param[cfg.scroll] < 0) param[cfg.scroll] = total;
sliderContent.animate(param, cfg.animateDelay, function () { startTimer(); });
}
$(this).mouseenter(function () { auto = false; startTimer(); }).mouseleave(function () { auto = true; startTimer(); });
startTimer();
});
};
})(jQuery);
$(function () {
$('#slider').slider({ position: 2 });
});
</script>
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货