Question

在主页上，我想展示多个旋转图像集。我发现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>

Answer 1

您可以使用猫头鹰轮播：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

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

1 个答案: