asp.net图片切换新闻怎么实现？

要实现像新浪网那样图片切换直接点图片连接到下个页面！

--------------------编程问答-------------------- 图片切换可以用 flash 或 javascript ，反正 C# 是不行 --------------------编程问答-------------------- 楼上的，谁说c#不行？c#不是也很简单么？ --------------------编程问答-------------------- 可以说下方法么？ --------------------编程问答--------------------

图片切换用 jquery 比较好。 --------------------编程问答-------------------- 有个广告控件，Ad开头的，你baidu一下。 --------------------编程问答-------------------- 说白了还不是 c#+js？？？？？？？



	public void BindImagexiao(StringBuilder sb, int pid, string color) {

		ProductSKU skuItem = new BusinessDAL().GetProductSKU(pid, color);

		if (skuItem != null) {

			int i = 0;

			if (skuItem.Image1 != null && skuItem.Image1 != "") {

				sb.Append("<span onmouseover=\"goimg(1," + count + ");\"><img id=\"pid" + i++ + "\" src=\"" + common.subImage(skuItem.Image1, "70x70_") + "\" width=\"71\" height=\"71\" /></span> ");

			}

			if (skuItem.Image2 != null && skuItem.Image2 != "")

				sb.Append("<span onmouseover=\"goimg(2," + count + ");\"><img id=\"pid" + i++ + "\" src=\"" + common.subImage(skuItem.Image2, "70x70_") + "\" width=\"71\" height=\"71\" /></span> ");

			if (skuItem.Image3 != null && skuItem.Image3 != "")

				sb.Append("<span onmouseover=\"goimg(3," + count + ");\"><img id=\"pid" + i++ + "\" src=\"" + common.subImage(skuItem.Image3, "70x70_") + "\" width=\"71\" height=\"71\"  /></span> ");

			if (skuItem.Image4 != null && skuItem.Image4 != "")

				sb.Append("<span onmouseover=\"goimg(4," + count + ");\"><img id=\"pid" + i++ + "\" src=\"" + common.subImage(skuItem.Image4, "70x70_") + "\" width=\"71\" height=\"71\"  /></span> ");

		}

	}



function goimg(num,count) {

	for (x=1;x<count;x++) {

	var aimg=document.getElementById("smallimg"+x);

	var bimg=document.getElementById("bigimg"+x);

		if(x==num) {

			aimg.style.visibility="visible";

			bimg.style.display="block";

		}

		else {

			aimg.style.visibility="hidden";

			bimg.style.display="none";

		}

		

	}

}

--------------------编程问答-------------------- http://blog.csdn.net/21aspnet/archive/2007/03/19/1534275.aspx Ajax无刷新实现图片切换特效 --------------------编程问答-------------------- js特效百度搜搜有好多 --------------------编程问答-------------------- 在网上看看吧。看到的合适效果的网站可以看看源文件什么的。呵呵 --------------------编程问答-------------------- jquery实现：



<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>

<script type="text/javascript"> 

$(function(){

    var page = 1;

    var i = 4; //每版放4个图片

    //向后 按钮

    $("span.next").click(function(){    //绑定click事件

	     var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素

		 var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”

		 var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素

		 var v_width = $v_content.width() ;

		 var len = $v_show.find("li").length;

		 var page_count = Math.ceil(len / i) ;   //只要不是整数，就往大的方向取最小的整数

		 if( !$v_show.is(":animated") ){    //判断“视频内容展示区域”是否正在处于动画

			  if( page == page_count ){  //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。

				$v_show.animate({ left : '0px'}, "slow"); //通过改变left值，跳转到第一个版面

				page = 1;

				}else{

				$v_show.animate({ left : '-='+v_width }, "slow");  //通过改变left值，达到每次换一个版面

				page++;

			 }

		 }

		 $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");

   });

    //往前 按钮

    $("span.prev").click(function(){

	     var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素

		 var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”

		 var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素

		 var v_width = $v_content.width();

		 var len = $v_show.find("li").length;

		 var page_count = Math.ceil(len / i) ;   //只要不是整数，就往大的方向取最小的整数

		 if( !$v_show.is(":animated") ){    //判断“视频内容展示区域”是否正在处于动画

		 	 if( page == 1 ){  //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。

				$v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow");

				page = page_count;

			}else{

				$v_show.animate({ left : '+='+v_width }, "slow");

				page--;

			}

		}

		$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");

    });

});

 

 

