javascript - 如何为图像 slider 调用 img 标签中图像的某些部分？

Question

我创建了一个组合了小 Logo 的图像。现在我想在图像标签中使用此图像并将其放入图像 slider 中。我已经写下了 slider 使用的所有样式、脚本和代码。但它不起作用。

<script type="text/javascript" src="http://bdppl.com/bdsupport/crawler.js" ></script>
<style>
.r1, .r2, .r3, .r4, .r5, .r6, .r7, .r8 {width:100px; height:0; margin:10px; border:1px solid #212121; padding:67px 0 0 0; display:block;}
.r2{padding:67px 0 0 100px;}
.r3{padding:67px 0 0 200px; }
.r4{padding:67px 0 0 300px; }
</style>
<div id="mycrawler2">
<img class="r1" src="images/recruiters.jpg" style="background-image: url(images/recruiters.jpg)" />
<img class="r2" src="images/recruiters.jpg" style="background-image: url(images/recruiters.jpg)" />
<img class="r3" src="images/recruiters.jpg" style="background-image: url(images/recruiters.jpg)" />
<img class="r4" src="images/recruiters.jpg" style="background-image: url(images/recruiters.jpg)" />
<img class="r5" src="images/recruiters.jpg" style="background-image: url(images/recruiters.jpg)" />
<img class="r6" src="images/recruiters.jpg" style="background-image: url(images/recruiters.jpg)" />
<img class="r7" src="images/recruiters.jpg" style="background-image: url(images/recruiters.jpg)" />
<img class="r8" src="images/recruiters.jpg" style="background-image: url(images/recruiters.jpg)" />
    </div> 
<script type="text/javascript" defer="defer">
marqueeInit({
    uniqueid: 'mycrawler2',
    style: {
        'padding': '2px',
        'width': '980px',
        'height': '100px',
        'margin': '10px 0 0 10px '
    },
    inc: 5, //speed - pixel increment for each iteration of this marquee's movement
    mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
    moveatleast: 2,
    neutral: 150,
    savedirection: true,
    random: true
});
</script>

Answer 1

首先制作png格式的空白图像，然后给出其路径。在 css 中将旧样式修改为当前样式。

<style>
    .m1, .m2, .m3, .m4, .m5, .m6, .m7, .m8, .m9, .m10, .m11, .m12, .m13, .m14, .m15, .m16, .m17, .m18, .m19, .m20 {width:100px; height:67px; margin:10px; border:1px solid #212121; background:url(../images/recruiters.jpg);}
    .m2{background-position: 100px 0;}
    .m3{background-position: 200px 0;}
    .m4{background-position: 300px 0;}
    .m5{background-position: 400px 0;}
    .m6{background-position: 500px 0;}
    .m7{background-position: 600px 0;}
    .m8{background-position: 700px 0;}
    .m9{background-position: 800px 67px;}
    .m10{background-position:900px 67px;}
    .m11{background-position: 0 67px;}
    .m12{background-position: 100px 67px;}
    .m13{background-position: 200px 67px;}
    .m14{background-position: 300px 67px;}
    .m15{background-position: 400px 67px;}
    .m16{background-position: 500px 67px;}
    .m17{background-position: 600px 67px;}
    .m18{background-position: 700px 67px;}
    .m19{background-position: 800px 67px;}
    .m20{background-position: 900px 67px;}
    </style>
    <div id="mycrawler2">
    <img class="m1" src="images/n.png" alt="" />
    <img class="m2" src="images/n.png" alt="" />
    <img class="m3" src="images/n.png" alt="" />
    <img class="m4" src="images/n.png" alt="" />
    <img class="m5" src="images/n.png" alt="" />
    <img class="m6" src="images/n.png" alt="" />
    <img class="m7" src="images/n.png" alt="" />
    <img class="m8" src="images/n.png" alt="" />
    <img class="m9" src="images/n.png" alt="" />
    <img class="m10" src="images/n.png" alt="" />
    <img class="m11" src="images/n.png" alt="" />
    <img class="m12" src="images/n.png" alt="" />
    <img class="m13" src="images/n.png" alt="" />
    <img class="m14" src="images/n.png" alt="" />
    <img class="m15" src="images/n.png" alt="" />
    <img class="m16" src="images/n.png" alt="" />
    <img class="m17" src="images/n.png" alt="" />
    <img class="m18" src="images/n.png" alt="" />
    <img class="m19" src="images/n.png" alt="" />
    <img class="m20" src="images/n.png" alt="" />
    </div>