`
haohao-xuexi02
  • 浏览: 214910 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

js 图片幻灯轮换

阅读更多

我在网站搜几种轮换图片效果总结:

方案如下:

1.鼠标放上去进行切换:

代码:(document).ready(function(){     

    $(".clickButton a").attr("href","javascript:return false;");  

    $(".clickButton a").each(function(index){             

        $(this).click(function(){  

            changeImage(this,index);      

       });           

    });   

    autoChangeImage();        

});  

 

function autoChangeImage(){  

    for(var i = 0; i<=10000;i++){  

        window.setTimeout("clickButton("+(i%5+1)+")",i*3000);             

   }  

}  

 

function clickButton(index){  

    $(".clickButton a:nth-child("+index+")").click();  

}  

 

function changeImage(element,index){  

    var arryImgs = ["images/01.jpg","images/02.jpg","images/03.jpg","images/04.jpg","images/05.jpg"];  

    $(".clickButton a").removeClass("active");  

    $(element).addClass("active");  

   $(".imgs img").attr("src",arryImgs[index]);  

} 

$(document).ready(function(){        

         $(".clickButton a").attr("href","javascript:return false;");

         $(".clickButton a").each(function(index){                          

                   $(this).click(function(){

                            changeImage(this,index);       

                   });                       

         });    

         autoChangeImage();                

});

 

function autoChangeImage(){

         for(var i = 0; i<=10000;i++){

                   window.setTimeout("clickButton("+(i%5+1)+")",i*3000);                        

         }

}

 

function clickButton(index){

         $(".clickButton a:nth-child("+index+")").click();

}

 

function changeImage(element,index){

         var arryImgs = ["images/01.jpg","images/02.jpg","images/03.jpg","images/04.jpg","images/05.jpg"];

         $(".clickButton a").removeClass("active");

         $(element).addClass("active");

         $(".imgs img").attr("src",arryImgs[index]);

}

2. 鼠标停留:

$(document).ready(function(){  

 Var arryImgs= ["images/01.jpg","images/02.jpg","images/03.jpg","images/04.jpg","images/05.jpg"];  

    $(".clickButton a").attr("href","javascript:return false;");   

    var times = 1;  

    function changeImage(){  

        if (times == 6) {  

           times = 1;  

        }  

        $(".clickButton a").removeClass("active");  

       $(".clickButton a:nth-child(" + times + ")").addClass("active");  

       $(".imgs img").attr("src",arryImgs[times-1]);  

       times++;  

   }  

   var interval = window.setInterval(function(){  

        changeImage();  

    }, 1500);  

    $(".clickButton a").each(function(index){  

       $(this).hover(  

            function(){  

               $(".clickButton a").removeClass("active");  

               $(this).addClass("active");  

                clearInterval(interval);  

               $(".imgs img").attr("src",arryImgs[index]);  

                times = index+1;      

            },  

            function(){  

                interval = window.setInterval(function(){  

                   changeImage();  

                }, 1500);     

            });   

    });  

})

3. javaeye论坛首页左上角也有类似效果,是我自己基于prototype js土制的,直接用很暴力的方法set innerHTML了,抛砖一下,要考虑到重用的话,需要将这些varfunction用面向对象的方式封装一下:  

         var current_index = 0;  

         var s_adverts = []; #html array here  

          

         Event.observe(window,'load',function() {  

           show_slide(0);  

           new PeriodicalExecuter(show_slide, 10);  

         });  

          

         function show_slide(s_index) {  

           if(typeof(s_index) != 'number') s_index = current_index + 1;  

           if(s_index >= s_adverts.length) s_index = 0;  

             

           $("slides").innerHTML = s_adverts[s_index];  

           var s_pagination = s_adverts.inject("<span class='pagination'>", function(memo, value, i) {  

             return memo + (s_index == i ? "<span class='current'>" + (i + 1) + "</span>" : "<a href='#' onclick='show_slide(" + i + ");return false;'>" + (i + 1) + "</a>");  

           }) + "</span>";  

          

          

           $("slides").insert(s_pagination);  

          

           current_index = s_index;  

         } 

 

4.焦点在数字上面图片还会轮换,我写了个纯JS版的,鼠标放上去后停止轮换。

<script language="JavaScript" type="text/javascript">  

   window.onload = function(){  

        var array = ["01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg"];  

        var times = 1;  

        function changeIMG(){  

            if (times == 5) {  

              times = 0;  

           }  

           for (i = 0; i < document.getElementById("links").getElementsByTagName("A").length; i++) {  

                document.getElementById("links").getElementsByTagName("A")[i].className = "";  

            }  

            document.getElementById("links").getElementsByTagName("A")[times].className = "active";  

            document.getElementById("pic").src = array[times];  

            times++;  

       }  

          

        var interval = window.setInterval(function(){  

            changeIMG();  

        }, 1500);  

       document.getElementById("links").onmouseover = function(event){  

            event = event ? event : window.event  

            var obj = event.srcElement ? event.srcElement : event.target;  

            if (obj.tagName == "A") {  

                for (i = 0; i < document.getElementById("links").getElementsByTagName("A").length; i++) {  

                    document.getElementById("links").getElementsByTagName("A")[i].className = "";  

                }  

               obj.className = "active";  

                clearInterval(interval);  

                document.getElementById("pic").src = array[Number(obj.innerHTML) - 1];  

            }  

      }  

        document.getElementById("links").onmouseout = function(event){  

            event = event ? event : window.event  

            var obj = event.srcElement ? event.srcElement : event.target;  

            if (obj.tagName == "A") {  

                interval = window.setInterval(function(){  

                    changeIMG();  

                }, 1500);  

            }  

        }  

    }  

 

</script>   

原文:http://www.iteye.com/topic/294668 地址有相关的示例,可以下载查看

分享到:
评论

相关推荐

    JavaScript图片幻灯片

    JavaScript图片幻灯片是一种常见的网页动态效果,用于展示一组图片并自动进行切换,为用户提供流畅的视觉体验。这种效果在网站的首页、产品展示或新闻滚动等场景中广泛应用。实现JavaScript图片幻灯片的关键在于利用...

    60个个人收藏常用经典的图片幻灯轮换代码

    5. **样式和设计**:文件名中的“XP按钮风格”、“卷角翻转方块”和“走秀网JS四屏焦点图代码”表明,这些幻灯轮换不仅包含了基本的图片切换功能,还考虑了视觉设计和用户体验,如模拟Windows XP系统的按钮样式,...

    JS图片幻灯片播放

    本教程将详细介绍如何使用JavaScript实现一个简单的图片轮换效果,打造华丽的幻灯片播放功能。 首先,我们需要在HTML中设置好基本的结构。创建一个`div`作为幻灯片容器,里面包含多个`img`元素,这些`img`元素分别...

    图片轮换 js切换图片 幻灯片效果

    总的来说,图片轮换和js切换图片的幻灯片效果是通过JavaScript编程实现的一种动态效果,它结合了定时器、DOM操作和CSS3动画技术,以提供流畅、交互式的用户体验。在实际开发中,选择一个合适且易用的库(如...

    61个常用经典的图片幻灯轮换代码_个人收藏

    这些代码集合对于网页设计师和开发者来说是一份宝贵的资源,他们可以从中学习到如何利用JavaScript创建各种各样的图片幻灯轮换效果,同时也可以根据项目需求挑选合适的代码进行修改和应用。无论是对于提升网站用户...

    js实现图片轮换

    在JavaScript中实现图片轮换是一种常见的网页动态效果,它可以为网站增添活力,吸引用户的注意力。以下将详细介绍如何使用JavaScript来创建一个图片轮换的效果,并提供相关的知识点。 首先,我们需要了解基本的HTML...

    超宽屏jquery焦点幻灯轮换代码

    超宽屏jQuery焦点幻灯轮换代码是一种网页设计技术,用于在网站的首页或重要位置展示动态切换的图片、文本或其他多媒体内容。这种效果能够吸引用户的注意力,提升用户体验,同时展示网站的重要信息或特色。在本案例中...

    幻灯10个图片轮换代码

    【标题】:“幻灯10个图片轮换代码”指的是一个使用JavaScript和Flash技术实现的图片展示功能,它能够自动循环展示10张不同的图片,为网页增添动态效果,提高用户体验。 【描述】:“简单、实用的javascript+flash...

    js图片轮换

    JavaScript 图片轮换是一种常见的网页动态效果,常用于制作幻灯片、焦点图或产品展示等。这种技术利用JavaScript库,如jQuery,以及DOM操作、定时器等特性来实现图片的自动切换,增强用户体验,吸引用户注意力。在...

    3D效果展示的jquery+css3的幻灯轮换代码

    在本文中,我们将深入探讨如何使用jQuery和CSS3创建具有3D效果的幻灯轮换代码,这是一种在网页上展示动态图像序列的流行方法。这种技术可以为网站增添视觉吸引力,提升用户体验。以下是对给定资源的详细分析: 首先...

    JS广告图片轮换(带文字说明).rar

    本资源“JS广告图片轮换(带文字说明)”聚焦于一个常见的JS特效——焦点/幻灯图,这种效果常常用于网站的首页或者产品展示区域,以吸引用户的注意力并展示多张广告或宣传图片。 焦点/幻灯图是一种自动切换的图像展示...

    7屏flash焦点幻灯轮换代码

    Flash焦点幻灯轮换代码的核心原理是利用ActionScript,Flash的编程语言,编写脚本来控制图片的自动切换、过渡效果和用户交互。ActionScript允许开发者创建复杂的动画效果、响应用户输入以及与其他网络资源通信。在这...

    基于jquery的百叶窗特效幻灯轮换代码

    其中,“百叶窗”特效是一种独特的幻灯轮换方式,它模拟了百叶窗缓缓开启的效果,使得图片切换更加生动有趣。这种效果通常与焦点图结合使用,展示一系列的高亮图像,并通过缩略图导航来控制轮换。本文将深入探讨如何...

    js实现图片轮换。。。。。。

    在JavaScript中实现图片轮换是一种常见的网页动态效果,可以用于创建滑动展示、幻灯片或者轮播图等。下面将详细介绍如何使用JavaScript实现这一功能,以及涉及到的相关知识点。 首先,我们需要理解基本的HTML结构,...

    js图片轮换播放

    在本场景中,"js图片轮换播放"指的是使用JavaScript来实现一组图片在网页上自动或用户触发时进行循环展示的技术。这种功能常见于网站的幻灯片展示、广告轮播等部分,可以提高用户体验,增加视觉吸引力。 "鼠标放在...

    Js 图片轮换显示 图片轮换显示 源代码

    JavaScript(Js)是一种广泛应用于网页开发的脚本语言,它能够实现动态效果,如图片轮换显示。在网页设计中,图片轮换显示是一种常见的功能,可以用来展示多张图片,提升用户体验,尤其是在产品展示或者幻灯片效果的...

    JS图片流动和轮换效果

    总结,JS图片流动和轮换效果是提升网页动态感的关键,它们可以通过JavaScript的DOM操作、定时器和事件监听等功能轻松实现。在实际应用中,开发者可以根据需求选择合适的轮换方式和动画效果,以达到最佳的视觉体验。...

    asp图片轮换效果(类似于幻灯片)

    ASP图片轮换效果,通常指的是在网页中实现一组图片按照预设的时间间隔自动切换的动态展示,这种效果常被用于网站的首页或者产品展示区,为用户提供更丰富的视觉体验。这种效果与幻灯片相似,用户可以设定不同的切换...

    附带缩略图的JS图片轮换

    "附带缩略图的JS图片轮换"是一个基于JavaScript实现的图片轮换解决方案,它不仅提供了主图片的轮换,还带有缩略图导航,让用户能够直观地看到所有可切换的图片,并手动选择查看。这种功能常用于网站的幻灯片展示、...

Global site tag (gtag.js) - Google Analytics