DDR爱好者之家

js手动播放图片实现图片轮播效果
站长资源 2024/11/28 佚名
49 1538
DDR爱好者之家 Design By 杰米

本文实例为大家分享了js图片轮播具体实现代码，供大家参考，具体内容如下

一、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="/UploadFiles/2021-04-02/system.js">


二、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;
}





三、js代码部分（et.js）：







/**
 * Created by LuanReco on 2015/8/28.
 */
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();








以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米