我是靠谱客的博主 背后毛巾,最近开发中收集的这篇文章主要介绍jquery 图片轮换效果,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

效果图:

代码中存在的错误欢迎大家指正

复制代码 代码如下:

/**
* @author leepood
* @title 图片自动轮换效果
* @version v2.0
* @E-Mail leepood@gmail.com
* @notice:要显示图片的数目可以在setting里调整,但需要在imagesArray中加入相应图片的参数
*/
function changeImages()
{

var setting={
'width':'330px',
'height':'200px',
'images_count':'4',
'time':'1800', //图片切换的速度
'imageschange_border_color':'#fcf0a1'

};
var imagesArray=[{'src':'images/1.bmp','href':'http://www.baidu.com/','title':'秋天,一片金色','target':'_blank'},
{'src':'images/2.bmp','href':'http://www.163.com','title':'春天,给人一片生机的感觉','target':'_blank'},
{'src':'images/3.bmp','href':'http://iagyje.blog.163.com','title':'龙眼最好吃了,我每次吃好多的','target':'_blank'},
{'src':'images/4.bmp','href':'http://www.sina.com/','title':'火红的枫叶啊,有机会看看去','target':'_blank'}];
//添加元素,定义变量
var $div_imageschange=$("#imageschange");
$div_imageschange.children().css("margin","0px").css("padding","0px");
$div_imageschange.append("<div id='images_button'></div>");
$div_imageschange.append("<div id='images_title'></div>");
var $div_images_title=$("#images_title");
var $div_images_button=$("#images_button");
var count=setting.images_count;
for(var a=0;a<count;a++)
{
var b=a+1;
$div_images_button.append("<a id='"+b+"'>"+b+"</a>");
}
var $link_buttons=$("#imageschange a");
//设置元素的初始属性
//最外层容器,容纳所有元素
$div_imageschange.css("width",setting.width)
.css("position","relative")
.css("height",setting.height)
.css("border","solid 1px "+setting.imageschange_border_color);

//容纳按钮的元素
$div_images_button.css("position","absolute")
.css("height","20px")
.css("right","0px")
.css("bottom","21px")
.css("opacity","1")
.css("float","right");

//容纳文字说明的元素
$div_images_title.css("position","absolute")
.css("height","20px")
.css("width",setting.width)
.css("bottom","0px")
.css("right","0px")
.css("background-color","black")
.css("opacity","0.6")
.css("font-size","12px")
.css("color","white");
//按钮组合
$link_buttons.css("width","15px")
.css("height","15px")
.css("border","solid 1px #fcf0a1")
.css("display","block")
.css("margin","0 5px 5px 5px")
.css("font-size","12px")
.css("text-align","center")
.css("float","left")
.css("color","white")
.css("text-decoration","none");
//初始化设定
$div_imageschange.css("background-image","url('images/1.bmp')");
$div_images_title.html(imagesArray[0].title);
$("#images_button a:first").css("background","#fcf0a1");
function change(index){
$div_imageschange.css("background-image", "none");
$div_imageschange.css("background-image", "url('" + imagesArray[index].src + "')");
$div_images_title.html("");
$div_images_title.html(imagesArray[index].title);
$($link_buttons[index]).attr("href", imagesArray[index].href).attr("target", imagesArray[index].target);
$link_buttons.css("background","");
$($link_buttons[index]).css("background","#fcf0a1");
};
//自动切换代码
function autochange(){
var i=0;
setInterval(function(){
change(i);
if(i==setting.images_count-1)
{
i=-1;
}
i++;
},setting.time);
}
autochange();
//手动切换代码
$link_buttons.each(function(i){
$(this).hover(function(){
change(i);
});
});
};
$(document).ready(function(){
changeImages();

});

要显示图片的数目可以在setting里调整,但需要在imagesArray中加入相应图片的参数

最后

以上就是背后毛巾为你收集整理的jquery 图片轮换效果的全部内容,希望文章能够帮你解决jquery 图片轮换效果所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(108)

评论列表共有 0 条评论

立即
投稿
返回
顶部