仿Flash图片轮播

最新推荐文章于 2018-08-31 21:29:28 发布

曲奇小姐

最新推荐文章于 2018-08-31 21:29:28 发布

阅读量375

点赞数 1

分类专栏： Javascript

本文链接：https://blog.csdn.net/weixin_41586886/article/details/81118065

版权

Javascript 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>实现图片轮换播放</title>
    <link rel="stylesheet" href="./css/main.css">
  </head>
  <body>
    <div id="wrapper" class="wrapper">
      <div class="big_image">
        <!-- 把大图片分成两个区域，如果鼠标进入做区域就出现左边的箭头，这里在CSS布局时用到了z_index
      感觉是个不错的思路，把分区这一层放在最上面，既不影响图片的展示，也可以很少的解决箭头显示的问题 -->
        <div class="prev"></div>
        <div class="next"></div>
        <a href="javascript:;" class="mark_left"></a>
        <a href="javascript:;" class="mark_right"></a>

        <ul>
          <li style="z-index:1;"><img src="images/1.jpg" alt=""></li>
          <li><img src="images/2.jpg" alt=""></li>
          <li><img src="images/3.jpg" alt=""></li>
          <li><img src="images/4.jpg" alt=""></li>
          <li><img src="images/5.jpg" alt=""></li>
          <li><img src="images/6.jpg" alt=""></li>
        </ul>
      </div>
      <div class="small_image">
        <ul style="width:780px;">
          <li style="filter:100;opacity:1;"><img src="images/1.jpg" alt=""></li>
          <li><img src="images/2.jpg" alt=""></li>
          <li><img src="images/3.jpg" alt=""></li>
          <li><img src="images/4.jpg" alt=""></li>
          <li><img src="images/5.jpg" alt=""></li>
          <li><img src="images/6.jpg" alt=""></li>
        </ul>
      </div>
    </div>
  </body>
  <script src="./js/move.js"></script>
  <script src="./js/main.js"></script>
</html>

/* 全局样式 */
body{
  background: #666;
}
ul{
  padding: 0;
  margin: 0;
}
li{
  list-style: none;
}
img{
  border:0;
}
/* 大图样式 */
.wrapper{
  width:400px;
  height: 430px;
  margin: 50px auto 0;
  background-color: #999;
}
.big_image{
  width: 400px;
  height: 320px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px slid #ccc;
  background: #222;
}
.big_image li{
  width: 400px;
  height: 320px;
  overflow: hidden;
  position: absolute;
}
.big_image li img{
  width: 400px;
  height: 320px;
}
/* 箭头和分区 */
.mark_left {
  width: 200px;
  height: 320px;
  position: absolute;
  left: 0;
  top: 0;
  background:red;
  filter: alpha(opacity:0);
  opacity: 0;
  z-index:3000;
}
.mark_right {
  width: 200px;
  height: 320px;
  position: absolute;
  left: 200px; top: 0;
  background: green;
  filter: alpha(opacity:0);
  opacity: 0;
  z-index:3000;
}
.prev {
  width: 60px;
  height: 60px;
  background: url(../images/btn.gif) no-repeat;
  position: absolute;
  top: 130px;
  left: 10px;
  z-index: 3001;
  filter:alpha(opacity:0);
  opacity:0;
  cursor: pointer;
}
.next {
  width: 60px;
  height: 60px;
  background: url(../images/btn.gif) no-repeat 0 -60px;
  position: absolute;
  top: 130px;
  right: 10px;
  z-index: 3001;
  /* IE */
  filter:alpha(opacity:0);
  /* chrom和FF */
  opacity:0;
  cursor: pointer;
}
/* 小图样式 */
.small_image{
  width: 380px;
  height: 94px;
  position: relative;
  top:7px;
  left: 10px;
  overflow: hidden;
}
.small_image ul{
  height: 94px;
  position: absolute;
  top:0;
  left:0;
}
.small_image li{
  width: 120px;
  height: 94px;
  float:left;
  padding-right: 10px;
  cursor: pointer;
}
.small_image img{
  width: 120px;
  height: 94px;
}

