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 相关文章推荐
深入认识JavaScript中的函数
Jan 22 Javascript
javascript 读取图片文件的大小
Jun 25 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
JS实现json数组排序操作实例分析
Oct 28 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 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的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
ext 代码生成器
2009/08/07 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
Python微信公众号开发平台
2018/01/25 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
What is EJB
2016/07/22 面试题
最新教师自我评价分享
2013/11/12 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
初一新生军训方案
2014/05/22 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
行政文员岗位职责
2015/02/04 职场文书
2015年女工委工作总结
2015/07/27 职场文书
初二英语教学反思
2016/02/15 职场文书
详解MySQL中的pid与socket
2021/06/15 MySQL
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技