轻松实现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 类似flash效果的立体图片浏览器
Feb 08 Javascript
jquery 1.4.2发布!主要是性能与API
Feb 25 Javascript
js文件缓存之版本管理详解
Jul 05 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
优雅的处理vue项目异常实战记录
Jun 05 Javascript
Openlayers学习之地图比例尺控件
Sep 28 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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
几种显示数据的方法的比较
2006/10/09 PHP
第十五节--Zend引擎的发展
2006/11/16 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
初探jquery——表单应用范例
2007/02/20 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
JS简单去除数组中重复项的方法
2016/09/13 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
js实现简单的打印表格
2020/01/15 Javascript
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
python 爬取微信文章
2016/01/30 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
Python2与Python3的区别点整理
2019/12/12 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
班会关于环保演讲稿
2013/12/29 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
财务管理专业求职信
2014/06/11 职场文书
社区服务标语
2014/07/01 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
驳回起诉裁定书
2015/05/19 职场文书
2015年妇委会工作总结
2015/05/22 职场文书