js之图片轮换显示(横着显示)
预实现效果:
图片横着轮流显示,js代码:
代码
1 <script language="javascript" type="text/javascript" >
2 function picExchange(divPicName,td1Name,td2Name,conprev,connext)
3 {
4 var speed=50;//图片从左到右的速度
5 var time=3000;//向前,向后按钮点击后恢复时间
6 var timeOut;
7 var divPic=document.getElementById(divPicName);
8 var td1=document.getElementById(td1Name);
9 var td2=document.getElementById(td2Name);
10 divPic.style.display="block";
11 td1.children[0].style.width=160*td1.children[0].children.length;
12 td2.innerHTML=td1.innerHTML;
13 var PicEx=setInterval(function(){picExchangeEx(divPic,td1,td2);},speed);
14 divPic.onmouseover=function() {clearInterval(PicEx)}
15 divPic.onmouseout=function() {clearInterval(PicEx);PicEx=setInterval(function(){picExchangeEx(divPic,td1,td2);},speed);}
16 //两个控制按钮
17 document.getElementById(conprev).onclick=function()
18 {
19 clearInterval(PicEx);
20 divPic.scrollLeft=(divPic.scrollLeft/160-divPic.scrollLeft/160%1-1)*160;
21 if(timeOut)clearTimeout(timeOut);
22 timeOut=setTimeout(function(){clearInterval(PicEx);PicEx= setInterval(function(){picExchangeEx(divPic,td1,td2);} , speed);},time);
23 }
24 document.getElementById(connext).onclick=function()
25 {
26 clearInterval(PicEx);
27 var left=divPic.scrollLeft/160-divPic.scrollLeft/160%1+1;
28 var imgNum=td1.children[0].children.length;
29 if(left==imgNum){
30 divPic.scrollLeft=0;
31 left=0;
32 }
33 if((left-1==imgNum-4)&&timeOut)
34 divPic.scrollLeft=(imgNum-4)*160;
35 else
36 divPic.scrollLeft=left*160;
37 if(timeOut)clearTimeout(timeOut);
38 timeOut=setTimeout(function() {clearInterval(PicEx);PicEx=setInterval(function(){picExchangeEx(divPic,td1,td2);},speed);},time);
39 }
40 }
41 function picExchangeEx(obj,obj1,obj2)
42 {
43 if(obj2.offsetWidth-obj.scrollLeft<=0){
44 obj.scrollLeft=0;
45 }
46 else{
47 obj.scrollLeft++;
48 }
49 }
50 </script>
2 function picExchange(divPicName,td1Name,td2Name,conprev,connext)
3 {
4 var speed=50;//图片从左到右的速度
5 var time=3000;//向前,向后按钮点击后恢复时间
6 var timeOut;
7 var divPic=document.getElementById(divPicName);
8 var td1=document.getElementById(td1Name);
9 var td2=document.getElementById(td2Name);
10 divPic.style.display="block";
11 td1.children[0].style.width=160*td1.children[0].children.length;
12 td2.innerHTML=td1.innerHTML;
13 var PicEx=setInterval(function(){picExchangeEx(divPic,td1,td2);},speed);
14 divPic.onmouseover=function() {clearInterval(PicEx)}
15 divPic.onmouseout=function() {clearInterval(PicEx);PicEx=setInterval(function(){picExchangeEx(divPic,td1,td2);},speed);}
16 //两个控制按钮
17 document.getElementById(conprev).onclick=function()
18 {
19 clearInterval(PicEx);
20 divPic.scrollLeft=(divPic.scrollLeft/160-divPic.scrollLeft/160%1-1)*160;
21 if(timeOut)clearTimeout(timeOut);
22 timeOut=setTimeout(function(){clearInterval(PicEx);PicEx= setInterval(function(){picExchangeEx(divPic,td1,td2);} , speed);},time);
23 }
24 document.getElementById(connext).onclick=function()
25 {
26 clearInterval(PicEx);
27 var left=divPic.scrollLeft/160-divPic.scrollLeft/160%1+1;
28 var imgNum=td1.children[0].children.length;
29 if(left==imgNum){
30 divPic.scrollLeft=0;
31 left=0;
32 }
33 if((left-1==imgNum-4)&&timeOut)
34 divPic.scrollLeft=(imgNum-4)*160;
35 else
36 divPic.scrollLeft=left*160;
37 if(timeOut)clearTimeout(timeOut);
38 timeOut=setTimeout(function() {clearInterval(PicEx);PicEx=setInterval(function(){picExchangeEx(divPic,td1,td2);},speed);},time);
39 }
40 }
41 function picExchangeEx(obj,obj1,obj2)
42 {
43 if(obj2.offsetWidth-obj.scrollLeft<=0){
44 obj.scrollLeft=0;
45 }
46 else{
47 obj.scrollLeft++;
48 }
49 }
50 </script>
页面调用,首先在body标签的onload方法中调用<body onLoad="picExchange('expic','expic1','expic2','picprev','picnext')">
然后引入div
代码 <!--最新视频(图片样式) top 7-10 Order by date desc page 1 -->
<table cellSpacing="0" cellPadding="0" width="700" border="0">
<tr align="center">
<td width="30" height="144">
<IMG id="picprev" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; CURSOR: pointer; BORDER-BOTTOM: 0px"
height="23" src="../images/an_b09.jpg" width="23">
</td>
<td width="640" height="144">
<div id="expic" style="BORDER-TOP: #9999ff 1px dashed; FLOAT: left; OVERFLOW: hidden; WIDTH: 640px; BORDER-BOTTOM: #9999ff 1px dashed; HEIGHT: 144px">
<table height="144" cellSpacing="0" cellPadding="0" width="640" border="0">
<tr>
<td id="expic1" width="640">
<div style="WIDTH: 800px">
<asp:Repeater ID="rptNewsVideo_NewPic" Runat="server">
<ItemTemplate>
<div style="FLOAT: left; WIDTH: 160px; HEIGHT: 144px">
<div style="BORDER-RIGHT: #8cb2cf 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #8cb2cf 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; MARGIN-LEFT: 7px; BORDER-LEFT: #8cb2cf 1px solid; WIDTH: 136px; MARGIN-RIGHT: 7px; PADDING-TOP: 2px; BORDER-BOTTOM: #8cb2cf 1px solid; HEIGHT: 108px">
<a href='VideoPlay.aspx?NewsID=<%# DataBinder.Eval(Container.DataItem, "NewsID") %>' title='<%# DataBinder.Eval(Container.DataItem, "NewsTitle") %>'>
<IMG style="CURSOR: pointer" height="108" src='http://www.cnblogs.com/Uploads/News/<%# DataBinder.Eval(Container.DataItem, "PicUrl") %>' width="136">
</a>
</div>
<div class="k014" style="TEXT-ALIGN: center">
<a href='VideoPlay.aspx?NewsID=<%# DataBinder.Eval(Container.DataItem, "NewsID") %>' title='<%# DataBinder.Eval(Container.DataItem, "NewsTitle") %>'>
[<%# ((string)DataBinder.Eval(Container.DataItem, "NewsTitle")).Substring(0, ((string)DataBinder.Eval(Container.DataItem, "NewsTitle")).Length > 10 ? 10 : ((string)DataBinder.Eval(Container.DataItem, "NewsTitle")).Length)%>]
</a>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</td>
<td id="expic2" width="640"></td>
</tr>
</table>
</div>
</td>
<td width="30" height="144"><IMG id="picnext" style="CURSOR: pointer" height="23" src="../images/an_b08.jpg" width="23"></td>
</tr>
</table>
<table cellSpacing="0" cellPadding="0" width="700" border="0">
<tr align="center">
<td width="30" height="144">
<IMG id="picprev" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; CURSOR: pointer; BORDER-BOTTOM: 0px"
height="23" src="../images/an_b09.jpg" width="23">
</td>
<td width="640" height="144">
<div id="expic" style="BORDER-TOP: #9999ff 1px dashed; FLOAT: left; OVERFLOW: hidden; WIDTH: 640px; BORDER-BOTTOM: #9999ff 1px dashed; HEIGHT: 144px">
<table height="144" cellSpacing="0" cellPadding="0" width="640" border="0">
<tr>
<td id="expic1" width="640">
<div style="WIDTH: 800px">
<asp:Repeater ID="rptNewsVideo_NewPic" Runat="server">
<ItemTemplate>
<div style="FLOAT: left; WIDTH: 160px; HEIGHT: 144px">
<div style="BORDER-RIGHT: #8cb2cf 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #8cb2cf 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; MARGIN-LEFT: 7px; BORDER-LEFT: #8cb2cf 1px solid; WIDTH: 136px; MARGIN-RIGHT: 7px; PADDING-TOP: 2px; BORDER-BOTTOM: #8cb2cf 1px solid; HEIGHT: 108px">
<a href='VideoPlay.aspx?NewsID=<%# DataBinder.Eval(Container.DataItem, "NewsID") %>' title='<%# DataBinder.Eval(Container.DataItem, "NewsTitle") %>'>
<IMG style="CURSOR: pointer" height="108" src='http://www.cnblogs.com/Uploads/News/<%# DataBinder.Eval(Container.DataItem, "PicUrl") %>' width="136">
</a>
</div>
<div class="k014" style="TEXT-ALIGN: center">
<a href='VideoPlay.aspx?NewsID=<%# DataBinder.Eval(Container.DataItem, "NewsID") %>' title='<%# DataBinder.Eval(Container.DataItem, "NewsTitle") %>'>
[<%# ((string)DataBinder.Eval(Container.DataItem, "NewsTitle")).Substring(0, ((string)DataBinder.Eval(Container.DataItem, "NewsTitle")).Length > 10 ? 10 : ((string)DataBinder.Eval(Container.DataItem, "NewsTitle")).Length)%>]
</a>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</td>
<td id="expic2" width="640"></td>
</tr>
</table>
</div>
</td>
<td width="30" height="144"><IMG id="picnext" style="CURSOR: pointer" height="23" src="../images/an_b08.jpg" width="23"></td>
</tr>
</table>
然后在后台查询数据绑定repeater..(略)
注释:使用方法
代码<table><tr><td><img id="picprev" 向前的按钮图片 ></td> <td> <div id="expic" 轮流显示图片部分> <table ><tr><td> <div id="expic1">循环显示的部分 </div></td><td id="expic2"></td> </tr> </table> </div> </td> <td><img id="picnext" 向后的按钮图片 ></td> </table>
