制作图像滑块，每6秒更改一次图像

Question

我正在尝试使用我的客户端已在使用的设计制作图像滑块。但我从来没有制作过一个图像滑块，每6秒更换一次图像，并且您可以选择转到图像1,2或3.现在我正在使用3 <div>的图像，并且每个图像都有分配给它们的图像背景。
请原谅我悲伤的Javascript尝试，我对它很陌生，只知道几种使用它和jQuery的方法。
是的，我的页面上包含了jQuery。

哦，并且所有的<div>都是display:none;，所以为了使它们可见，我添加了一个名为.active的类。

这里有一个的jsfiddle以我目前的工作 - http://jsfiddle.net/377Ma/4/

而这里的代码。

HTML

<div class="art-slider art-slidecontainerheader" data-width="800" data-height="250"> 
    <div class="art-slider-inner"> 
<div class="art-slide-item art-slideheader0 active" style="" id="img1"> 

</div> 
<div class="art-slide-item art-slideheader1 active" style="" id="img2"> 

</div> 
<div class="art-slide-item art-slideheader2" style="" id="img3"> 

</div> 

    </div> 
</div> 


<div class="art-slidenavigator art-slidenavigatorheader" data-left="92"> 
<a href="#" class="art-slidenavigatoritem"></a><a href="#" class="art-slidenavigatoritem"></a><a href="#" class="art-slidenavigatoritem"></a> 
</div> 
    <div class="art-shapes"> 

      </div>    
</header> 
<nav class="art-nav desktop-nav"> 

<ul class="art-hmenu menu-3"> 
    <li class="menu-item-45"><a title="shop" href="http://www.iamsotare.storenvy.com">shop</a> 
    </li> 
    <li class="menu-item-116"><a title="blog" href="http://iamsotare.com/blog/">blog</a> 
    </li> 
    <li class="menu-item-115"><a title="story" href="http://iamsotare.com/story/">story</a> 
    </li> 
    <li class="menu-item-114"><a title="connect" href="http://iamsotare.com/connect/">connect</a> 
    </li> 
    <li class="menu-item-113"><a title="FAQs" href="http://iamsotare.com/faqs/">FAQs</a> 
    </li> 
</ul> 
    </nav> 
    </div> 

CSS - 对不起，我无法找到确切的斑点需要，这是一个有点长。

#content{ 
    margin-left:auto; 
    margin-right:auto; 
    width:100%; 
    max-width:800px; 
} 
.active{ 
    display:block; 
} 

.a 
header, footer, article, nav, #art-hmenu-bg, .art-sheet, .art-hmenu a, .art-vmenu a, .art-slidenavigator > a, .art-checkbox:before, .art-radiobutton:before 
{ 
    -webkit-background-origin: border !important; 
    -moz-background-origin: border !important; 
    background-origin: border-box !important; 
} 

