我在网站搜几种轮换图片效果总结:
方案如下:
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了,抛砖一下,要考虑到重用的话,需要将这些var和function用面向对象的方式封装一下:
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 地址有相关的示例,可以下载查看
分享到:
相关推荐
最简单的JS代码做出最简单的图片轮换效果,华丽的幻灯片播放,
很不错的演示了如何使用JavaScript实现图片轮换播放。
图片轮换 js切换图片 幻灯片效果 可设置自动生成图片列表 简单好用
js图片幻灯片带缩略图,支持多种样式 javascript js 图片切换 图片轮换 缩略图
JS广告图片轮换(带文字说明)
jsviewer是一个强大,高度可配置,动态HTML影像展示JavaScript程序 。您可以用jsviewer在短短几分钟的时间内创建一个幻灯片播放效果。 jsviewer被设计为易于使用,但却有很强大的功能。 jsviewer支持键盘控制,控制...
简单、实用的javascript+flash图片轮换
经典,常用,个人收藏,带缩略图的,方便查找。
一款简洁风格的Js幻灯图片切换代码,常言说:好吃不过饺子、舒服不过躺着。现在已经有很多焦点图片的代码了,有JS的、也有flash的。不过看了很多,却发现对于项目开发来说,很多的焦点图片却不是那么容易使用的:有...
经典,常用,个人收藏,带缩略图的,方便查找。
简单、实用的javascript图片轮换 带缩略图
常用js图片轮换幻灯片代码
6.JS图片轮换广告代码 7.MSN.COM超酷flash图片轮换效 8.MSN健康频道CSS标准焦点图 9.MSN频道4屏新闻广告效果 10.MSN频道四屏flash滑动门效果 11.MSN中国首页四屏切换新闻代码 12.Mtime时光网五屏flash焦点图 13.nba...
JS图片轮换广告代码
6个可以修改的js+Css+div+html的超漂亮新闻幻灯片,图片轮换播放代码 超漂亮 我常用的 宽高都可以修改,都没有flash,纯js+html的 大家可以下个看看
JustWalking 是本人开发的一款js常用效果框架,兼容各种浏览器,代码经长期使用测试并没有什么bug,分享给大家,希望为广大javascript爱好者提供帮助。 以下是部分效果链接地址: ...
$(document).ready(function() { $('#goods').cycle({ timeout: 2000, speed: 200, pause: true }); });
图轮换的js幻灯效果! 很值得下载看看!资源免费,大家分享!!
12款超酷图片展示JS代码幻灯片[能与FLash对抗 效果不错的幻灯片 OK
js实用的幻灯片效果 javascripst图片轮换