Silver-Pegas (04 Февраль 2016 - 10:09) писал:
Алгоритм поняла.
Но что-то всё равно не так. Доходит до второй картинки и перепрыгивает заново.
Т.е. остальные фото вообще не заходят "за кулисы". Получается не бегущая строка, а прыгающая.)
Предлагаю Вам другую, более простую реализацию.
В шаблоне html замените блок кода:
<style type="text/css">
#anic {
position:relative;
padding:0px;
width:1150px; height:94px;
overflow:hidden;
background-color: #fff;
margin:0 auto;
}
#anic img {
max-height: 75px;
padding-left: 10px;
display: inline-block;
margin-top: -5px;
}
#ani, #ani1, #ani2, #ani3 {
color: #000;
display:inline-block;
position:relative;
}
</style>
<script language="JavaScript" type="text/javascript">
var timer, nPos = 0,
stop = false;
function anistop() {
stop = true
}
function anirun() {
start()
}
function start() {
stop = false;
timer && window.clearInterval(timer);
document.getElementById("anic");
var a = document.getElementById("ani"),
b = document.getElementById("ani1"),
c = document.getElementById("ani2"),
d = a.offsetWidth;
timer = setTimeout(function () {
a.style.left = b.style.left = c.style.left = nPos + "px";
nPos -= 2;
if (nPos < -d) nPos = 0;
stop || setTimeout(arguments.callee, 25)
}, 10)
}
window.onload = start;
</script>
<div class="clear"></div>
<div id="anic" onmouseover="anistop()" onmouseout="anirun()">
<pre id="ani">
<a href="http://silver-pegas.ru/catalog"><img src="{ASSETS_IMAGES_PATH}3.png" alt="" title="" /></a>
</pre>
<pre id="ani1">
<a href="http://silver-pegas.ru/catalog"><img src="{ASSETS_IMAGES_PATH}4.png" alt="" title="" /></a>
</pre>
<pre id="ani2">
<a href="http://silver-pegas.ru/catalog"><img src="{ASSETS_IMAGES_PATH}789.png" alt="" title="" /></a>
</pre>
</div>
<br>
на:
<div class="beg-stroka">
<marquee scrollamount="10">
<a href="#">
<img src="{ASSETS_IMAGES_PATH}4.png" alt="" title="" style="max-height: 100px;"/>
</a>
<a href="#">
<img src="{ASSETS_IMAGES_PATH}789.png" alt="" title="" style="max-height: 100px;"/>
</a>
<a href="#">
<img src="{ASSETS_IMAGES_PATH}3.png" alt="" title="" style="max-height: 100px;"/>
</a><a href="#">
<img src="{ASSETS_IMAGES_PATH}3.png" alt="" title="" style="max-height: 100px;"/>
</a>
<a href="#">
<img src="{ASSETS_IMAGES_PATH}3.png" alt="" title="" style="max-height: 100px;"/>
</a>
<a href="#">
<img src="{ASSETS_IMAGES_PATH}4.png" alt="" title="" style="max-height: 100px;"/>
</a>
<a href="#">
<img src="{ASSETS_IMAGES_PATH}789.png" alt="" title="" style="max-height: 100px;"/>
</a>
</a><a href="#">
<img src="{ASSETS_IMAGES_PATH}3.png" alt="" title="" style="max-height: 100px;"/>
</a>
<a href="#">
<img src="{ASSETS_IMAGES_PATH}3.png" alt="" title="" style="max-height: 100px;"/>
</a>
</marquee>
</div>
и в конец main.css добавьте:
.beg-stroka {
position:relative;
padding:10px;
width:1150px;
background-color: #fff;
margin:0 auto;
}