Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Slideshow javascript

Автор: Hrant 22.10.2013, 21:08

Уважаемые специалисты помогите с написанием JavaScript кода. У меня есть HTML код.`
<!Doctype html>
<html lang="en">
<head>
    <title>SlideShow</title>
    <meta charset="utf-8">
    <meta name="author" content="Hrant" >
    <style>
          *{
    margin:0;
    padding:0
}
div#main{
    background:#ffffff;
    width:100%
}
div#mainWrapper{
    width:1000px;
    margin:20px auto;
    background:#000000;
    padding:50px 0
}
div#slideshow{
    width:800px;
    height:360px;
    border:2px solid transparent;
    border-radius:3px;
    box-shadow:0 0 15px #fff;
    margin:0 auto;
    background:#efefef url(../images/slideBg.png);
    position:relative
}
div#bigBlock{
    position:absolute;
    left:50px
}
div#bigBlock img{
    position: relative;
    left: -50px;
    display:none
}
div#bigBlock img.active{
    display:block
}
div.icon{
    width:100px;
    height:300px;
    background:url(../images/iconBg.png);

}
div.left{
    float:left;
    background: url(../images/slideBg.png);
    height: 300px;
}
div.right{
    float:right;
    background: url(../images/slideBg.png);
    height: 300px;
}
div.nextPrevIcons a img{
    width:30px;
    padding: 0 10px;
    position: relative;
    top: 125px;
    opacity:0
}
div#slideshow:hover .nextPrevIcons img{opacity:0.8}
div#description{
    height:30px
}
div#thumb{
    height: 60px;
    box-shadow: 0 0 15px #fff;
    border: 2px solid transparent;
    border-radius: 0 0 3px 3px;
    width: 798px;
    background: #efefef url(../images/iconBg.png);
    position: relative;
    right: 1px;
}
div#thumb img{
    margin: 3px 0px 3px 4px;
    box-shadow: 0 0 10px #000;
    opacity: 0.4;
}
div#thumb img.tactive{opacity:1}
div#thumb img:hover{opacity:1}
.clear{clear:both}
        </style>
</head>
<body>
    <div id="main">
        <div id="mainWrapper">
            <div id="slideshow">
                <div id="bigBlock">
                    <img src="images/big/slide1.jpg" alt="image1" class="active">
                    <img src="images/big/slide2.jpg" alt="image2">
                    <img src="images/big/slide3.jpg" alt="image3">
                    <img src="images/big/slide4.jpg" alt="image4">
                    <img src="images/big/slide5.jpg" alt="image5">
                    <img src="images/big/slide6.jpg" alt="image6">
                </div>
                <div class="nextPrevIcons">
                    <div class="left">
                        <a href=""><img src="images/back.png" alt="prev"  onClick="slide(-1)"></a>
                    </div>
                    <div class="right">
                        <a href=""><img src="images/next.png" alt="next" onClick="icon(1)"></a>
                    </div>
                    <div class="clear"></div>
                </div>
                <div id="description"></div>
                <div id="thumb">
                    <a href="javascript:" onclick=""><img src="images/thumb/thumb1.jpg" alt="thumb1" class="tactive"></a>
                    <a href="javascript:" onclick=""><img src="images/thumb/thumb2.jpg" alt="thumb2"></a>
                    <a href="javascript:" onclick=""><img src="images/thumb/thumb3.jpg" alt="thumb3"></a>
                    <a href="javascript:" onclick=""><img src="images/thumb/thumb4.jpg" alt="thumb4"></a>
                    <a href="javascript:" onclick=""><img src="images/thumb/thumb5.jpg" alt="thumb5"></a>
                    <a href="javascript:" onclick=""><img src="images/thumb/thumb6.jpg" alt="thumb6"></a>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

а вот код яваскрипта...`
setInterval(slide , 2000);
function slide() {
    var a = document.getElementById('bigBlock');
    for (var i = 0; i < 6; i++) {
        if (a.children[i].hasAttribute('class')) {
            if (a.children[i + 1] == undefined) {
                a.children[i].removeAttribute('class');
                a.children[i + 1] = a.children[0];
                a.children[i].setAttribute('class','active');
            }
        else {
                a.children[i].removeAttribute('class');
                a.children[i + 1].setAttribute('class','active');
            }
            console.log(i);
            break;
        }
    }
}
Нужно чтобы при нажатие на миниатюре отображалась соответствующая картина...И кнопки вперед и назад работали... Я в JavaScript новичок головы себе уже сломал...
Помогите разобратся ... Заранее спасибо

Автор: Linless 3.12.2013, 14:52

Лучше через jquery сделать. Или тебе не надо всякие красявости в виде плавных появлений?