您的位置：首页 > Web前端 > JavaScript

JavaScript实现图片轮播

2016-03-17 19:32 429 查看 
//实现照片轮播
1.在没有按钮触发的情况下，四张图片搁几秒，就会实现自动轮播  触发按钮单击事件，对应button的照片跳转到我们的窗体div界面
2.照片保存路径存储在，数组内部   按钮数量会根据数组内存储图片位置的数量，来自动生成按钮
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">#container{position: absolute;width: 360px;height: 190px;margin-left: 400px;}#con_img{position: absolute;width: 180px;height:40px;right: 0px;bottom: 0px; /*此处的bottom和right专属于内部，和margin以及padding都不同*/display: inline-block;}[id^=img0]{width: 30px;height: 30px;border-radius: 50%;background: #DCDCDC;display: inline-block;text-align: center;line-height: 30px;cursor: default;}</style><script language="JavaScript">var path="../imag/";var imgs=['ad-01.jpg','ad-02.jpg','ad-03.jpg','ad-04.jpg'];var nowNum=1;var maxNum=imgs.length;var img_up;window.onload=function(){img_up=document.getElementById('id_img');img_up.setAttribute('src',path+imgs[0]);var con_img = document.getElementById('con_img');for(var i=0;i<imgs.length;i++){var btn = document.createElement('input');btn.setAttribute('type','button');btn.setAttribute('value',i+1);btn.setAttribute('onclick','img_show('+i+')');con_img.appendChild(btn);}}function img_show(num){if(num == undefined){img_up=document.getElementById('id_img');img_up.setAttribute('src',path+imgs[nowNum]);nowNum = (nowNum+1)%maxNum;}else{img_up.setAttribute('src',path+imgs[num]);nowNum = num;clearInterval(inter);setTimeout(function(){inter = setInterval('img_show()',2000), 1000})}}var inter= setInterval('img_show()',2000);</script></head><body><div id="container"><img src="" alt="" id="id_img"/><div id="con_img"><!--<div id="img01" onclick="img_show(0)">1</div><div id="img02" onclick="img_show(1)">2</div><div id="img03" onclick="img_show(2)">3</div><div id="img04" onclick="img_show(3)">4</div>--></div></div></body></html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航