利用css和javascript制作的幻灯片效果

最新推荐文章于 2020-01-19 11:20:39 发布

u011263845

最新推荐文章于 2020-01-19 11:20:39 发布

阅读量699

点赞数

分类专栏： javascript&&jquery 文章标签： javascript 幻灯片

本文链接：https://blog.csdn.net/u011263845/article/details/45112565

版权

javascript&&jquery 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

幻灯片demo：http://codepen.io/tianzi77/pen/aOoJVO

下面是代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
body,div,ul,li{
   margin:0;padding:0;
}
ul{
   list-style-type:none;
}
#box{
   position:relative;
   width:522px;
   height:282px;
   background:#fff;
   border-radius:5px;
   border:8px solid #fff;
   margin:10px auto;
   cursor:pointer;
}
#box .list{
   position:relative;
   width:520px;
   height:280px;
   overflow:hidden;
}
#box .list ul{
   position:absolute;
   top:0;
   left:0;
}
#box .list li{
   width:520px;
   height:280px;
   overflow:hidden;
}
#box .count{
   position:absolute;
   left: 45%;
   bottom:5px;
}
#box .count li{
   color:#fff;
   float:left;
   width:20px;
   height:20px;
   cursor:pointer;
   margin-right:5px;
   overflow:hidden;
   background:#F90;
   opacity:0.7;
   filter:alpha(opacity=70);
   border-radius:20px;
}
#box .count li.current{
   color:#fff;
   opacity:1;
   filter:alpha(opacity=100);
   font-weight:700;
   background:#f60;
}
#tmp{
   width:100px;
   height:100px;
   background:red;
   position:relative;
   left:50%;
   top:50%;
}
</style>
<script type="text/javascript">
window.onload = function ()
{
   var oBox = document.getElementById("box");
   var oList = oBox.getElementsByTagName("ul")[0];
   var aImg = oBox.getElementsByTagName("img");
   var timer = playTimer = null;
   var index = i = 0;
   var aTmp = [];
   var aBtn = null;

   for (i = 0; i < aImg.length; i++){
       aTmp.push("<li>" + (i + 1) + "</li>");
       }

   var oCount = document.createElement("ul");
   oCount.className = "count";
   oCount.innerHTML = aTmp.join("");
   oBox.appendChild(oCount);
   aBtn = oBox.getElementsByTagName("ul")[1].getElementsByTagName("li");

   cutover();

   for (i = 0; i < aBtn.length; i++)
   {
       aBtn[i].index = i;
       aBtn[i].onmouseover = function ()
       {
           index = this.index;
           cutover()
       }
   }

   function cutover()
   {
       for (i = 0; i < aBtn.length; i++) aBtn[i].className = "";
       aBtn[index].className = "current";
       startMove(-(index * aImg[0].offsetHeight))
   }

   function startMove(iTarget)
   {
       clearInterval(timer);
       timer = setInterval(function ()
       {
           doMove(iTarget)
       }, 30)
   }
   function doMove (iTarget)
   {
       var iSpeed = (iTarget - oList.offsetTop) / 10;
       iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
       oList.offsetTop == iTarget ? clearInterval(timer) : oList.style.top = oList.offsetTop + iSpeed + "px";
   }
}
</script>
</head>
<body>
<div id="box">
    <div class="list">
        <ul>
            <li><img src="http://chuantu.biz/t2/3/1429333821x-954498901.jpg" width="520" height="280" /></li>
            <li><img src="http://chuantu.biz/t2/3/1429333868x-954497682.jpg" width="520" height="280" /></li>
            <li><img src="http://chuantu.biz/t2/3/1429333888x-954497682.jpg" width="520" height="280" /></li>
        </ul>
    </div>
</div>
</body>
</html>