// 先封装一个根据类名获取元素的小函数，通常在比较复杂的项目中使用类名来获取元素是比较合适的
function getByClass(oParent,sClass){
  var aEle=document.getElementsByTagName('*');
  var aResult=[];

  for(var i=0;i<aEle.length;i++){
    if(aEle[i].className==sClass){
      aResult.push(aEle[i]);
    }
  }
  return aResult;
}

var oDiv=document.getElementById("wrapper");
var oBtnPrev=getByClass(oDiv,'prev')[0];
var oBtnNext=getByClass(oDiv,'next')[0];
var oMarkLeft=getByClass(oDiv,'mark_left')[0];
var oMarkRight=getByClass(oDiv,'mark_right')[0];

var oDivSmall=getByClass(oDiv,'small_image')[0];
var oUlSmall=oDivSmall.getElementsByTagName('ul')[0];
var aLiSmall=oDivSmall.getElementsByTagName('li');
var oBig=getByClass(oDiv,'big_image')[0];
var aLiBig=oBig.getElementsByTagName('li');
var nowzIndex=2;
var now=0;

oUlSmall.style.width=aLiSmall.length*aLiSmall[0].offsetWidth+'px';

// 左右按钮
// 当鼠标移入左边区域的时候，左箭头出现
oBtnPrev.onmouseover=oMarkLeft.onmouseover=function(){
  startMove(oBtnPrev,'opacity',100);
}
// 当鼠标移出左边区域的时候，左箭头消失
oBtnPrev.onmouseout=oMarkLeft.onmouseout=function(){
  startMove(oBtnPrev,'opacity',0);
}
// 当鼠标移入右边区域的时候，右箭头出现
oBtnNext.onmouseover=oMarkRight.onmouseover=function(){
  startMove(oBtnNext,'opacity',100);
}
// 当鼠标移出右边区域的时候，右箭头消失
oBtnNext.onmouseout=oMarkRight.onmouseout=function(){
  startMove(oBtnNext,'opacity',0);
}

//封装一个展示图片的函数
function tab(){
  aLiBig[now].style.zIndex=nowzIndex++; //将对应的大图的展示优先级调到目前最先
    aLiBig[now].style.height=0;
    startMove(aLiBig[now],'height',320); //造成图片下拉的效果
    for(var i=0;i<aLiSmall.length;i++){
      startMove(aLiSmall[i],'opacity',60); //一开始的时候让所有小图都处于透明的状态
    };
    startMove(aLiSmall[now],'opacity',100); //使当前的小图处于点亮的状态

    if(now==0){
      startMove(oUlSmall,'left',0);
    }
    else if(now==aLiSmall.length-1){
      startMove(oUlSmall,'left',-(now-2)*aLiSmall[0].offsetWidth);
    }
    else{
      startMove(oUlSmall,'left',-(now-1)*aLiSmall[0].offsetWidth);
    }
}

// 大图切换
for(var i=0;i<aLiSmall.length;i++){
  aLiSmall[i].index=i; //使每一个小图都有自己的一个序号，根据序号找到对应的大图
  aLiSmall[i].onclick=function(){  //为每一个小图绑定一个点击事件，点击即可切换到对应的大图
    if(this.index==now)return;
    now=this.index;
    tab();
  };
  aLiSmall[i].onmouseover=function(){
    startMove(this,'opacity',100);
  };
  aLiSmall[i].onmouseout=function(){
    if(this.index!=now){  //当当前点击的大图序号与目前正在展示的大图序号不一样时，使当前正在展示的大图对应的小图变暗
      startMove(this,'opacity',60);
    }
  };
}

//左右按钮切换大图
oBtnNext.onclick=function(){
  now++;
  if(now==aLiSmall.length){
    now=0;
  };
  tab();
};
oBtnPrev.onclick=function(){
  now--;
  if(now==-1){
    now=aLiSmall.length-1;
  };
  tab();
};

//自动播放+当鼠标移入时暂停自动播放，当鼠标移出时再开始自动播放
var timer=setInterval(oBtnNext.onclick,2000);
oDiv.onmouseover=function(){
  clearInterval(timer);
};
oDiv.onmouseout=function(){
  timer=setInterval(oBtnNext.onclick,2000);
};

曲奇小姐

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
仿Flash图片轮播

&lt;!DOCTYPE html&gt;&lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;实现图片轮换播放&lt;/title&gt; &lt;link rel="stylesh
复制链接

扫一扫

专栏目录