ページの輪番図のjsの書き方

まずCSSとHTMLは言いません.注意すべき点を述べる
1.自動再生aotoChange 2.各リンクバインド応答関数3に手動クリックで切り替える.リンク切替の対応するseta()4を自動的に設定.ページを左右にめくるbuttonの関数5.ページをめくる上限、ページを切り替えるときのcssの中のhoverが役に立つかどうかなどの問題を解決します.
図のインタフェースの下にjsを置くコードを作ります.

            window.onload=function(){
                var header2=document.getElementById("header2")
                var button1=document.getElementById("button1")
                var button2=document.getElementById("button2")
                var allA=header2.getElementsByTagName("a")
                var img=document.getElementById("five")
                var arr1=['3.jpg','4.jpg',"5.jpg","6.jpg","7.jpg","8.jpg"]
                var index=0
                var timer
                //    
                img.src="3.jpg"
                //    
                allA[index].style.backgroundColor="red"
                
                //            
                for(var i=0;i<allA.length;i++){
                    //          
                    allA[i].num=i;
                    allA[i].onclick=function(){
                        clearInterval(timer)
                        index=this.num
                        img.src=arr1[index]
                        setA()
                        autoChange()
                    }
                }
                autoChange()
                button1.onclick=function(){
                        clearInterval(timer)
                        index=(--index+5)%5
                        img.src=arr1[index]
                        setA()
                        autoChange()
                    }
                button2.onclick=function(){
                    clearInterval(timer)
                    index=(++index)%5
                    img.src=arr1[index]
                    setA()
                    autoChange()
                }
                function autoChange(){
                    timer=setInterval(function(){
                        index=(++index)%5
                        img.src=arr1[index]
                        setA()
                    },2000)
                    
                }
                function setA(){
                    for(var i=0;i<allA.length;i++)
                    {
                        allA[i].style.backgroundColor=""
                    }
                    allA[index].style.backgroundColor="red"
                }
            }
</code></pre> 
  <p>    <strong>setA()<strong>      </strong> </strong>         ， css         ！    hover   。<br>             **autoChange()**    ，      ，            ！<br>       ！</p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1297868193167122432"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">
                    
                     
                

興味があるかもしれません

TOMCATはPOST方法でパラメータ損失問題を提出する
357029540
java tomcat jsp

MyEclipseにJSPテンプレート削除を追加-2008-08-18
ljy325
jsp xml MyEclipse

JavaScriptの一般的な検証スクリプトの概要
eksliang
JavaScript JAvaScriptフォーム検証

マイクロソフトBI(4)
18289753290
マイクロソフトBI SSIS

ビッグデータ量のテーブルを定時に分割してバックアップする
クールに空を飛ぶ
ビッグデータ量

本質の説明と因材施教
永夜-オーロラ
感想 エッセイ

迷っています。。。
勝手な小屋
エッセイ

23種類の設計モードの意図と適用範囲
aijuans
デザインモード

アルファベットで分類:
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z その他
トップページ -
私たちについて -
構内検索 -
Sitemap -
権利侵害苦情
著作権すべてのIT知識ベースCopyRight© 2000-2050 IT知識ベースIT 610.com , All Rights Reserved.
京ICP備09083238号