Переключаться между тремя изображениями по клику? - PullRequest
Новая
       23

Переключаться между тремя изображениями по клику?

1 голос
/ 14 февраля 2012

У меня есть 3 изображения белок: 

<img src="images/SquirrelFull.jpeg"  class="squirrel">
<img src="images/SquirrelName.jpeg"  class="squirrel">
<img src="images/SquirrelEmpty.jpeg"  class="squirrel">

Я хочу поместить их друг на друга и «переключаться» между ними одним щелчком мыши.Кто-нибудь может мне помочь?

Ответы [ 5 ]

3 голосов
/ 14 февраля 2012

Если вы не хотите использовать плагин, вот пример того, как вы можете переключаться между своими белками:

http://jsfiddle.net/jAMzV/

По сути, я помещаю белок в родительский контейнери спрятать их всех, кроме одного с классом default.Затем вы связываете событие click с белками, которое выполняет следующие действия:

Скрыть скрытый клик, который является единственным видимым. Проверьте, есть ли следующий элемент в строке, если его нет, выберите первый ипокажите это, иначе покажите следующее.

Таким образом, оно повторяется снова и снова.

1 голос
/ 14 февраля 2012

Вы можете использовать JQueryCycle плагин. Легко учиться и мощно ... Вы найдете всю необходимую информацию на их странице

Здесь я думаю, что вы хотите: 

<h1>Example</h1>
<div id="s1" class="pics">
                <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
                <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
                <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
</div>
<div class="nav">(Click on image for next slide)</div>
<pre>
<code class="mix">$('#s1').cycle({
        fx:     'slideY',
        speed:  300,
        next:   '#s1',
        timeout: 0 });
0 голосов
/ 26 марта 2015

Я постараюсь дать еще одно решение ... Работа ... 

$('img').click(function () {
  $('img').each(function(){
    var classes = ['icon','icon1','icon2'];
    this.className = classes[($.inArray(this.className, classes)+1)%classes.length];
  });
});
#container {
		position: relative;
		height: 80px;
		width: 80px;
		margin: auto;
		overflow: hidden;
		top: 30%; left: 0; bottom: 0; right: 0;
	}
	
	.icon {
		position: absolute;
		width:80px;
		height:80px;
		

	}
	.icon1  {
		position: relative;
		display: none;

	}
	.icon2  {
		position: relative;
		display: none;

	}				
<!DOCTYPE>
<html>
<head>
<title>Little Twitter Buttons</title>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="container">
<img class="icon" src="http://i.imgur.com/9FEVXE2.png" alt="*" height="80" width="80"/>
<img class="icon1" src="http://i.imgur.com/zZ1w6Qt.png" alt="*" height="80" width="80"/>
<img class="icon2" src="http://i.imgur.com/TRWB1qO.png" alt="*" height="80" width="80"/>
</div>
</body>
</html>
0 голосов
/ 14 февраля 2012

Я думаю, вы хотите сделать что-то вроде этого:

http://jsfiddle.net/Fzxgd/1/

0 голосов
/ 14 февраля 2012

Вы можете взять jCarousel: http://sorgalla.com/projects/jcarousel/examples/static_circular.html
Для этого вам нужно всего лишь написать на JavaScript это: 

    $(function(){

/*#mycarousel is the ID from the ul list*/

    $('#mycarousel').jcarousel({
        "wrap": 'circular',
        "scroll": 1
    });

в html вы не должны забывать это: 

<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script src="jquery.jcarousel.min.js" type="text/javascript"></script>

и тогда вы можете просто создать свой слайд с правильными классами 

<div class="jcarousel-container jcarousel-container-horizontal" id="pictureslide">
  <div class="jcarousel-clip jcarousel-clip-horizontal" id="pic" style='position: relative;'>
    <ul id="mycarousel" class="jcarousel-list jcarousel-list-horizontal">
        <li class='jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal' id='jcarousel-item-1'>
            <img src="images/SquirrelFull.jpeg"  class="squirrel">
            </li>
        <li class='jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-2-horizontal' id="jcarousel-item-2" >
            <img src="images/SquirrelName.jpeg"  class="squirrel">
            </li>
        <li class='jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-3-horizontal' id="jcarousel-item-3" >
        <img src="images/SquirrelEmpty.jpeg"  class="squirrel">
        </li>
    </ul>   
    </div>
 <!-- Here are the arrows-->   
    <div class="jcarousel-prev jcarousel-prev-horizontal" style="display:'block'">
        <a class="controls prev" href="#"><img id="arrow-left" src="pic/arrow_left.png" alt="arrow-left" /></a>
    </div>
    <div class="jcarousel-next jcarousel-next-horizontal" style="display:'block'">
        <a class="controls next" href="#"><img id="arrow-right" src="pic/arrow_right.png" alt="arrow-right"/></a>
    </div>
...