zoukankan      html  css  js  c++  java
  • js图片轮换效果

    常常在各大网站上看到如下图所示的图片轮换效果,有的是用flash做的,有的是用js做的。

    我就google一下,发现用js写的图片轮换效果例子是不少,可惜要么太繁琐,要么连页面都打不开

    于是自己试了试,写了一个,代码很少。



    js如下:

    Javascript代码 复制代码
    1. $(document).ready(function(){     
    2.      $(".clickButton a").attr("href","javascript:return false;");  
    3.      $(".clickButton a").each(function(index){             
    4.          $(this).click(function(){  
    5.              changeImage(this,index);      
    6.          });           
    7.      });   
    8.      autoChangeImage();        
    9. });  
    10.   
    11. function autoChangeImage(){  
    12.     for(var i = 0; i<=10000;i++){  
    13.          window.setTimeout("clickButton("+(i%5+1)+")",i*3000);             
    14.      }  
    15. }  
    16.   
    17. function clickButton(index){  
    18.      $(".clickButton a:nth-child("+index+")").click();  
    19. }  
    20.   
    21. function changeImage(element,index){  
    22.     var arryImgs = ["images/01.jpg","images/02.jpg","images/03.jpg","images/04.jpg","images/05.jpg"];  
    23.      $(".clickButton a").removeClass("active");  
    24.      $(element).addClass("active");  
    25.      $(".imgs img").attr("src",arryImgs[index]);  
    26. }  
    $(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]); }

    鼠标停留版(参考malk的js改写的):
    Javascript代码 复制代码
    1. $(document).ready(function(){  
    2.     var arryImgs = ["images/01.jpg","images/02.jpg","images/03.jpg","images/04.jpg","images/05.jpg"];  
    3.      $(".clickButton a").attr("href","javascript:return false;");   
    4.     var times = 1;  
    5.     function changeImage(){  
    6.         if (times == 6) {  
    7.              times = 1;  
    8.          }  
    9.          $(".clickButton a").removeClass("active");  
    10.          $(".clickButton a:nth-child(" + times + ")").addClass("active");  
    11.          $(".imgs img").attr("src",arryImgs[times-1]);  
    12.          times++;  
    13.      }  
    14.     var interval = window.setInterval(function(){  
    15.          changeImage();  
    16.      }, 1500);  
    17.      $(".clickButton a").each(function(index){  
    18.          $(this).hover(  
    19.             function(){  
    20.                  $(".clickButton a").removeClass("active");  
    21.                  $(this).addClass("active");  
    22.                  clearInterval(interval);  
    23.                  $(".imgs img").attr("src",arryImgs[index]);  
    24.                  times = index+1;      
    25.              },  
    26.             function(){  
    27.                  interval = window.setInterval(function(){  
    28.                      changeImage();  
    29.                  }, 1500);     
    30.              });   
    31.      });  
    32. })    
    $(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); }); }); })
    • 3d2759cd-10d1-30e2-892c-638d58676f3e-thumb
    • 大小: 54.4 KB
    不过那个js要放到后面,否在在ie8中要报错。可能是ie8加载的时候没有等到document加载后再ready。具体会包“return flase”在函数之外的错误。。。
  • 相关阅读:
    The formatter threw an exception while trying to deserialize the message in WCF
    通过Web Deploy方式部署WCF
    The Managed Metadata Service or Connection is currently not available
    How to create Managed Metadata Column
    冒泡算法
    asp.net core 实战项目(一)——ef core的使用
    Vue学习笔记入门篇——安装及常用指令介绍
    Vue学习笔记入门篇——数据及DOM
    Vue学习笔记目录
    Chart.js在Laravel项目中的应用
  • 原文地址:https://www.cnblogs.com/danghuijian/p/4400781.html
Copyright © 2011-2022 走看看