轻松实现javascript图片轮播特效


Posted in Javascript onJanuary 13, 2016

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

还是先来看一看效果图:

轻松实现javascript图片轮播特效

具体代码:

一、HTML代码分析

<body> 
  <div class="dota"> 
    <ul id="content"> 
      <li><a href="#"><img src="images/1.jpg"/></a></li> 
      <li><a href="#"><img src="images/2.jpg"/></a></li> 
      <li><a href="#"><img src="images/3.jpg"/></a></li> 
      <li><a href="#"><img src="images/4.jpg"/></a></li> 
      <li><a href="#"><img src="images/5.jpg"/></a></li> 
    </ul> 
    <ul id="indicator"> 
      <li class="current"><a href="#">A版是一款手机DOTA应用,它涵盖了</a></li> 
      <li><a href="#">A版是一款手机应用,它涵盖了</a></li> 
      <li><a href="#">A版是一款手机应用,它涵盖了</a></li> 
      <li><a href="#">A版是一款手机应用,它涵盖了</a></li> 
      <li><a href="#">A版是一款手机应用,它涵盖了</a></li> 
    </ul> 
  </div> 
</body>

此效果的层次结构比较清楚:
1. class为data的div是最外层的容器,可以用来控制整个效果图显示的位置。

2. id为content的ul用来存放左侧滚动的图片。

3. id为indicator的ul用来显示右侧的指示栏。

二、CSS代码

*{margin: 0; padding: 0;} 
 
    img{ 
      border:0; 
    } 
 
    .dota{ 
      width:570px; 
      height: 230px; 
      margin:100px auto; 
      position: relative; 
      overflow: hidden; 
    } 
 
    .dota #content{ 
      float: left; 
      list-style: none; 
      position: absolute; 
      width:380px; 
      height:230px; 
    } 
    .dota #content img{ 
      width:380px; 
      height:230px;  
    } 
    .dota #indicator{ 
      float: right; 
      list-style: none; 
      width:180px; 
      height:220px; 
      padding: 5px; 
      background-color: #100F13; 
    } 
    .dota #indicator li{ 
      width: 180px; 
      height: 44px; 
      background: url(images/anniu.png) 0 -44px; 
    } 
 
    .dota #indicator li.current{ 
      background-position: 0 0; 
    } 
 
    .dota #indicator li a{ 
      display: block; 
      width: 160px; 
      height: 34px; 
      padding: 5px 0 5px 25px; 
    } 
 
    .dota #indicator li a:link , .dota #indicator li a:visited{ 
      text-decoration: none; 
      color: #686477; 
      font: 12px/145% "宋体"; 
    }

这里,我对indicator中li的代码进行说明:
.dota #indicator li中的css代码就是设置右侧指示栏中的每一项,注意到,这里使用了background属性,也就是说li的背景是一张图片。准备好的图片如下:

轻松实现javascript图片轮播特效

这张准备好的图片大小为 180 * 88, 而.dota #indicator li中的background属性设置的position属性大小为 0 -44px, 即截取的图片的下半部分;所以indicator中所有的背景图片显示的是下半部分比较暗的部分; 而.dota #indicator li.current 的position属性大小为 0 0,所以默认情况下indicator的第一个显示高亮,其余的显示为暗黑的那部分。然后通过JQuery代码控制current属性作用在 "谁" 身上来切换选中状态。

三、JQuery代码

<script type="text/javascript"> 
 
    $(function(){ 
 
      var nowImage = 0; 
 
      /* 为定时动画服务 */ 
      $(".dota #content li").first().clone().appendTo($(".dota #content")); 
 
      var timer = setInterval(autoAnimate, 1500); 
 
      $(".dota").mouseenter(function(){ 
        clearInterval(timer); 
      }).mouseleave(function(){ 
        timer = setInterval(autoAnimate, 1500); 
      });; 
 
      $(".dota #indicator li").mouseenter(function(){ 
        $(this).addClass("current").siblings().removeClass("current"); 
        nowImage = $(this).index(); 
        /*stop() 可以立刻清楚以前的动画,防止动画叠加*/ 
        $(".dota #content").stop().animate({"top": -230 * nowImage}, 1000); 
      }); 
 
      function autoAnimate(){ 
        if(nowImage == 4){ 
          nowImage = 0; 
           
          $(".dota #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current"); 
          $(".dota #content").stop().animate({"top":-230 * 5}, 1000,function(){ 
            $(".dota #content").css("top",0); 
          }); 
        } 
        else{ 
          nowImage++; 
          $(".dota #content").stop().animate({"top": -230 * nowImage}, 1000); 
          $(".dota #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current"); 
          } 
      } 
 
    }); 
 
  </script>

以上就是轻松实现javascript图片轮播特效的详细代码,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript 验证日期的函数
Mar 18 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 Javascript
vue兄弟组件传递数据的实例
Sep 06 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
layui清除radio的选中状态实例
Nov 14 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 Javascript
简单的JS时钟实例讲解
Jan 13 #Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 #Javascript
详解iframe与frame的区别
Jan 13 #Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 #Javascript
Jquery uploadify上传插件使用详解
Jan 13 #Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 #Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 #Javascript
You might like
php empty函数判断mysql表单是否为空
2010/04/12 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
对Python3 goto 语句的使用方法详解
2019/02/16 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
高级护理专业大学生求职信
2013/10/24 职场文书
生日邀请函范文
2014/01/13 职场文书
事业单位绩效考核实施方案
2014/03/27 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
英语求职信范文
2014/05/23 职场文书
董事长助理工作职责
2014/06/08 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
2014年关工委工作总结
2014/11/17 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript