使用jQuery的图像幻灯片 [英] Image slideshow using jquery

问题描述

我需要使用jquery在幻灯片中显示并帮助我实现该方法，其目的还在于以旋转方式显示图像

---

闪电战

I need to display in slideshow using jquery and help me with the approach also the objective of this is to display images in rotationally

---

Blitz

推荐答案

你好，

请找到以下代码和我上次回答的类似线程.

Please find the below code and a similar thread i replied last time.

此代码使用了引导轮播.

https://social.msdn.microsoft. com/Forums/zh-CN/b1da3c6d-c743-4591-ac4e-edea55ab01aa/slider?forum = sharepointgeneral

This code utilizes bootstrap carousel.

https://social.msdn.microsoft.com/Forums/en-US/b1da3c6d-c743-4591-ac4e-edea55ab01aa/slider?forum=sharepointgeneral

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<script type="text/javascript">

(document).ready(function(){ var listName =图片"; var url = _spPageContextInfo.webAbsoluteUrl; getListItems(listName，url，function(data){ var html ="; var lihtml ="； for(var i = 0; i< data.d.results.length; i ++){ console.log(JSON.stringify(data.d.results [i])); var item = data.d.results [i]; if(item.URL！= null){ //var description = item.Picture.Description; html + ='< div class ='item active' style ="border-top:none！important">'; html + ='< div class ='"row">'; html + ='< div class =" col-md-7">';; html + ='< a href ='##'>< img src =''++ item.URL.Url +''' class ="img响应" /></a>'; html + ='</div>';; html + ='< div class =" col-md-5">';; html + ='< div class ='轮播字幕">'; html + ='< h3>''+ item.Title +'</h3>'; html + ='< p>找出我们广泛的工程能力如何使我们能够解决复杂的技术挑战</p>'; html + ='< a href ='#" target ="_ blank">"img src ="'+ item.URL.Url +'" /></a>'; html + ='</div>';; html + ='</div>';; html + ='</div>';; html + ='</div>';; console.log(JSON.stringify(html)); lihtml ='< li data-target ='#carousel-top' data-slide-to ="0" class ="active"</li>'； var x =数据； console.log(JSON.stringify(data)); }别的{ html.push(< p>无图片存在//p>"))； } }

(document).ready(function(){ var listName = "Pictures"; var url = _spPageContextInfo.webAbsoluteUrl; getListItems(listName, url, function (data) { var html=""; var lihtml=""; for (var i = 0; i < data.d.results.length; i++) { console.log(JSON.stringify(data.d.results[i])); var item = data.d.results[i]; if(item.URL!=null){ //var description = item.Picture.Description; html += '<div class="item active" style="border-top:none !important">'; html += '<div class="row">'; html += '<div class="col-md-7">'; html += '<a href="#"><img src="'+item.URL.Url+'" class="img-responsive" /></a>'; html += '</div>'; html += ' <div class="col-md-5">'; html += ' <div class="carousel-caption">'; html += '<h3>'+item.Title+'</h3>'; html += '<p>Find out how our extensive engineering capability allows us to solve complex technical challenges</p>'; html += '<a href="#" target="_blank"><img src="'+item.URL.Url+'" /></a>'; html += '</div>'; html += '</div>'; html += '</div>'; html += '</div>'; console.log(JSON.stringify(html)); lihtml = '<li data-target="#carousel-top" data-slide-to="0" class="active"></li>'; var x = data; console.log(JSON.stringify(data)); }else{ html.push("<p>No Picture present</p>"); } }

(.carousel-inner").html(html);

(".carousel-inner").html(html);

这篇关于使用jQuery的图像幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！