javascript - 制作一个图像 slider ，每 6 秒更改一次图像

标签 javascript jquery html css image

我正在尝试制作一个图像 slider ，使用我的客户已经在使用的设计。但是我从来没有制作过每 6 秒更改一次图像的图像 slider ，您可以选择转到图像 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;
    }

最佳答案

这不是您发布的 fiddle 的编辑。这是我之前创建并现在针对此答案编辑的 fiddle 。

试试这个 fiddle :

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

关于javascript - 制作一个图像 slider ，每 6 秒更改一次图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20586553/

上一篇：javascript - setTimeout() - 分割 slider 中的输出不正确

下一篇：javascript - 从 Ajax 查询中获取结果

相关文章：

c# - 下载文件时iframe onload

Jquery:如何在 if else 语句中执行 .play() 函数？

javascript - 在选中的复选框上将字体粗细更改为粗体

javascript - 将加载 gif 添加到我的 loadmore jquery 按钮

html - 如果容器也有以百分比表示的最小高度，则以百分比表示的 CSS 最小高度将不起作用

javascript - iPad 方向改变后页面元素放置不当

javascript - JavaScript 中的事件监听器

javascript - javascript 变量的样式悬停状态

javascript - 在 Bootstrap Carousel 中使用图表 js

javascript - 提交时停止表单刷新页面

©2024 IT工具网  联系我们