如何在一个页面上创建多个图像旋转集

How do I create multiple Image rotation sets on one page?

本文关键字:创建 图像 旋转 一个      更新时间:2023-09-26

在主页上,我想显示多个旋转图像集。我发现javascript可以完美地创建一个旋转集,但是当我尝试复制脚本以创建另一个具有不同图像的旋转集时,它将不起作用。我需要做些什么才能使这个脚本工作,这样我就可以在一个页面上包含几个不同的旋转图像。任何想法都会很感激。我的职业不是程序员,我自学了基础知识。

在head标签中,我输入了以下脚本:

<script language="JavaScript1.2">
var howOften = 5; //number often in seconds to rotate
var current = 0; //start the counter at 0
var ns6 = document.getElementById&&!document.all; //detect netscape 6
// place your images, text, etc in the array elements here
var items = new Array();
items[0]="<a href='link.htm' ><img alt='image0 (9K)' 
src=' /Img/ContentArea1/AdOne/MainAd1.png'     
height='291' width='726' border='0' /></a>"; //a linked image
items[1]="<a href='link.htm'><img alt='image1 (9K)' 
src='/Img/ContentArea1/AdOne/MainAd2.png'      
height='291' width='726' border='0' /></a>"; //a linked image
function rotater() {
document.getElementById("placeholder").innerHTML = items[current];
current = (current==items.length-1) ? 0 : current + 1;
setTimeout("rotater()",howOften*1000);
}
function rotater() {
if(document.layers) {
    document.placeholderlayer.document.write(items[current]);
    document.placeholderlayer.document.close();
}
if(ns6)document.getElementById("placeholderdiv").innerHTML=items[current]
    if(document.all)
        placeholderdiv.innerHTML=items[current];
current = (current==items.length-1) ? 0 : current + 1; //increment or reset
setTimeout("rotater()",howOften*1000);
}
window.onload=rotater;
//-->
</script>
<script language="JavaScript1.2">
var howOften = 5; //number often in seconds to rotate
var current = 0; //start the counter at 0
var ns6 = document.getElementById&&!document.all; //detect netscape 6
// place your images, text, etc in the array elements here
var items = new Array();
items[0]="<a href='link.htm' ><img alt='image0 (9K)' 
src=' /Img/ContentArea1/AdTwo/Ad2img.png'     
height='291' width='726' border='0' /></a>"; //a linked image
items[1]="<a href='link.htm'><img alt='image1 (9K)' 
src='/Img/ContentArea1/AdOne/Ad3img.png'      
height='291' width='726' border='0' /></a>"; //a linked image
function rotater() {
document.getElementById("placeholder").innerHTML = items[current];
current = (current==items.length-1) ? 0 : current + 1;
setTimeout("rotater()",howOften*1000);
}
function rotater() {
if(document.layers) {
    document.placeholderlayer.document.write(items[current]);
    document.placeholderlayer.document.close();
}
if(ns6)document.getElementById("placeholderdiv2").innerHTML=items[current]
    if(document.all)
        placeholderdiv.innerHTML=items[current];
current = (current==items.length-1) ? 0 : current + 1; //increment or reset
setTimeout("rotater()",howOften*1000);
}
window.onload=rotater;
//-->
</script>

在正文中我输入了以下代码:

<div id="placeholderdiv"></div>
<div id="placeholderdiv2"></div>

您可以使用Owl Carousel: http://owlgraphic.com/owlcarousel/demos/images.html。这是一个更简单的解决方案,有很好的文档。

在您想要的页面上添加任意数量的轮播。对于页面上的每个轮播,创建一个滑块实例,如下所示:

var carouselCount = 0;
$(".owl-carousel").each(function () {
    $(this).attr("id", "owl-carousel" + carouselCount);
    $('#owl-carousel' + carouselCount).owlCarousel({
        items: 3,
        itemsDesktop: [1199, 3],
        itemsDesktopSmall: [980, 2],
        itemsTablet: [768, 1],
        itemsTabletSmall: false,
        itemsMobile: [479, 1],
        rewindNav: false,
        lazyLoad: true,
        navigation: true,
        navigationText: ["Prev", "Next"],
        // Responsive 
        responsive: true,
        responsiveRefreshRate: 200,
        responsiveBaseWidth: window,
        //Pagination
        pagination: false
    });
    carouselCount++;
});

下面是一个实例:http://bit.ly/1mVGYCX