html实现从数据库读取图片列表进行轮播

One贝贝 2019-05-24 03:14:32

想要实现的是在数据库中查询图片地址然后用网页进行轮播
现在完成的部分是图片可以轮播
但是不是动态获取

标红部分不知道该如何用获取的方式替代
可以将获取的全部地址存放在数组中
然后进行轮播

<!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>

...全文

1241 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

One贝贝 2019-05-24

打赏
举报

引用 1 楼河南棒小伙的回复:

你可以在调用动画$('#slider').slider({ position: 2 })之前，去调接口获取图片地址，然后操作dom，更改上面的背景图片呀。或者干脆改一下slider函数，把获取到的图片数组作为参数一并传给slider函数，在生成左右箭头之前，把它们一并生成了不就行了？调用的时候就成这样了：$('#slider').slider({ position: 2,imageArr:imageArr });

好的我试试

河南棒小伙 2019-05-24

打赏
举报

你可以在调用动画$('#slider').slider({ position: 2 })之前，去调接口获取图片地址，然后操作dom，更改上面的背景图片呀。或者干脆改一下slider函数，把获取到的图片数组作为参数一并传给slider函数，在生成左右箭头之前，把它们一并生成了不就行了？调用的时候就成这样了：$('#slider').slider({ position: 2,imageArr:imageArr });

daimajia的幻灯片切换动画效果，可直接从网络或本地文件中获取图片。（自用，记录用）

实现结果：具体实现：前台js方法实现： <script> varkeyValue=$.request("keyValue"); $(function(){ if(!!keyValue){ $.ajax({ url:"/OpticalManage/Op...

#轮播图dome <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href=

Overview今天复习了一下Android 如何将我们数据库中图片获取出来，并且将其转换为bitmap进行显示。开发环境以及技术使用Visual Studio 2019Android Studio 3.5API 使用 ASP .NET WEB API 开发数据库操作只用Entity Framework使用本地数据库作为数据源如果你是一个需要开发软件和API的程序员，那么你可以看一下，如果你不是可...

前言：适用于falsk的初学者：通过搭建flask框架来实现从mysql的数据库中读取数据在网页中显示用到的一些知识点：Flask-SQLAlchemy、PyMySQL Flask SQLAlchemy 在Flask Web应用程序中使用原始SQL对数据库执行CRUD操作可能很繁琐。相反， SQLAlchemy ，Python工具包是一个强大的OR Mapper，它为应用程序开发人员提供了SQL...