js之图片轮换显示(横着显示)

zoukankan html css js c++ java

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>
页面调用,首先在body标签的onload方法中调用<body onLoad="picExchange('expic','expic1','expic2','picprev','picnext')">
然后引入div
代码
    
                                                    <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>

查看全文

相关阅读:
Android视图动画集合AndoridViewAnimations
调整窗口大小时进行页面刷新（设定定时器）
通过拖动来变换元素顺序
 jquery的input:type=file实现文件上传
 ajax请求的data数据格式
 Cookie的新增，设置与清除
 比较两个对象是否一样的代码
 5.3日，7：20开始阮一峰js的早课学习
 在线代码编辑器使用案例代码
 layui当点击增加的时候,将form中的值获取的添加到table行中代码

原文地址：https://www.cnblogs.com/9421/p/1631464.html