向jQuery代码添加事件侦听器

时间：2015-07-23 03:58:14

标签： jquery html css event-handling

我使用一些jQuery作为旋转木马图像滑块，它有两个按钮：下一个图像和上一个图像。如何向两个按钮添加鼠标单击事件侦听器，以便在单击任一按钮时，在滑块下方打印相应的文本，从而生成图片幻灯片，其中每张图片与某些文本相关联？任何见解将不胜感激。

<!DOCTYPE html>
  <html>
  <head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
  jQuery(document).ready(function ($) {

  $('#checkbox').change(function(){
    setInterval(function () {
    moveRight();
   }, 3000);
 });

var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;

$('#slider').css({ width: slideWidth, height: slideHeight });

$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

$('#slider ul li:last-child').prependTo('#slider ul');

function moveLeft() {
    $('#slider ul').animate({
        left: + slideWidth
    }, 200, function () {
        $('#slider ul li:last-child').prependTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

function moveRight() {
    $('#slider ul').animate({
        left: - slideWidth
    }, 200, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

$('button.control_prev').click(function () {
    moveLeft();
});

$('button.control_next').click(function () {
    moveRight();
});

});  

</script>
<style>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);  

nav { 
float: left;
background-color: #EEEFFF;
height: 1500px;
width: 100px;
}

html {
border-top: 5px solid #fff;
background: #58DDAF;
color: #2a2a2a;
}

html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans';
}

h1 {
color: #fff;
text-align: center;
font-weight: 300;
}

#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
}

#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 200px;
list-style: none;
}

#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 500px;
height: 300px;
background: #ccc;
text-align: center;
line-height: 300px;
}

button.control_prev, button.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
border:solid transparent;
}

button.control_prev:hover, button.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}

button.control_prev {
border-radius: 0 2px 2px 0;
}

button.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}

.slider_option {
position: relative;
margin: 10px auto;
width: 160px;
font-size: 18px;
}

</style>
</head>

<body>
<nav>
test
</nav>
<div id="slider">
  <button class="control_next"></button>
  <button class="control_prev"></button>
    <ul>
     <li>SLIDE 1</li>
     <li style="background: #aaa;">SLIDE 2</li>
     <li>SLIDE 3</li>
     <li style="background: #aaa;">SLIDE 4</li>
    </ul>  
</div>
</body>
</html>

2 个答案:

答案 0 :(得分：0)

我对以下2个功能稍作修改：

<强> DEMO 

function moveLeft() {
    $('#slider ul').animate({
        left: + slideWidth
    }, 200, function () {
        $('#slider ul li:last-child').prependTo('#slider ul');
        $('#slider ul').css('left', '');

    });
    var current=$("li.active"); //get the current active li
    var prev=current.prev('li'); //get its prev li
    current.removeClass('active'); //remove active from current li
    if(prev.length==0) //if no previous element is present
        $('li:last').addClass('active'); //make last li as active
    else
        prev.addClass('active'); //make prev li active
    var cur=$('li.active').attr('data-des'); once active is set to prev or next li get its data-des attribute
    $('.imageDes').fadeOut('500').text(cur).fadeIn('500'); //set it to a div

};

function moveRight() {
    $('#slider ul').animate({
        left: - slideWidth
    }, 200, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
    });
    var current=$("li.active");
    var next=current.next('li');
    current.removeClass('active');
    if(next.length==0)
        $('li:first').addClass('active');
    else
        next.addClass('active');
    var cur=$('li.active').attr('data-des');
    $('.imageDes').fadeOut('500').text(cur).fadeIn('500');
};

在moveLeft()上查看与moveRight()相同的评论。

你的HTML：

<div class="imageDes">Image 1</div><!--this is where you display your corresponding text-->
<button class="control_next"></button>
<button class="control_prev"></button>
<ul>
   <!--Added extra attribute to each li with name data-des-->
   <li class="active" data-des="Image 1">SLIDE 1</li> 
   <li data-des="Image 2" style="background: #aaa;">SLIDE 2</li>
   <li data-des="Image 3">SLIDE 3</li>
   <li data-des="Image 4" style="background: #aaa;">SLIDE 4</li>
