轻松实现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 相关文章推荐
js 创建书签小工具之理论
Feb 25 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
GRID拖拽行的实例代码
Jul 18 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
vue: WebStorm设置快速编译运行的方法
Oct 18 Javascript
JavaScript使用setTimeout实现倒计时效果
Feb 19 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小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
JavaScript插入动态样式实现代码
2012/02/22 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
2020/03/03 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
详谈python http长连接客户端
2017/06/12 Python
python字典DICT类型合并详解
2017/08/17 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
房屋公证委托书
2014/04/03 职场文书
学校交通安全责任书
2014/08/25 职场文书
中秋节慰问信
2015/02/15 职场文书
大学生读书笔记范文
2015/07/01 职场文书
欠条样本
2015/07/03 职场文书
Vue2.0搭建脚手架
2022/03/13 Vue.js