我有一个图像滑块，它是一个响应滑块。我试图显示滑块，它无法正常显示。
HTML
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>sample</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
<div class="leftdiv">
<div class="slider">
<!-- <div class="sliderMask"> -->
<ul class="sliderWrapper">
<li>
<!-- top-story-bg start-->
<div class="top-story-bg" >
<h4 class="top-story-head-font"><a href="#">Madhuri and Ranbir in yeh jawaani hai deewani</a></h4>
<p class="top-story-intro top-story-introId">Actress Yami Gautam, who won accolades for her performance in 'Vicky Donor', is all set to be part of a romantic comedy which may also star Sharman Joshi.</p>
</div><!-- top-story-bg closed-->
<img src="images/one.jpg" alt="one" >
</li>
<li>
<!-- top-story-bg start-->
<div class="top-story-bg" >
<h4 class="top-story-head-font"><a href="#">Madhuri and Ranbir in yeh jawaani hai deewani</a></h4>
<p class="top-story-intro top-story-introId">Mumbai: Actress Yami Gautam, who won accolades for her performance in 'Vicky Donor', is all set to be part of a romantic comedy which may also star Sharman Joshi.</p>
</div><!-- top-story-bg closed-->
<img src="images/two.jpg" alt="two" >
</li>
<li>
<!-- top-story-bg start-->
<div class="top-story-bg" >
<h4 class="top-story-head-font"><a href="#">Madhuri and Ranbir in yeh jawaani hai deewani</a></h4>
<p class="top-story-intro top-story-introId">Mumbai: Actress Yami Gautam, who won accolades for her performance in 'Vicky Donor', is all set to be part of a romantic comedy which may also star Sharman Joshi.</p>
</div><!-- top-story-bg closed-->
<img src="images/three.jpg" alt="three">
</li>
<li>
<!-- top-story-bg start-->
<div class="top-story-bg" >
<h4 class="top-story-head-font"><a href="#">Madhuri and Ranbir in yeh jawaani hai deewani</a></h4>
<p class="top-story-intro top-story-introId">Mumbai: Actress Yami Gautam, who won accolades for her performance in 'Vicky Donor', is all set to be part of a romantic comedy which may also star Sharman Joshi.</p>
</div><!-- top-story-bg closed-->
<img src="images/one.jpg" alt="one" >
</li>
<li>
<!-- top-story-bg start-->
<div class="top-story-bg" >
<h4 class="top-story-head-font"><a href="#">Madhuri and Ranbir in yeh jawaani hai deewani</a></h4>
<p class="top-story-intro top-story-introId">Mumbai: Actress Yami Gautam, who won accolades for her performance in 'Vicky Donor', is all set to be part of a romantic comedy which may also star Sharman Joshi.</p>
</div><!-- top-story-bg closed-->
<img src="images/two.jpg" alt="one" >
</li>
<li>
<!-- top-story-bg start-->
<div class="top-story-bg" >
<h4 class="top-story-head-font"><a href="#">Madhuri and Ranbir in yeh jawaani hai deewani</a></h4>
<p class="top-story-intro top-story-introId">Mumbai: Actress Yami Gautam, who won accolades for her performance in 'Vicky Donor', is all set to be part of a romantic comedy which may also star Sharman Joshi.</p>
</div><!-- top-story-bg closed-->
<img src="images/two.jpg" alt="one" >
</li>
</ul>
<!-- </div> -->
<div class="triggersMask">
<ul class="triggers">
<li>●</li>
<li>●</li>
<li>●</li>
<li>●</li>
<li>●</li>
</ul>
</div>
<span class="control prev"></span>
<span class="control next"></span>
</div>
</div>
<div class="rightdiv">
</div>
<div class="wrapperdiv">
</div>
</body>
</html>
CSS
@charset "utf-8";
.leftdiv{
width: 60%;
height: auto;
overflow: hidden;
float: left;
}
.rightdiv{
background: orange;
float: left;
width: 40%;
height: 300px;
overflow: hidden;
}
.wrapperdiv{
clear: both;
background: #ccc;
width: 100%;
height: 200px;
overflow: hidden;
}
.slider{
width: 100%;
height: auto;
overflow: hidden;
position: relative;
}
ul.sliderWrapper {
position:relative;
top:0px;left:0px;
margin-left: 0px;
margin-top: 0px;
width: 100%;
height: auto;
}
ul.sliderWrapper li {
position:absolute;
left:0px;
width: 100%;
height: auto;
}
ul.sliderWrapper li img{
width: 100%;
height: auto;
}
.triggersMask{
background: none repeat scroll 0 0 #000000;
bottom: 0;
margin: 0 auto;
padding: 10px 0px;
position: absolute;
text-align: center;
width: 100%;
}
ul.triggers {
display: block;
margin: 0 auto;
}
ul.triggers li {
margin:0 5px;
padding:2px 8px;
font: bold 26px;
cursor:pointer;
color:red;
display: inline;
width: 15px;
height: 15px;
list-style: none;
}
ul.triggers li.selected {
color:#fff;
}
.control {position:absolute; top: 33%; color:#000; cursor:pointer; width: 16px; height: 25px;}
.prev {
left:20px;
background: url(../images/prev.png) no-repeat;
}
.next {
right:20px;
background: url(../images/next.png) no-repeat;
}
.sliderWrapper .top-story-bg {
height: auto;
width: 100%;
zoom:1;
position: absolute;
padding-bottom: 10px;
background-image: url('../img/Section-top-story-gradient.png');
background-repeat: repeat-x;
background-position: bottom left;
margin: 0;
padding: 0;
bottom:0px;
left: 0px;
display: block;
}
.top-story-head-font {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 20px;
color: #FFFFFF;
font-weight: normal;
padding: 0px;
margin: 30px 10px 0 10px;
display:block
}
.top-story-head-font a{
color: #FFFFFF;
font-weight: normal;
}
.top-story-head-font a:hover{
text-decoration: underline;
}
.top-story-intro{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;
color: #FFFFFF;
font-weight: normal;
line-height: 150%;
padding: 0px;
margin: 15px 10px 0 10px;
}
JS
// JavaScript Document
function slideCarousal() {
var triggers = $('ul.triggers li');
var sliderWrapper = $('ul.sliderWrapper li');
var lastElem = triggers.length-1;
var target;
triggers.first().addClass('selected');
sliderWrapper.hide().first().show();
function sliderResponse(target) {
sliderWrapper.fadeOut(1000).eq(target).fadeIn(1100);
triggers.removeClass('selected').eq(target).addClass('selected');
}
sliderWrapper.on('click touchend', function(){
target = $('ul.triggers li.selected').index();
target === lastElem ? target = 0 : target = target+1;
sliderResponse(target);
resetTiming();
});
triggers.click(function() {
if ( !$(this).hasClass('selected') ) {
target = $(this).index();
sliderResponse(target);
resetTiming();
}
});
$('.next').click(function() {
target = $('ul.triggers li.selected').index();
target === lastElem ? target = 0 : target = target+1;
sliderResponse(target);
resetTiming();
});
$('.prev').click(function() {
target = $('ul.triggers li.selected').index();
lastElem = triggers.length-1;
target === 0 ? target = lastElem : target = target-1;
sliderResponse(target);
resetTiming();
});
function sliderTiming() {
target = $('ul.triggers li.selected').index();
target === lastElem ? target = 0 : target = target+1;
sliderResponse(target);
}
var timingRun = setInterval(function() { sliderTiming(); },3000);
function resetTiming() {
clearInterval(timingRun);
timingRun = setInterval(function() { sliderTiming(); },3000);
}
}
$(document).ready(function() {
slideCarousal() ;
});