我在网站搜几种轮换图片效果总结:
方案如下:
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='#' οnclick='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 地址有相关的示例,可以下载查看