</script>

 

</head>

 

<body>

 

<div class="v_show">

	<div class="v_caption">

		<h2 class="cartoon" title="卡通动漫">卡通动漫</h2>

		<div class="highlight_tip">

			<span class="current">1</span><span>2</span><span>3</span><span>4</span>

		</div>

		<div class="change_btn">

			<span class="prev" >上一页</span>

			<span class="next">下一页</span>

		</div>

		<em><a href="#">更多>></a></em>

	</div>

	<div class="v_content">

		<div  class="v_content_list">

			<ul>

				<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>

				<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>

				<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>

				<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>

				<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>

				<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>

				<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>

				<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>

				<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>

				<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>

				<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>

				<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>

				<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>

				<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>

				<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>

				<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>

		     </ul>

		</div>

	</div>

</div>



实现效果图如下：



点击切换后

--------------------编程问答-------------------- --------------------编程问答--------------------

--------------------编程问答-------------------- 去百度JS轮播器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>JS轮播器</title>

<script type="text/javascript" src="../../lib/base.js"></script>

<script type="text/javascript">

/*window.onload=function () {

 var ul=getByClass('buttons')[0];

 var btns=ul.getElementsByTagName('li');

 var scrollContent=getByClass('scrollContent')[0];

 var cur=btns[0],t;

 for (var i=0;i<btns.length;i++) {

  (function (i) {

   btns[i].onmouseover=function () {

    clearTimeout(t);

    //scrollContent.style.top=(-i*150)+"px";

    var top=parseInt(scrollContent.style.top) || 0;

    animate(scrollContent,{top:top},{top:(-i*150)-top},1000,Tween.Quad.easeInOut);

    for (var j=0;j<btns.length;j++) {

     btns[j].className="";

    }

    this.className="hover";

    cur=this;

   };

   btns[i].onmouseout=function () {

    t=setTimeout(fn,1000);

   };

   btns[i].index=i;

  })(i);

 }

 btns[0].onmouseover();

 t=setTimeout(fn,1000);

 function fn() {

  var nextIndex=cur.index+1 ;

  if (nextIndex==btns.length) {

   nextIndex=0;

  }

  btns[nextIndex].onmouseover();

  t=setTimeout(fn,1000);

  

 }

};*/



/**

buttons [btn1,btn2..]  按钮数组

scrollContent 要滚动的内容

*/

function Player(buttons,scrollContent,imageHeight,hoverClass,timeout) {

 hoverClass=hoverClass || 'hover';

 timeout=timeout || 3000;

 this.buttons=buttons;

 this.scrollContent=scrollContent;

 this.hoverClass=hoverClass;

 this.timeout=timeout;

 this.imageHeight=imageHeight;

 

 this.curItem=buttons[0];

 var _this=this;

 for (var i=0;i<this.buttons.length;i++) {

  this.buttons[i].onmouseover=function () {

   _this.stop();

   _this.invoke(this.index);

  };

  this.buttons[i].onmouseout=function () {

   _this.start();

  };

  this.buttons[i].index=i;

 }

 this.invoke(0);

}



Player.prototype={

 start:function () {

  var _this=this;

  this.stop();

  this.interval=setInterval(function () {

   _this.next();

  },this.timeout);

 },

 stop:function () {

  clearInterval(this.interval);

 },

 invoke:function (n) {//具体显示哪一帧

  

  this.curItem=this.buttons[n];

  

  

  //this.scrollContent.style.top=-n*this.imageHeight+"px";

  var top=parseInt(this.scrollContent.style.top) || 0;

  this.animateIterval && this.animateIterval();

  this.animateIterval=animate(this.scrollContent,{

   top:top

  },{top:(-n*this.imageHeight)-top},1000,Tween.Quad.easeInOut);

  

  //先将所有按钮样式恢复

  this.recoverButtonsClass();

  this.curItem.className=this.hoverClass;

  

  

 },

 next:function () {

  //this.curItem.index//curItem当前的那一帧

  var nextIndex=this.curItem.index+1;

  if (nextIndex>=this.buttons.length) {

   nextIndex=0;

  }

  this.invoke(nextIndex);

 },

 recoverButtonsClass:function () {//将所有按钮样式恢复

  for (var i=0;i<this.buttons.length;i++) {

   this.buttons[i].className='';

  }

 }

};



 



