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> ");
}
}
--------------------编程问答-------------------- http://blog.csdn.net/21aspnet/archive/2007/03/19/1534275.aspx Ajax无刷新实现图片切换特效 --------------------编程问答-------------------- js特效 百度搜搜 有好多 --------------------编程问答-------------------- 在网上看看吧。看到的合适效果的网站可以看看源文件什么的。呵呵 --------------------编程问答-------------------- jquery实现 :
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";
}
}
}
--------------------编程问答-------------------- --------------------编程问答--------------------
<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">--------------------编程问答-------------------- 局部刷新,要么ajax,要么FLASH。 --------------------编程问答-------------------- 收藏。。。 --------------------编程问答-------------------- jQuery 封装好的插件很多 各个浏览器兼容性也很好。
<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>
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