コンテンツ、画像、サムネイルもあるスライダーに取り組んでいました。SO 私は正常に動作している次のスクリプトの作業を開始しました。
今、同じスクリプトを asp.net Web サイトにデータベースからのコンテンツと統合したいと考えています。
私のasp.netスライダーは、私が直面しているものを除いて、あらゆる種類の問題を最終的に修正することができました。ここで参照用にasp.net Webページ出力から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>