我正在研究一个包含内容、图像和缩略图的滑块。所以我开始研究以下运行良好的脚本。
现在我想将 asp.net 网站中的相同脚本与来自数据库的内容集成。
我的 asp.net 滑块开始给我带来各种各样的问题，最后设法解决了大部分问题，除了我面临的那个我从 asp.net 网页输出创建 HTML 文件供您参考
它与工作示例中的代码几乎相同，我无法弄清楚为什么滑块在TEST.HTML页面上不起作用。
此问题已解决，问题出在 HTML 标记中。
代码
<!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 id="Head1"><title>
</title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><link href="../styles/english_css.css" rel="stylesheet" type="text/css" /></head>
<body id="body" dir="ltr">
<form method="post" action="Default.aspx?language=en-us&issue=5" id="frmMasterPage">
<script src="http://demo.kashmirsouq.com/scripts/slider/jquery.js" type="text/javascript"></script>
<script src="http://demo.kashmirsouq.com/scripts/slider/jquery.easing.js" type="text/javascript"></script>
<script src="http://demo.kashmirsouq.com/scripts/slider/script.js" type="text/javascript"></script>
<link href="http://demo.kashmirsouq.com/styles/slider-en.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
var buttons = { previous: $('#jslidernews2 .button-previous'),
next: $('#jslidernews2 .button-next')
};
$('#jslidernews2').lofJSidernews({ interval: 5000,
direction: 'opacity', // for fading effect
easing: 'linear', // for fading effect
//easing:'easeInOutQuad', // for transition effect
duration: 1200,
auto: true,
mainWidth: 590,
mainHeight: 300,
navigatorHeight: 76,
navigatorWidth: 160,
maxItemDisplay: 4,
buttons: buttons
});
});
</script>
<style>
ul.lof-main-wapper li {
position:relative;
}
</style>
<div id="jslidernews2" class="lof-slidecontent" style="width:750px; height:300px;">
<div class="button-previous">Previous</div>
<!-- MAIN CONTENT -->
<div class="main-slider-content" style="width:590px; height:300px; float:right;">
<ul class="sliders-wrap-inner">
<li>
<img src="http://demo.kashmirsouq.com/images/article/94618045-044c-4977-a5d7-bf2a44f19f1e.png" />
<div class="slider-description">
<h4>Sheikh Mohammed holds fast to his father’s le...</h4>
<a class="readmore" href="#">Read more </a>
</div>
</li>
</ul>
</div>
<div class="main-slider-content" style="width:590px; height:300px; float:right;">
<ul class="sliders-wrap-inner">
<li>
<img src="http://demo.kashmirsouq.com/images/article/5daed017-e3aa-49d8-b477-ce607dfcbd51.png" />
<div class="slider-description">
<h4>It’s time the Lebanese removed their shackles...</h4>
<a class="readmore" href="#">Read more </a>
</div>
</li>
</ul>
</div>
<div class="main-slider-content" style="width:590px; height:300px; float:right;">
<ul class="sliders-wrap-inner">
<li>
<img src="http://demo.kashmirsouq.com/images/article/d158c479-6559-46c9-bae7-e7e04a1cbf9b.png" />
<div class="slider-description">
<h4>Belarus is open for business</h4>
<a class="readmore" href="#">Read more </a>
</div>
</li>
</ul>
</div>
<div class="main-slider-content" style="width:590px; height:300px; float:right;">
<ul class="sliders-wrap-inner">
<li>
<img src="http://demo.kashmirsouq.com/images/article/de155ceb-c148-495b-9aa0-ad1f9f0f463c.png" />
<div class="slider-description">
<h4>A Royal Visit</h4>
<a class="readmore" href="#">Read more </a>
</div>
</li>
</ul>
</div>
<div class="main-slider-content" style="width:590px; height:300px; float:right;">
<ul class="sliders-wrap-inner">
<li>
<img src="http://demo.kashmirsouq.com/images/article/ff435532-635a-4089-b7e3-858a305cbfed.png" />
<div class="slider-description">
<h4>Building Dubai together</h4>
<a class="readmore" href="#">Read more </a>
</div>
</li>
</ul>
</div>
<div class="main-slider-content" style="width:590px; height:300px; float:right;">
<ul class="sliders-wrap-inner">
<li>
<img src="http://demo.kashmirsouq.com/images/article/5a2d74a8-5ce8-4816-895b-7235ac2b3081.png" />
<div class="slider-description">
<h4>Two new debuts from Mitsubishi</h4>
<a class="readmore" href="#">Read more </a>
</div>
</li>
</ul>
</div>
<div class="navigator-content">
<div class="navigator-wrapper">
<ul class="navigator-wrap-inner">
<li>
<div>
<img src="http://demo.kashmirsouq.com/images/article/94618045-044c-4977-a5d7-bf2a44f19f1e.png" />
</div>
</li>
</ul>
</div>
</div>
<div class="navigator-content">
<div class="navigator-wrapper">
<ul class="navigator-wrap-inner">
<li>
<div>
<img src="http://demo.kashmirsouq.com/images/article/5daed017-e3aa-49d8-b477-ce607dfcbd51.png" />
</div>
</li>
</ul>
</div>
</div>
<div class="navigator-content">
<div class="navigator-wrapper">
<ul class="navigator-wrap-inner">
<li>
<div>
<img src="http://demo.kashmirsouq.com/images/article/d158c479-6559-46c9-bae7-e7e04a1cbf9b.png" />
</div>
</li>
</ul>
</div>
</div>
<div class="navigator-content">
<div class="navigator-wrapper">
<ul class="navigator-wrap-inner">
<li>
<div>
<img src="http://demo.kashmirsouq.com/images/article/de155ceb-c148-495b-9aa0-ad1f9f0f463c.png" />
</div>
</li>
</ul>
</div>
</div>
<div class="navigator-content">
<div class="navigator-wrapper">
<ul class="navigator-wrap-inner">
<li>
<div>
<img src="http://demo.kashmirsouq.com/images/article/ff435532-635a-4089-b7e3-858a305cbfed.png" />
</div>
</li>
</ul>
</div>
</div>
<div class="navigator-content">
<div class="navigator-wrapper">
<ul class="navigator-wrap-inner">
<li>
<div>
<img src="http://demo.kashmirsouq.com/images/article/5a2d74a8-5ce8-4816-895b-7235ac2b3081.png" />
</div>
</li>
</ul>
</div>
</div>
<!-- MAIN CONTENT -->
<div class="button-next">Next</div>
<!-- BUTTON PLAY-STOP -->
<div class="button-control"><span></span></div>
<!-- END OF BUTTON PLAY-STOP -->
</div>
</form>
</body>
</html>