javascript实现图片轮播效果


Posted in Javascript onJanuary 20, 2016

本文实例介绍了javascript实现图片轮播效果的详细代码,分享给大家供大家参考,具体内容如下

效果图:

javascript实现图片轮播效果

具体代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  *{
    margin: 0;
    padding: 0;
  }
   .wrap{
     width: 510px;
     margin: 0 auto;
     overflow: hidden;
      position: relative;
   }
   .caktye{
     width: 9999px;
     overflow: hidden;
     position: relative;
     left: 0;
   }
   .main{
     text-align: center;
      position: absolute;
      bottom: 10px;
      /*border: 1px solid red;*/
      left: 35%;

   }
   .main button{
     width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 25px;
      display: inline-block;
      border: none;
   }
   .active{
     background-color: yellow;
   }
   .caktye a{
     float: left;
   }
   .caktye img {
      display: block;
      width:510px;
    }
   #prevBtn{
        display: block;
        position: absolute;
        left: 5px;
        bottom: 45%;
      width: 15px;
      height: 15px;
      /*overflow: hidden;*/
      border-left: 5px solid ;
      border-top: 5px solid ;
       border-color: rgba(255,255,255,0.5);
      -webkit-transform: rotate(45deg);
      transform: rotate(-45deg);
   }
   #nextBtn{
      display: block;
      position: absolute;
      right: 5px;
      bottom: 45%;
      width: 15px;
      height: 15px;
      /*overflow: hidden;*/
      border-right: 5px solid;
      border-top: 5px solid;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      border-color: rgba(255,255,255,0.5);
      /*background-color: rgba(255,255,255,0.8);*/
   }

  </style>
</head>
<body>
 
  <div class="wrap">
   <div class="caktye" id="inner">
    <a href="###"><img src="img/1.jpg"></a>
    <a href="###"><img src="img/2.jpg"></a>
    <a href="###"><img src="img/3.jpg"></a>
    <a href="###"><img src="img/4.jpg"></a>
    <a href="###"><img src="img/5.jpg"></a>
      <a href="###"><img src="img/1.jpg"></a>
   </div>
    <div class="main">
      <button class="active">1</button>
      <button>2</button>
      <button>3</button>
      <button>4</button>
      <button>5</button>
   </div>
   <div>
      <a href="###" id="prevBtn"></a>
      <a href="###" id="nextBtn"></a>

   </div>
  </div>   
  <script type="text/javascript">
   var innerList = document.getElementById("inner");
   var btnList = document.getElementsByTagName("button");
   var perWidth = inner.children[0].offsetWidth;
   var prevBtn = document.getElementById("prevBtn");
   var nextBtn = document.getElementById("nextBtn");
   // var imgList = inner.getElementsByTagName("img");
   
   // var perWidth = imgList[0].offsetWidth;
   var timer = 0;
   var timer1 = 0;
   var index =0;
   var runFlag = true; //设置一个动画是否走完的标志位

   for(var i = 0; i < btnList.length; i++) {
      btnList[i].index = i;
      btnList[i].onclick = function() {
         index = this.index;
         
         tab();
      }
   }
   function tab() {
      var start = inner.offsetLeft;
      var end = - perWidth * index;
      var change = end - start;
      var t = 0;
      var maxT = 30;

      clearInterval(timer1);
      timer1 = setInterval(function() {
         t++;
         if(t >= maxT) {
            clearInterval(timer1);
            // alert("停下来了");
            runFlag = true;
         }
         inner.style.left = change/maxT * t + start + "px";
         if(index == btnList.length && t >= maxT) {
            inner.style.left = 0;
         }
      },30)

      // inner.style.left = - perWidth * index + "px";
      for(var j = 0; j < btnList.length; j++) {
         btnList[j].className = "";
      }
      if(index >= btnList.length) {
         btnList[0].className = "active";
      }else {
         btnList[index].className = "active";
      }
      
   }
    function xunhuan(){
       index++;
   
         if(index>btnList.length){
         index=1;
         }
         // inner.style.left = - perWidth * index + "px";
       tab();
   }

   var timer =setInterval(xunhuan,5000);

   inner.onmouseover =function(){
   clearInterval(timer);
   }
   inner.onmouseout =function(){
    timer = setInterval(xunhuan,5000);
   }

   function next() {
      index++;
      if(index > btnList.length) {
         index = 1;
      }
      tab();
   }
   function prev() {
      index--;
      if(index < 0 ) {
         index = btnList.length - 1;
         inner.style.left = - btnList.length * perWidth + "px";
         console.log(index);
      }
      tab();
   }
   //下一张
   nextBtn.onclick = function() {
      clearInterval(timer);
      if(runFlag) {
         next();
      }
      runFlag = false;
      
   }
   //上一张
   prevBtn.onclick = function() {
      clearInterval(timer);
      if(runFlag) {
         prev();
      }
      runFlag = false;
      
   }
  </script>
</body>
</html>

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
解析javascript瀑布流原理实现图片滚动加载
Mar 10 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
微信小程序页面缩放式侧滑效果的实现代码
Nov 15 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
Vue实现穿梭框效果
Sep 30 Javascript
JS如何操作DOM基于表格动态展示数据
Oct 15 Javascript
vue实现防抖的实例代码
Jan 11 Vue.js
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 #Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 #Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 #Javascript
高性能JavaScript循环语句和条件语句
Jan 20 #Javascript
详解Javascript模板引擎mustache.js
Jan 20 #Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 #Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 #Javascript
You might like
一个PHP的String类代码
2010/04/20 PHP
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
vue debug 二种方法
2018/09/16 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
利用python批量检查网站的可用性
2016/09/09 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
python线程中同步锁详解
2018/04/27 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
python中字符串内置函数的用法总结
2018/09/13 Python
python绘制漏斗图步骤详解
2019/03/04 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
财务工作个人求职的自我评价
2013/12/19 职场文书
三项教育活动实施方案
2014/03/30 职场文书
关于环保的建议书
2014/05/12 职场文书
植树造林的宣传标语
2014/06/23 职场文书
教师工作证明范本
2015/06/12 职场文书
vue完美实现el-table列宽自适应
2021/05/08 Vue.js