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

Question

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

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

这是我当前工作的一个方法 - 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

这不是你发布的小提琴的编辑。它是我之前创建并为此答案编辑的小提琴。

试试这个小提琴：

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);
});