我就google一下,发现用js写的图片轮换效果例子是不少,可惜要么太繁琐,要么连页面都打不开
于是自己试了试,写了一个,代码很少。
js如下:
Javascript代码
- $(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代码
- $(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);
- });
- });
- })
- display_imgs.zip (118.4 KB)
- 下载次数: 446
- display_imgs_鼠标停留版_.zip (118.5 KB)
- 下载次数: 266