Home > Developer > Web Develop
[JavaScript] IMG-compatible image carousel, javascriptie6
Although the [Bootstrap] image Carousel component movie usel (click to open the link) does a good job, it is useless because it is only compatible with IE8. In fact, the original ecosystem is not as difficult as imagined for I6-compatible image carousel. Many images compatible with IE6 on the Internet are actually poorly written. First, the reusability is very poor, and I don't know how to modify it. Then I added a lot of dispensable special effects like Louver blinds to make the original short code very bad. Finally, these things also directly use JavaScript to create components to show how powerful Javascript has been learned, and it is not good to teach others how to do it. I personally think it is quite bad to write the entire webpage using a JS directly, HTML, CSS, and Javascript should be different from each other. In fact, with the inspiration of "using getElementsByTagName and getElementsByName to improve original ecological compatibility with the IE6 tab" (click to open the link), this is simply easy to implement.
I. Basic Objectives
The following figure shows IE6 in Winxp. Of course, you can automatically switch between 1, 2, 3, and 4 in the lower right corner. The most important thing is that this item can be carousel by yourself. You can see that my IE6 has been in an inactive state. Then, there is a text description of the corresponding image in the lower left corner. You can change it to some news images and news titles, or even use php, jsp, asp, and other functions to read images and news from the database and update them to this component.
Ii. Basic preparations
1. The following is my site directory. In the winxp system file c: \ windows \ wallpaper \ web \, pull a few wallpapers that come with winxp. Used for the above experiment. Carousel.html reads all files from imgs.
2. the HTML and CSS layout code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">The id in it is for the following javascript script control. The layout idea of the remaining parts is as follows, using [CSS] About div alignment and webpage layout (click to open the link) layout Method in:
Iii. Production Process
After the layout is complete, Javascript production starts. The idea of switching the paging algorithm is the paging idea of "[JavaScript] Using getElementsByTagName and getElementsByName to improve original ecological compatibility with IE6 tabs" (click to open the link, only a setInterval ("auto_tab_div ()", 2000) is added, and the switch is automatically performed. I will not go into details.
<Script> function div_tab (tabname) {var tabLinkArr = document. getElementsByName ("tablink"); var tabPicArr = document. getElementById ("tabpic "). getElementsByTagName ("div"); var tabTextArr = document. getElementById ("tabtext "). getElementsByTagName ("div"); for (var I = 0; I <tabLinkArr. length; I ++) {if (I = tabname) {tabLinkArr [I]. style. color = "# ff0000"; tabPicArr [I]. style. display = "block"; tabTextArr [I]. style. display = "block";} else {tabLinkArr [I]. style. color = "# 0000ff"; tabPicArr [I]. style. display = "none"; tabTextArr [I]. style. display = "none" ;}}} var I = 0; function auto_tab_div () {// if you switch to the last image, start from the first image again if (I> 3) {I = 0;} // automatically reads the next image div_tab (I) every two seconds; I ++;} setInterval ("auto_tab_div ()", 2000 ); </script>With the correct ideas and guidance, this is the case where you can rotate the image, set the rotation speed, add images, or even change it to 0.2 million images.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