header, footer, article, nav, #art-hmenu-bg, .art-sheet, .art-slidenavigator > a, .art-checkbox:before, .art-radiobutton:before 
{ 
    display: block; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

ul 
{ 
    list-style-type: none; 
} 

ol 
{ 
    list-style-position: inside; 
} 

html, body 
{ 
    height: 100%; 
} 

body 
{ 
    padding: 0; 
    margin:0; 
    color: #303F50; 
} 

.art-header:before, #art-header-bg:before, .art-layout-cell:before, .art-layout-wrapper:before, .art-footer:before, .art-nav:before, #art-hmenu-bg:before, .art-sheet:before 
{ 
    width: 100%; 
    content: " "; 
    display: table; 
} 
.art-header:after, #art-header-bg:after, .art-layout-cell:after, .art-layout-wrapper:after, .art-footer:after, .art-nav:after, #art-hmenu-bg:after, .art-sheet:after, 
.cleared, .clearfix:after { 
    clear: both; 
    font: 0/0 serif; 
    display: block; 
    content: " "; 
} 




.art-shapes 
{ 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    overflow: hidden; 
    z-index: 0; 
} 

.art-slider-inner { 
    position: relative; 
    overflow: hidden; 
    width: 100%; 
    height: 100%; 
} 

.art-slidenavigator > a { 
    display: inline-block; 
    vertical-align: middle; 
    outline-style: none; 
    font-size: 1px; 
} 

.art-slidenavigator > a:last-child { 
    margin-right: 0 !important; 
} 

.art-slidecontainerheader { 
    position: relative; 
      width: 100%; 
    height: 100%; 
    } 

.art-slidecontainerheader .art-slide-item { 
    -webkit-transition: 800ms ease-in-out opacity; 
    -moz-transition: 800ms ease-in-out opacity; 
    -ms-transition: 800ms ease-in-out opacity; 
    -o-transition: 800ms ease-in-out opacity; 
    transition: 800ms ease-in-out opacity; 
    position: absolute; 
    display: none; 
    left: 0; 
    top: 0; 
    opacity: 0; 
    width: 100%; 
    height: 100%; 
} 

.art-slidecontainerheader .active, .art-slidecontainerheader .next, .art-slidecontainerheader .prev { 
    display: block; 
} 

.art-slidecontainerheader .active { 
    opacity: 1; 
} 

.art-slidecontainerheader .next, .art-slidecontainerheader .prev { 
    width: 100%; 
} 

.art-slidecontainerheader .next.forward, .art-slidecontainerheader .prev.back { 
    opacity: 1; 
} 

.art-slidecontainerheader .active.forward { 
    opacity: 0; 
} 

.art-slidecontainerheader .active.back { 
    opacity: 0; 
} 


.art-slideheader0 { 
    background-image: url('slideheader0.jpg'); 
     background-size: 100%; 
     background-position: 0 0; 
    background-repeat: no-repeat; 
} 
.art-slideheader1 { 
    background-image: url('slideheader1.jpg'); 
     background-size: 100%; 
     background-position: 0 0; 
    background-repeat: no-repeat; 
} 
.art-slideheader2 { 
    background-image: url('slideheader2.jpg'); 
     background-size: 100%; 
     background-position: 0 0; 
    background-repeat: no-repeat; 
} 


.art-slidenavigatorheader { 
    display: inline-block; 
    position: absolute; 
    direction: ltr !important; 
    top: 226px; 
    left: 92%; 
    z-index: 101; 
    line-height: 0 !important; 
    -webkit-background-origin: border !important; 
    -moz-background-origin: border !important; 
    background-origin: border-box !important; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    text-align: center; 
    white-space: nowrap; 
    } 
.art-slidenavigatorheader 
{ 
background: #B9C2CB;background: linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat;background: -webkit-linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat;background: -moz-linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat;background: -o-linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat;background: -ms-linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat;background: linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat;-svg-background: linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat; 
-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px; 


padding:7px; 





} 
.art-slidenavigatorheader > a 
{ 
background: #728597;background: #728597;background: #728597;background: #728597;background: #728597;background: #728597;background: #728597;-svg-background: #728597; 
-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%; 



margin:0 10px 0 0; 

width: 10px; 

height: 10px; 
} 
.art-slidenavigatorheader > a.active 
{ 
background: #FA681E;background: #FA681E;background: #FA681E;background: #FA681E;background: #FA681E;background: #FA681E;background: #FA681E;-svg-background: #FA681E; 
-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%; 



margin:0 10px 0 0; 

width: 10px; 

height: 10px; 
} 
.art-slidenavigatorheader > a:hover 
{ 
background: #455B73;background: #455B73;background: #455B73;background: #455B73;background: #455B73;background: #455B73;background: #455B73;-svg-background: #455B73; 
-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%; 



margin:0 10px 0 0; 

width: 10px; 

height: 10px; 
} 







.art-sheet 
{ 
    background: #FFFFFF; 
    -webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.25); 
    -moz-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.25); 
    box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.25); 
    margin:0 auto; 
    position:relative; 
    cursor:auto; 
    width: 800px; 
    z-index: auto !important; 
} 

.art-header 
{ 
    margin:0 auto; 
    height: 250px; 
    background-image: none; 
    background-position: 0 0; 
    background-repeat: no-repeat; 
    position: relative; 
    z-index: auto !important; 
} 

.responsive .art-header 
{ 
    background-image: none; 
    background-position: center center; 
} 

.art-header>.widget 
{ 
    position:absolute; 
    z-index:101; 
} 

.art-nav 
{ 
    margin:0 auto; 
    position: relative; 
    z-index: 499; 
    text-align: center; 
} 

ul.art-hmenu a, ul.art-hmenu a:link, ul.art-hmenu a:visited, ul.art-hmenu a:hover 
{ 
    outline: none; 
    position: relative; 
    z-index: 11; 
} 

