Как вращать и выцветать фоновые изображения с помощью javascript / ASP.NET / CSS - PullRequest
Новая
       17

Как вращать и выцветать фоновые изображения с помощью javascript / ASP.NET / CSS

4 голосов
/ 28 сентября 2008

Мне нужно, чтобы мои фоновые изображения появлялись и исчезали случайным образом.

Это будет временная функция, как раз в 5 секунд.
Мне нужно сделать это с ASP.NET, Javascript, CSS или всеми тремя.

Пожалуйста, помогите мне, ребята. Спасибо.

Ответы [ 3 ]

5 голосов
/ 29 сентября 2008

Cycle, плагин jQuery - очень гибкое решение для поворота изображений: http://malsup.com/jquery/cycle/

2 голосов
/ 28 сентября 2008

Это ответ: не обращайте внимания, ребята, сделав более точный поиск в Google. Я нашел хорошее решение. 

<html>
<head>
<!--
This file retrieved from the JS-Examples archives
http://www.js-examples.com
1000s of free ready to use scripts, tutorials, forums.
Author: Steve S - http://jsmadeeasy.com/ 
-->

<style>
body
{
/*Remove below line to make bgimage NOT fixed*/
background-attachment:fixed;
background-repeat: no-repeat;
/*Use center center in place of 300 200 to center bg image*/
background-position: 300 200;
}
</style>

<script language="JavaScript1.2">
/* you must supply your own immages */
var bgimages=new Array()
bgimages[0]="http://js-examples.com/images/blue_ball0.gif"
bgimages[1]="http://js-examples.com/images/red_ball0.gif"
bgimages[2]="http://js-examples.com/images/green_ball0.gif"

//preload images
var pathToImg=new Array()
for (i=0;i<bgimages.length;i++)
{
  pathToImg[i]=new Image()
  pathToImg[i].src=bgimages[i]
}

var inc=-1

function bgSlide()
{
  if (inc<bgimages.length-1)
    inc++
  else
    inc=0
  document.body.background=pathToImg[inc].src
}

if (document.all||document.getElementById)
  window.onload=new Function('setInterval("bgSlide()",3000)')
</script>

</head>
<body>
<BR><center><a href='http://www.js-examples.com'>JS-Examples.com</a></center> 
</body>
</html>

Нашел здесь .

0 голосов
/ 01 декабря 2010

Только что нашел учебник о том, как это сделать с помощью фоновых изображений CSS и jQuery на ...
http://www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html

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

Редактировать 1

Вышеупомянутая jQuery, на которую ссылаются, похоже, решила мою проблему, когда плагин jQuery Cycle не смог. Посмотрите на http://egdata.com/baf/ для примера. Основная проблема заключалась в том, что слайд-шоу содержало слайды шириной 1500 пикселей, ширина страницы которых составляла 960 пикселей.

По какой-то причине плагин jQuery Cycle добавляет свойство стиля css для ширины при отображении текущего слайда. Первоначально это выглядело правильно, но происходит сбой при изменении размера окна браузера. Цикл, кажется, устанавливает ширину слайдов при загрузке, и в моем случае мне нужно, чтобы ширина оставалась 100% вместо фактической ширины окна в пикселях. http://egdata.com/baf/index_cycle.html

...