Jump to content

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


Recommended Posts

Здравствуйте ув.форумчане!

Помогите плиз,как мне сделать смену изображений при наведении курсора на картинку-ссылку,но сразу скажу что мне нужно чтобы подряд менялись много изображений (например 20 штук).

 

Может есть у кого скрипт,поделитесь плиз,буду благодарна.

Link to post
Share on other sites

Есть вопрос? Задай его профессиональным веб-мастерам, SEO и другим специалистам!

Вот нашла скрипт..но проблема в том что когда отводишь курсор,то первоначальная картинка не возвращается.И ещё проблема в том что работает только для одного изображения,то есть если на странице 50 изображений,то при наведении на одно — меняются одновременно на всех.

Помогите плиз..


<script type="text/javascript">

var images = new Array("1/thumbail_img/1.jpg", "1/thumbail_img/2.jpg", "1/thumbail_img/3.jpg", "1/thumbail_img/4.jpg");
var curId = 0;
var interval = 0;
function changeImg()
{
    curId = ( ++curId > images.length - 1 ) ? 0 : curId;
    $("#my_a img").attr("src", "./" + images[curId]);
}

$(document).ready(function(){
    $("#my_a").on('mouseover', function(){
       interval = setInterval(changeImg, 1000);
    });
    $("#my_a").on('mouseout', function(){
        clearInterval(interval);
    });
});
</script>
<a id="my_a" href="#"><img src="./img1.jpg"></a>
Link to post
Share on other sites
  • Модератор

Помогите плиз кто знает как решить эту задачу.

Весь день мучаюсь,но я ноль в JAVA.

На Вас правило о запрете АПа темы не действует уже? Или я что то упустил?

Предупреждение

Link to post
Share on other sites

Помогите плиз кто знает как решить эту задачу.

Весь день мучаюсь,но я ноль в JAVA.

вот например

<script type="text/javascript">

function start_animate (obj, imgs){
	img_obj = obj;
	m_img = obj.src;
	anim_imgs = explode (',', imgs);
	reg=/\/([^\/]+).jpg/;
	match=reg.exec(obj.src);
	count_img = anim_imgs.length;
	for (k in anim_imgs){
		if (k.match(/^[-\+]?\d+/) !== null){
			s_img = reg.exec (anim_imgs[k]);
			if (anim_imgs[k] == obj.src || hex_md5 (anim_imgs[k]) == match[1] || s_img[1] == match[1] ) cur_num = k;
		}
	}

	if (cur_num == undefined) cur_num = 0;
	inter = setInterval ("anim_img ();", 500);
}

function anim_img (){
	cur_num++;
	if (cur_num >= count_img) cur_num = 0;
	img_obj.src = anim_imgs[cur_num];
}

function stop_animate (){
	clearInterval (inter);
	img_obj.src = m_img;
}</script>

<img onmouseout="stop_animate();" onmouseover="start_animate(this, "/img2.jpg,/img3.jpg,/img4.jpg,/img5.jpg");" alt="описание" src="/img1.jpg">

Link to post
Share on other sites

 

totamon


Не знаю как у вас но у меня почему-то он не работает.Покопаюсь мож что не так.

 

 

 


А так выкладываю полностью рабочий код смены изображений превьюшек при на ведении на неё.

и прошу Воланда принять мои извиниения по поводу апа темы.

 

 

 

<script src="scripts/jquery-1.8.2.min.js"></script>

<script>

$(function() {

$('img').hover(function() {

var _this = this,

images = _this.getAttribute('data').split(',');

counter = 0;

this.setAttribute('data-src', this.src);

//

_this.timer = setInterval(function() {

if(counter > (images.length-1)) {

counter = 0;

}

_this.src=images[counter];

 

counter++;

}, 800);

 

}, function() {

this.src = this.getAttribute('data-src');

clearInterval(this.timer);

});

});

</script> 


<a href="" class="любой класс,в принципе он тут и не нужен"> <img src="1.jpg" data="1.jpg, 2.jpg, и т.д. " alt=""></a>

 


Спасибо тему можно закрывать.

Edited by kisa
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...