Question

我有一个jquery滑块的示例代码，它包含3个div幻灯片.. 它工作得很好，但我需要3个donts（小圆圈）也在同一个滑块。任何人都可以帮助我，如何添加它们。

我现在拥有的是什么 enter image description here

我想要的是相同的滑块，但我也想要3个点代表每个滑块，当我们点击点时它应该打开相应的滑块。

enter image description here

我的代码

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  <script type="text/javascript">
$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);
  </script>
</head>

<body>
<style>
#slider_one_img{
  float: left;
  background-image: url('one.jpg');
  width: 84px;
height: 86px;
}
#slider_two_img{
float: left;
background-image: url('two.png');
  width: 84px;
height: 86px;
}
#slider_three_img{
  float: left;
  background-image: url('three.jpg');
  width: 84px;
height: 86px;
}
#slider_one_text{

  width:70%;
  text-align: left;
  margin-top: 3%;
  float: left;

}

#slideshow { 
    margin: 68px auto; 
    position: relative; 
    width: 68%; 
    height: 120px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
    margin-left: 2%;
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}
</style>
<div id="slideshow">
   <div>
     <div id="slider_one_text">My first text</div>
     <div id="slider_one_img"></div>
   </div>
   <div>
      <div id="slider_one_text">My second text...erewrew.r.ewr.eqwr.ewrweqrqewrqwerwerwer
</div>
     <div id="slider_two_img"></div>
   </div>
   <div>
      <div id="slider_one_text">My third text skjsndgnsdkjgndnskgnksngk</div>
     <div id="slider_three_img"></div>
   </div>
</div>
</body>
</html>

Answer 1

你可以做这样的事情作为例子

http://jsfiddle.net/danhayman/yxnet/

jQuery的：

    $("#dot-wrapper div").click(function(){
    var index = $(this).index();
    $("#dot-wrapper div").removeClass("current").eq(index).addClass("current");
    $("#image-wrapper div").removeClass("current").eq(index).addClass("current");
    })

CSS：

#image-wrapper div{
    width: 10em;
    height: 10em;
    display: none;
}

#image-wrapper .current{
    display: block;
}

#image-wrapper div:nth-child(1){
   background-color:red; 
}

#image-wrapper div:nth-child(2){
   background-color:green; 
} 

#image-wrapper div:nth-child(3){
   background-color:blue; 
} 

#dot-wrapper div{
    width: 1em;
    height: 1em;
    border-radius: .5em;
    background-color: gray;
    display: inline-block;
    cursor: pointer;
    margin: .5em;
}

#dot-wrapper .current{
    background-color: black;
}

HTML：

<div id="image-wrapper">
    <div class="current"></div>
    <div></div>
    <div></div>
</div>

<div id="dot-wrapper">
    <div class="current"></div>
    <div></div>
    <div></div>
</div>

Jquery滑块修改？

1 个答案: