Я загрузил в Интернете часть исходного кода веб-сайта и увидел, что там реализован эффект переключения изображения домашней страницы CSDN. Хотя в прошлом в Интернете было много переизданий, код внутри определял массив в js для хранения информации об изображении, но сегодня этот метод стал более гибким! Все, что для этого нужно, это следующие шаги.
1. Создайте базу данных sql:
CREATE TABLE [dbo].[images] (
[imageid] [int] IDENTITY (1, 1) NOT NULL,
[imgUrl] [varchar] (50) COLLATE Chinese_PRC_CI_AS NULL,
[imgText] [varchar ] (50) COLLATE Chinese_PRC_CI_AS NULL ,
[imgLink] [nvarchar] (100) COLLATE Chinese_PRC_CI_AS NULL ,
[imgAlt] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL
) ON [PRIMARY]
2. Ссылка на внешний код CSS
<link href="styles / StyleSheet2.css" rel="stylesheet" type="text/css" />
3. Написать js-код: (не знаю, почему не получается вынести его в отдельный js-файл)
<script Language="javascript" " type="text/javascript " >
var imgWidth=248; //Ширина изображения
var imgHeight=200; //Высота изображения
var textFromHeight=21; //Высота текстового поля фокуса (единица измерения: пиксели)
var textStyle="whiter" ; // Стиль класса текста фокуса (не класс соединения)
var textLinkStyle="whiter"; // Стиль класса соединения слова фокуса
var buttonLineOn="#f60" // Цвет подчеркивания кнопки на
var buttonLineOff="#000"; //Цвет подчеркивания кнопки выключен
var TimeOut =5000; //Время переключения каждого изображения (единица измерения: миллисекунды);
var imgUrl=new Array();
var imgLink= new Array()
;
var imgAlt=new Array();
var adNum= 0;
// Таблица стилей высоты текстового поля фокуса начинается
document.write('<style type="text/css">');
document.write('#focuseFrom{width: '+(imgWidth+2)+';margin: 0px;padding:0px;height:'+(imgHeight+textFromHeight)+'px; overflow:hidden;}');
document.write('#txtFrom{height:' +textFromHeight+'px;line-height:'+ textFromHeight+'px;width:'+imgWidth+'px;overflow:hidden;}');
document.write('#imgTitle{width:'+imgWidth+';top:-' +(textFromHeight+14)+'px;height :18px}');
document.write('</style>');
document.write('<div id="focuseFrom">');
//Конец фокуса Таблица стилей высоты текстового поля
imgUrls="<%=imgUrl%>";//Получаем атрибуты фонового кода CS
imgtexts="<%=imgtext%>";
imgLinks="<%=imgLink%>"
imgAlts="<%=imgAlt
";%> ";
imgUrl=imgUrls.split(",");
imgtext=imgUrls.split(",");
imgLink=imgUrls.split(",");
imgAlt=imgUrls.split(",");
functionchangeimg(n)
{
adNum=n;
window.clearInterval(theTimer);
adNum
=adNum-1;
nextAd();
function
goUrl(){
window.open(imgLink[
adNum],'_blank');
NetScape запускается
, если (navigator.appName == "Netscape")
{
document.write('<style type="text/css">');
document.write('.buttonDiv{height:4px;width:21px;}' );
document.write('</style>');
function nextAd(){
if(adNum<(imgUrl.length-1))adNum++;
else adNum=1;
theTimer=setTimeout("nextAd()", TimeOut) ;
document.images.imgInit.src=imgUrl[adNum];
document.images.imgInit.alt=imgAlt[adNum];
//document.getElementById('focustext').innerHTML=imgtext[adNum];//под изображением Отобразить путь к изображению
document.getElementById('imgLink').href=imgLink[adNum];
}
document.write('<a id="imgLink" href="'+imgLink[1]+'" target=_blank class="p1"><img src="'+imgUrl[1]+'" name= "imgInit" width='+imgWidth+' height='+imgHeight+' border=1 alt="'+imgAlt[1]+'" class="imgClass"></a><div id="txtFrom"><span id="focustext" class="'+textStyle+'">'+imgtext[1]+'</span></div>');
document.write('<div id="imgTitle">');
document.write('<div id="imgTitle_down">');
//Код цифровой кнопки начинается
for(var i=1;i<imgUrl. length ;i++){document.write('<a href="javascript:changeimg('+i+')" class="button" style="cursor:hand" title="'+imgAlt[i]+'"> ' +i+'</a>');}
// Конец кода цифровой кнопки
document.write('</div>');
document.write('</div>');
document.write('
</div>');div> ');
nextAd();
}
//NetScape завершается
//IE запускается
else
{
var count=0;
for (i=1;i<imgUrl.length;i++) {
if( (imgUrl[i]!=" ") && (imgLink[i]!="")&&(imgtext[i]!="")&&(imgAlt[i]!="") ) {
count++;
} else {
Break;
}
}
function playTran() {
if (document.all)
imgInit.filters.revealTrans.play()
}
var key=0;
функция nextAd() {
if(adNum<count)adNum++;
else adNum=1;
if(key==0){
key=1;
} else if (document.all){
imgInit.filters.revealTrans.Transition=23;
imgInit.filters.revealTrans.apply
();
playTran()
; imgInit.src=imgUrl[adNum];
document.images.imgInit.alt=imgAlt[adNum];
document.getElementById('link'+adNum).style.background=buttonLineOn;
for (var i=1;i<=count); ;i++)
{
if (i!=adNum){document.getElementById('link'+i).style.background=buttonLineOff;}
}
//focustext.innerHTML=imgtext[adNum];//Отображение путиtheTimer
под image
=setTimeout("nextAd()", TimeOut);
}
document.write('<a target=_self href="javascript:goUrl()"><img style="FILTER: showTrans(duration=1,transition=5) ) ;" src="javascript:nextAd()" width='+imgWidth+' height='+imgHeight+' border=0 vspace="0" name=imgInit class="imgClass"></a><br>') ;
document.write('<div id="txtFrom"><span id="focustext" class="'+textStyle+'"></span></div>'); document.write( '
<div id= " imgTitle">');
document.write(' <div id="imgTitle_down"> <a class="trans"></a>');
//Код цифровой кнопки начинается
с (var i=1;i< imgUrl .length;i++)
{
document.write('<a id="link'+i+'" href="javascript:changeimg('+i+')" class="button" style="cursor:hand; " title = "'+imgAlt[i]+'" onFocus="this.blur()">'+i+'</a>'
}
//Конец кода цифровой кнопки
document.write('</div>'); );
document.write('</div>');
document.write('</div>');
document.write('</div>');
//
IE завершается
</script>
Важные места в нем прокомментированы, просто скопируйте его прямо в свой aspx-код.
Примечание. Не используйте тег <form></form> в <body></body>,
просто введите приведенный выше код js непосредственно в <div align=left> </div>. Я не знаю, почему некоторые формы всегда сообщают об ошибках imgInit.
4. Выполните вызовы базы данных в cs: Прямой код, ха-ха-ха, вы не можете его понять
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
bind();
}
}
public string imgUrl = " " , imgLink = "", imgtext = "", imgAlt = "";
voidbind()
{
using (SqlConnection Connection = new SqlConnection("server=.;database=northwind;uid=sa;pwd=123"))
{
SqlDataAdapter sda = new SqlDataAdapter("выбрать первые 5 * из изображений по идентификатору изображения", соединение
DataSet ds = new DataSet();
dt = new DataTable()
;
dt = ds.Tables [ 0];
for (int i = 0; i < dt.Rows.Count; i++)
{
imgUrl += dt.Rows[i]["imgUrl"].ToString() + ",";
imgtext += Rows. [i]["imgText"].ToString() + ",";
imgLink += dt.Rows[i]["imgLink"].ToString() + ",";
imgAlt += dt.Rows[i] [ "imgAlt"].ToString() + ","
} }
;
}
Тестовая среда: vs2005.
Если она выглядит хорошо и полезна для вас, пожалуйста, поставьте ей палец вверх! Если у вас есть хорошие предложения или решения, поделитесь ими, спасибо!
Электронная почта: [email protected]
QQ: 37210956