تحقيق تأثير العرض التلقائي للصور باستخدام JavaScript

هذا المثال يشارككم كود تنفيذ عرض الصور التلقائي في JavaScript، يمكنكم الرجوع إليه، وهو كالتالي

أولاً html جزء الكود (et.thtml):

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link type="text/css" rel="stylesheet" href="css/styleet.css">
  <script type="text/javascript" src="js/system.js"></script>
</head>
<body>
  <div id="main">
    <div id="top">
      <span id="imgL" class="span1"></span>
      <img src="images/1.jpg" id="img" data-index="1" alt=""/>
      <span id="imgR" class="span2"></span>
    </div>
    <div id="bottom">
      <img src="images/1.jpg" id="img1" class="focusClass" data-index="1" alt=""/>
      <img src="images/2.jpg" id="img2" class="initClass" data-index="2" alt=""/>
      <img src="images/3.jpg" id="img3" class="initClass" data-index="3" alt=""/>
      <img src="images/4.jpg" id="img4" class="initClass" data-index="4" alt=""/>
      <img src="images/5.jpg" id="img5" class="initClass" data-index="5" alt=""/>
      <img src="images/6.jpg" id="img6" class="initClass" data-index="6" alt=""/>
      <img src="images/7.jpg" id="img7" class="initClass" data-index="7" alt=""/>
    </div>
  </div>
  <script type="text/javascript" src="js/et.js"></script>
</body>
</html>

ثانيًا، جزء الكود CSS (styleet,css):

#main span{
  width: 22px;
  height: 38px;
  position: absolute;
  display: inline-block;
  cursor: pointer;
  background: url("../images/1.png") no-repeat 0 0;
}
.span1{
  background-position: 0 0;
  left:20px;
  top: 90px;
}
.span2{
  background-position: -22px 0;
  right: 20px;
  top: 90px;
}
#main{
  width: 500px;
  margin: 20px auto;
  text-align: center;
  border: solid 2px red;
  position: relative;
}
.initClass{
  width: 50px;
  border: solid 2px #fff;
  margin: 10px 5px;
}
.focusClass{
  width: 50px;
  border: solid 2px red;
  margin: 10px 5px;
}

ثالثًا، جزء الكود JavaScript (et.js):

/**
 * تم إنشاء هذا الملف بواسطة LuanReco في 28/8/2015.
 */
var slide={
  arrImg:new Array('images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg','images/7.jpg'),
  initClass:'initClass',
  focusClass:'focusClass',
  index:1,
  arrMax:7,
  imgMain:'img'
}
slide.top={
  //导航事件
  navEvent:function(){
    //上部分大图片显示累加后下标对应的图片
    $$(slide.imgMain).src=slide.arrImg[slide.index-1];
    //根据焦点下标值组合成导航图片名称
    var n='img'+slide.index;
    //执行对应导航图片单击事件
    $$(n).click();
  },
  //处理页面上一部分的逻辑
  clickRight:function(){
    //点击向右按钮处理事件
    console.log(slide.index);
    //当下标小于或等于最大图片数量时
    if(slide.index<slide.arrMax){
      //累加当前下标值
      slide.index++;
      slide.top.navEvent();
    }
  },
  clickLeft:function(){
    //点击向右按钮处理事件
    console.log(slide.index);
    //当下标小于或等于最大图片数量时
    if(slide.index>1){
      //累加当前下标值
      slide.index--;
      slide.top.navEvent();
    }
  }
}
slide.bottom={
  initImgClass:function(){
    //初始化所有图片的样式
    for(var i=1;i<=slide.arrMax;i++){
      var n='img'+i;
      $$(n).className=slide.initClass;
    }
  },
  click:function(){
    //处理页面下一部分的逻辑
    $$('imgL').onclick=function(){
      slide.top.clickLeft();
    }
    $$('imgR').onclick=function(){
      slide.top.clickRight();
    }
    //获取所有底部的小图片
    for(var i=1;i<=slide.arrMax;i++){
      //绑定点击事件到每张图片
      var n='img'+i;
      $$(n).onclick=function(){
        //إعداد جميع الأنماط
        slide.bottom.initImgClass();
        //حصول العنصر الصور على نمط التركيز
        this.className=slide.focusClass;
        //اعرض الصورة الكبيرة التي تتطابق مع الصورة الصغيرة المكتوبة في الأعلى
        $$(slide.imgMain).src=slide.arrImg[this.getAttribute('data-index')-1];
        //إعادة تسجيل موقع الصورة المركزية في القائمة على موقعها في التسلسل
        slide.index=this.getAttribute('data-index');
      }
    }
  }
}
slide.autoplay={
  play:function(){
    var m=1;
    //for(var i=1;i<=slide.arrMax;i++){
      setInterval(function(){
        var n='img'+m;
        m++;
        $$(n).click();
        if(m>6)
          m=1;
      },1000)
    //}
  }
}
slide.autoplay.play();
slide.bottom.click();

هذا هو نهاية محتوى هذا المقال، نأمل أن يكون قد ساعدكم في تعلم جديد، ونأمل أيضًا أن تدعموا تعليم呐喊.

بيان: محتوى هذا المقال تم جمعه من الإنترنت، يحق لصاحب الحقوق أن يكون المالك، يتم جمع المحتوى من إسهامات المستخدمين عبر الإنترنت، ويستخدم هذا الموقع دون امتلاك حقوق الملكية، ولا يتم تعديل المحتوى بشكل يدوي، ولا يتحمل الموقع أي مسؤولية قانونية متعلقة بذلك. إذا اكتشفتم محتوى يشتبه في حقوق النسخ، فيرجى إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال #بـ @) للإبلاغ، وتقديم الأدلة ذات الصلة، وإذا تم التحقق من ذلك، سيتم حذف المحتوى المزعوم فورًا.

دليل الأساسيات

سيحبك