jQuery+css实现的切换图片功能代码


Posted in Javascript onJanuary 27, 2016

本文实例讲述了jQuery+css实现的切换图片功能代码。分享给大家供大家参考,具体如下:

运行效果截图如下:

jQuery+css实现的切换图片功能代码

具体代码如下:

<!DOCTYPE html>
<html> 
 <head>
  <title>demo</title>
  <script type="text/javascript" src="jquery.js"></script>
  <style type="text/css" >
   body {
    margin:0; padding:0;
   }
   .container {
    border:6px solid gray; background:black;
    width:600px; height:400px; position:relative;
    left:50%; margin-left:-300px; border-radius:6px;
    -webkit-border-radius:6px; -moz-border-radius:6px;
    overflow:hidden;
   }
   .text-center {
    text-align:center;
   }
   h1 {
     font-size:50px; color:gray; font-weight:bolder;
   }
   .imgUL {
    width:100%; height:100%; margin:0px; padding:0px; list-style:none;
   }
   .imgUL li {
    float:left; margin:0px; padding:0px; height:100%; 
    color:gray; font-weight:bolder; text-align:center;
    font-size:100px; line-height:400px;
   }
   .pageUL {
    position:relative; top:-40px; height:40px; list-style:none;
    margin:0px; padding:0px; float:right;
   }
   .pageUL li {
    float:left; display:block; width:36px;
    height:36px; border:2px solid red;
     margin-left:5px; border-radius:4px;
    -webkit-border-radius:4px; text-align:center;
    -moz-border-radius:4px; line-height:36px;
    color:gray; font-weight:bolder; cursor:pointer;
   }
   .pageUL li:hover {
    background:#5ACF00; color:black;
   }
   .pageUL li.active {
    background:#5ACF00; color:black;
   }
  </style>
  <script type="text/javascript" >
   $(document).ready(function(){
    var autoInterval = null,
     imgUL = $(".imgUL"),
     imgliList = imgUL.children("li"),
     liListLength = imgliList.length,
     pageUL = $('.pageUL'),
     pageLiList = pageUL.children('li'),
     pageLiListLength = pageLiList.length,
    // initialize
    activePageLi = $(pageLiList[0]);
    activePageLi.addClass('active');
    imgliList.width(600);
    imgUL.width(liListLength * 600);
    $(".pageUL li").mouseover(function(){
     mouseoverAnimate(this);
    }).mouseout(function(){
     createInterval();
    });
    createInterval();
    function mouseoverAnimate(_this){
     clearInterval(autoInterval);
     activePageLi.removeClass('active');
     activePageLi = $(_this);
     var pageNo = parseInt(activePageLi.html());
     activePageLi.addClass('active');
     imgUL.animate({
      'marginLeft': -600 * (pageNo - 1)
     }, 10);
    }
    function createInterval(){
     autoInterval = setInterval(function(){
      var pageNo = parseInt(activePageLi.html());
      pageNo++;
      if(pageNo > pageLiListLength) {
       pageNo = 1;
      }
      activePageLi.removeClass('active');
      activePageLi = $(pageLiList[pageNo - 1]);
      activePageLi.addClass('active');
      imgUL.animate({
       'marginLeft': -600*(pageNo - 1)
      }, 1100);
     }, 1500);
    }
   });
  </script>
 </head>
 <body>
  <h1 class="text-center">Demo</h1>
  <div class="container" id="container">
   <ul class="imgUL">
    <li>Page1</li>
    <li>Page2</li>
    <li>Page3</li>
    <li>Page4</li>
    <li>Page5</li>
    <li>Page6</li>
   </ul>
   <ul class="pageUL">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
   </ul>
  </div>
 </body>
</html>

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

Javascript 相关文章推荐
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
Apr 20 Javascript
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
JavaScript中ES6 Babel正确安装过程
Jul 18 Javascript
微信小程序 数据访问实例详解
Oct 08 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
React 组件间的通信示例
Jun 14 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
js验证身份证号码记录的方法
Apr 26 Javascript
javascript中的3种继承实现方法
Jan 27 #Javascript
jQuery+css实现的换页标签栏效果
Jan 27 #Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 #Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 #Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 #Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 #Javascript
js实现简单排列组合的方法
Jan 27 #Javascript
You might like
一些php技巧与注意事项分析
2011/02/03 PHP
PHP笔记之:日期函数的使用介绍
2013/04/24 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
php恢复数组的key为数字序列的方法
2015/04/28 PHP
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
2016/03/29 PHP
JS高级笔记
2011/07/13 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
浅谈Python的垃圾回收机制
2016/12/17 Python
Python pymongo模块常用操作分析
2018/09/01 Python
python logging模块的使用总结
2019/07/09 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
Android面试宝典
2013/08/06 面试题
电脑专业个人求职信范文
2014/02/04 职场文书
幼儿园小班家长寄语
2014/04/02 职场文书
志愿者活动总结报告
2014/06/27 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
初中作文评语集锦
2014/12/25 职场文书
中标通知书范本
2015/04/17 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis
MongoDB使用场景总结
2022/02/24 MongoDB