</ul>

答案 1 :(得分：0)

根据Guruprasad Rao的回答，我只是稍微更新一下：

在＆＃34;在激活设置为prev或next li获取其data-des属性＆＃34;之前，您忘记了＆＃34; //＆＃34;。

＆＃13;
＆＃13; 
<!DOCTYPE html>
  <html>
  <head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
  jQuery(document).ready(function ($) {

  $('#checkbox').change(function(){
    setInterval(function () {
    moveRight();
   }, 3000);
 });

var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;

$('#slider').css({ width: slideWidth, height: slideHeight });

$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

$('#slider ul li:last-child').prependTo('#slider ul');

/*function moveLeft() {
    $('#slider ul').animate({
        left: + slideWidth
    }, 200, function () {
        $('#slider ul li:last-child').prependTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

function moveRight() {
    $('#slider ul').animate({
        left: - slideWidth
    }, 200, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};*/
function moveLeft() {
    $('#slider ul').animate({
        left: + slideWidth
    }, 200, function () {
        $('#slider ul li:last-child').prependTo('#slider ul');
        $('#slider ul').css('left', '');

    });
    var current=$("li.active"); //get the current active li
    var prev=current.prev('li'); //get its prev li
    current.removeClass('active'); //remove active from current li
    if(prev.length==0) //if no previous element is present
        $('li:last').addClass('active'); //make last li as active
    else
        prev.addClass('active'); //make prev li active
    var cur=$('li.active').attr('data-des'); //once active is set to prev or next li get its data-des attribute
    $('.imageDes').fadeOut('500').text(cur).fadeIn('500'); //set it to a div

};

function moveRight() {
    $('#slider ul').animate({
        left: - slideWidth
    }, 200, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
    });
    var current=$("li.active");
    var next=current.next('li');
    current.removeClass('active');
    if(next.length==0)
        $('li:first').addClass('active');
    else
        next.addClass('active');
    var cur=$('li.active').attr('data-des');
    $('.imageDes').fadeOut('500').text(cur).fadeIn('500');
};

$('button.control_prev').click(function () {
    moveLeft();
});

$('button.control_next').click(function () {
    moveRight();
});

});  

</script>
<style>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);  

nav { 
float: left;
background-color: #EEEFFF;
height: 1500px;
width: 100px;
}

html {
border-top: 5px solid #fff;
background: #58DDAF;
color: #2a2a2a;
}

html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans';
}

h1 {
color: #fff;
text-align: center;
font-weight: 300;
}

#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
}

#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 200px;
list-style: none;
}

#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 500px;
height: 300px;
background: #ccc;
text-align: center;
line-height: 300px;
}

button.control_prev, button.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
border:solid transparent;
}

button.control_prev:hover, button.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}

button.control_prev {
border-radius: 0 2px 2px 0;
}

button.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}

.slider_option {
position: relative;
margin: 10px auto;
width: 160px;
font-size: 18px;
}

</style>
</head>

<body>
<nav>
test
</nav>
<div id="slider">
  <!-- <button class="control_next"></button>
   <button class="control_prev"></button>
     <ul>
      <li>SLIDE 1</li>
      <li style="background: #aaa;">SLIDE 2</li>
      <li>SLIDE 3</li>
      <li style="background: #aaa;">SLIDE 4</li>
     </ul>  --> 
    <div class="imageDes">Image 1</div><!--this is where you display your corresponding text-->
    <button class="control_next"></button>
    <button class="control_prev"></button>
    <ul>
       <!--Added extra attribute to each li with name data-des-->
       <li class="active" data-des="Image 1">SLIDE 1</li> 
       <li data-des="Image 2" style="background: #aaa;">SLIDE 2</li>
       <li data-des="Image 3">SLIDE 3</li>
       <li data-des="Image 4" style="background: #aaa;">SLIDE 4</li>
    </ul>
</div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题