ul.art-hmenu, ul.art-hmenu ul 
{ 
    display: block; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    list-style-type: none; 
} 

ul.art-hmenu li 
{ 
    position: relative; 
    z-index: 5; 
    display: block; 
    float: left; 
    background: none; 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 

ul.art-hmenu li:hover 
{ 
    z-index: 10000; 
    white-space: normal; 
} 

ul.art-hmenu:after, ul.art-hmenu ul:after 
{ 
    content: "."; 
    height: 0; 
    display: block; 
    visibility: hidden; 
    overflow: hidden; 
    clear: both; 
} 

ul.art-hmenu, ul.art-hmenu ul 
{ 
    min-height: 0; 
} 

ul.art-hmenu 
{ 
    display: inline-block; 
    vertical-align: bottom; 
} 

.art-nav:before 
{ 
    content:' '; 
} 

.art-hmenu-extra1 
{ 
    position: relative; 
    display: block; 
    float: left; 
    width: auto; 
    height: auto; 
    background-position: center; 
} 

.art-hmenu-extra2 
{ 
    position: relative; 
    display: block; 
    float: right; 
    width: auto; 
    height: auto; 
    background-position: center; 
} 

.art-menuitemcontainer 
{ 
    margin:0 auto; 
} 
ul.art-hmenu>li { 
    margin-left: 11px; 
} 
ul.art-hmenu>li:first-child { 
    margin-left: 5px; 
} 
ul.art-hmenu>li:last-child, ul.art-hmenu>li.last-child { 
    margin-right: 5px; 
} 

ul.art-hmenu>li>a 
{ 
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    border-radius:5px; 
    padding:0 20px; 
    margin:0 auto; 
    position: relative; 
    display: block; 
    height: 55px; 
    cursor: pointer; 
    text-decoration: none; 
    color: #33ADFF; 
    line-height: 55px; 
    text-align: center; 
} 

.art-hmenu a, 
.art-hmenu a:link, 
.art-hmenu a:visited, 
.art-hmenu a.active, 
.art-hmenu a:hover 
{ 
    font-size: 28px; 
    font-family: KidTYPEPaintregular, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif; 
    text-decoration: none; 
    text-align: left; 
} 

ul.art-hmenu>li>a.active 
{ 
    background: #FFFFFF; 
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    border-radius:5px; 
    padding:0 20px; 
    margin:0 auto; 
    color: #33ADFF; 
    text-decoration: none; 
} 

ul.art-hmenu>li>a:visited, 
ul.art-hmenu>li>a:hover, 
ul.art-hmenu>li:hover>a { 
    text-decoration: none; 
} 

ul.art-hmenu>li>a:hover, .desktop ul.art-hmenu>li:hover>a 
{ 
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    border-radius:5px; 
    padding:0 20px; 
    margin:0 auto; 
} 
ul.art-hmenu>li>a:hover, 
.desktop ul.art-hmenu>li:hover>a { 
    color: #FF05CD; 
    text-decoration: none; 
} 

ul.art-hmenu>li:before 
{ 
    position:absolute; 
    display: block; 
    content:' '; 
    top:0; 
    left: -11px; 
    width:11px; 
    height: 55px; 
    background: url('menuseparator.png') center center no-repeat; 
} 
ul.art-hmenu>li:first-child:before{ 
    display:none; 
} 

ul.art-hmenu li li a 
{ 
    background: #B9C2CB; 
    background: transparent; 
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    border-radius:5px; 
    padding:0 10px; 
    margin:0 auto; 
} 
ul.art-hmenu li li 
{ 
    float: none; 
    width: auto; 
    margin-top: 2px; 
    margin-bottom: 2px; 
} 

.desktop ul.art-hmenu li li ul>li:first-child 
{ 
    margin-top: 0; 
} 

ul.art-hmenu li li ul>li:last-child 
{ 
    margin-bottom: 0; 
} 

.art-hmenu ul a 
{ 
    display: block; 
    white-space: nowrap; 
    height: 24px; 
    min-width: 7em; 
    border: 0 solid transparent; 
    text-align: left; 
    line-height: 24px; 
    color: #6A7D90; 
    font-size: 13px; 
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif; 
    text-decoration: none; 
    margin:0; 
} 

.art-hmenu ul a:link, 
.art-hmenu ul a:visited, 
.art-hmenu ul a.active, 
.art-hmenu ul a:hover 
{ 
    text-align: left; 
    line-height: 24px; 
    color: #6A7D90; 
    font-size: 13px; 
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif; 
    text-decoration: none; 
    margin:0; 
} 

ul.art-hmenu li li:after 
{ 
    display: block; 
    position: absolute; 
    content: ' '; 
    height: 0; 
    top: -1px; 
    left: 0; 
    right: 0; 
    z-index: 1; 
    border-bottom: 1px dotted #C6D1DD; 
} 

.desktop ul.art-hmenu li li:first-child:before, 
.desktop ul.art-hmenu li li:first-child:after 
{ 
    display: none; 
} 

ul.art-hmenu ul li a:hover, .desktop ul.art-hmenu ul li:hover>a 
{ 
    background: #FFFFFF; 
    background: transparent; 
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    border-radius:5px; 
    margin:0 auto; 
} 
.art-hmenu ul a:hover 
{ 
    text-decoration: none; 
} 

.art-hmenu ul li a:hover 
{ 
    color: #F05305; 
} 

.desktop .art-hmenu ul li:hover>a 
{ 
    color: #F05305; 
} 

ul.art-hmenu ul:before 
{ 
    background: #EFF2F5; 
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    border-radius:5px; 
    border:1px dotted rgba(207, 216, 226, 0.9); 
    margin:0 auto; 
    display: block; 
    position: absolute; 
    content: ' '; 
    z-index: 1; 
} 

/* Begin Additional CSS Styles */ 
@font-face { 
    font-family: 'kidtypepaintregular'; 
    src: url('http://www.exhibitadrian.com/iamsotare/CustomFonts/kidtypep-webfont.eot'); 
    src: url('http://www.exhibitadrian.com/iamsotare/CustomFonts/kidtypep-webfont.eot?#iefix') format('embedded-opentype'), 
     url('http://www.exhibitadrian.com/iamsotare/CustomFonts/kidtypep-webfont.woff') format('woff'), 
     url('http://www.exhibitadrian.com/iamsotare/CustomFonts/kidtypep-webfont.ttf') format('truetype'), 
     url('http://www.exhibitadrian.com/iamsotare/CustomFonts/kidtypep-webfont.svg#kidtypepaintregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 



.BLUE { 
font-family: 'KidTypepaintregular'; 
color: #0000FF; 
font-weight: normal; 
} 
/* End Additional CSS Styles */ 

而且我的Javascript伤心的借口......哈哈

var imgcount = 1; 

    if(imgcount = 1){ 
     $('#img1').addClass("active") 
     var $this = $(this); 
     setTimeout(function() { 
     }, 6000); 
     imgcount = 2; 
    } 

    else if(imgcount = 2){ 
     $('#img1').removeClass("active") 
     $('#img2').addClass("active") 
     var $this = $(this); 
     setTimeout(function() { 
     }, 6000); 
     imgcount = 3; 
    } 
    else if(imgcount = 3){ 
     $('#img2').removeClass("active") 
     $('#img3').addClass("active") 
     var $this = $(this); 
     setTimeout(function() { 
     }, 6000); 
     imgcount = 1; 
    } 

Answer 1

这不是你的贴fiddle.It的编辑是我之前创建和编辑对于这个答案，现在的小提琴。

试试这个小提琴：

http://jsfiddle.net/kzQFQ/77/

var check=0; 
var timer; 
var Wwidth=$(window).width()-9; 

$(document).ready(function() { 
$('.contentContainer').css({'width':''+Wwidth+'px'}); 

$('.three').click(function() { 
    $('.container').animate({ 
     'left': '-1120px' 
    }); 
    clearTimeout(timer); 
    timer=setTimeout(function() {$('.one').click();}, 6000); 
}); 

$('.two').click(function() { 
    $('.container').animate({ 
     'left': '-560px' 
    }); 
    clearTimeout(timer); 
    timer=setTimeout(function() {$('.three').click();}, 6000); 
});  

$('.one').click(function() { 
    $('.container').animate({ 
     'left': ''+0+'px' 
    }); 
    clearTimeout(timer); 
    timer=setTimeout(function() {$('.two').click();}, 6000); 
}); 
timer=setTimeout(function() {$('.two').click();}, 6000); 
});