window.onload=function () {

 var btns=getByClass('buttons')[0].getElementsByTagName('li');

 var scrollContent=getByClass('scrollContent')[0];

 var player=new Player(btns,scrollContent,150,undefined,1000);

 player.start();//开始播放

 

 //player.invoke(2);//切换到第4帧

 

 //player.stop();//停止轮播

 //

};





</script>

<style type="text/css">

.scrollContent {

width:470px;

height:750px;

position:absolute;

top:0;

left:0;

}

.scrollFrame {

width:470px;

height:150px;

overflow:hidden;

position:relative;

}

.scrollFrame .buttons {

height:30px;

position:absolute;

right:10px;

top:100px;

}

.scrollFrame .buttons li {

display:block;

width:20px;

height:20px;

border:1px solid orange;

float:left;

margin-right:4px;

text-align:center;

line-height:20px;

cursor:pointer;

color:orange;

background:white;

font-weight:bold;

}

.scrollFrame .buttons li.hover {

width:24px;

height:24px;

line-height:24px;

background:orange;

color:white;

margin-top:-2px;

}

/*

img {

 display:block;

}*/

</style>

</head>

<body>

 <h1>JS轮播器</h1>





<div class="scrollFrame">

 <div class="scrollContent">

  <img src="1.jpg" alt="1" />

  <img src="2.gif" alt="1" />

  <img src="3.gif" alt="1" />

  <img src="4.gif" alt="1" />

  <img src="5.jpg" alt="1" />

 </div>

 <ul class="buttons">

  <li>1</li>

  <li>2</li>

  <li>3</li>

  <li>4</li>

  <li>5</li>

 </ul>

</div>

</body>

</html>

--------------------编程问答-------------------- 局部刷新，要么ajax，要么FLASH。 --------------------编程问答-------------------- 收藏。。。 --------------------编程问答-------------------- jQuery 封装好的插件很多  各个浏览器兼容性也很好。
http://www.oschina.net/code/list_releted_codes?id=3019&p=1

网上很多，你可以搜索下。 --------------------编程问答-------------------- 用flash比较好。 --------------------编程问答--------------------   纯js 。

     <%@ Control Language="C#" AutoEventWireup="true" CodeFile="FlashImage.ascx.cs" Inherits="UserControls_FlashImage" %>

<div id="AD" style="border: 2px solid #C8ECFF">
  <script type="text/javascript">
      imgUrl1 = "Images/1.jpg";
      imgtext1 = "图片名称（自定义）"
      imgLink1 = escape("http://www.jfstudio.net");
      imgUrl2 = "Images/2.jpg";
      imgtext2 = "图片名称（自定义）"
      imgLink2 = escape("http://www.jfstudio.net");
      imgUrl3 = "Images/3.jpg";
      imgtext3 = "图片名称（自定义） "
      imgLink3 = escape("http://www.jfstudio.net");
      imgUrl4 = "Images/4.jpg";
      imgtext4 = "图片名称（自定义）
      imgLink4 = escape("http://www.jfstudio.net");
      imgUrl5 = "Images/5.jpg";
      imgtext5 = "图片名称（自定义）"
      imgLink5 = escape("http://sonye.csdn.net/");

      var focus_width = 538
      var focus_height = 150
      var text_height = 18
      var swf_height = focus_height + text_height

      var pics = imgUrl1 + "|" + imgUrl2 + "|" + imgUrl3 + "|" + imgUrl4 + "|" + imgUrl5
      var links = imgLink1 + "|" + imgLink2 + "|" + imgLink3 + "|" + imgLink4 + "|" + imgLink5
      var texts = imgtext1 + "|" + imgtext2 + "|" + imgtext3 + "|" + imgtext4 + "|" + imgtext5

      document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="' + focus_width + '" height="' + swf_height + '">');
      document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="Images/focus2.swf"><param name="quality" value="high"><param name="bgcolor" value="#F0F0F0">');
      document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
      document.write('<param name="FlashVars" value="pics=' + pics + '&links=' + links + '&texts=' + texts + '&borderwidth=' + focus_width + '&borderheight=' + focus_height + '&textheight=' + text_height + '">');
      document.write('</object>');
</script>
</div>

补充：.NET技术 ,  ASP.NET