Home > Others

[DBW] Large graph carousel, can be achieved by two methods

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

By adding a table to the DIV to achieve large-size carousel, the code is as follows:

The whole idea:

1. Embed the table in the Div, set the width and height of the Div, set the image size, determine its position, insert the picture into the table, and hide it beyond the div section

2. In JS, define a variable to accept the left value, and assign a value of 0px, that is, the initial value

3 setting function A ()

{The received value is coerced into a number in the function,

Then subtract the width of a picture in the value,

}

3. Delay execution, set the code that requires delay and the time of the delay, and finally go back to the table and add a call method

12345678910111213141516171819202122232425262728293031323334353637383940414243444546 <style type="text/css">                      //style固定格式，双标签#a1{ width:800px; height:500px;left:150px; position:relative;  overflow:hidden; margin:50px;     //id为a1的div样式，超出部分隐藏        }#ta{ position:relative; left:0px; top:0px; transition:1s     //ta的样式，transition：1s 为渐变时间} </style></head><body><divid="a1"><tableid="ta" onclick="ff()" cellpadding="0" cellspacing="0" >    //在div中，创建一个表格，每一列中放入一个图片 oncleck=‘‘  调用方法<tr><td><imgsrc="images/1.jpg" /></td><td><imgsrc="images/2.jpg"/></td>                                    // 五张图片的宽度均为800px<td><imgsrc="images/3.jpg"/></td><td><imgsrc="images/4.jpg"/></td><td><img src="images/5.jpg"/></td></tr></table></div></body></html><scriptlanguage="javascript">            //javascrpt固定格式，双标签元素document.getElementById("ta").style.left="0px"     //将0px这个值赋值给根据id找到的left的值function ff()                                 //函数，不调用不执行{    var ta=parseInt( document.getElementById("ta").style.left);    // 定义一个值ta，将找到的值强制转换为整数          if(ta>-3200)                                                   //判断，当ta>-3200时执行的操作         {      document.getElementById("ta").style.left=(ta-800)+"px"             //将ta的值减去800,（将left向左移动，原来的数是0，-800，即移动一张图的距离）         }         else                                                     //不满足ta>-3200时，即ta=3200时，走完五张图的时候         {            document.getElementById("ta").style.left="0px"     //跳回0px，即回到第一张图         }window.setTimeout("ff()",2000)                          //延迟执行ff（），中的内容}   window.setTimeout("ff()",2000);                                       //延迟执行ff（），2s的时间，两秒钟换第一次图</script>

[DBW] Large graph carousel, can be achieved by two methods

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More