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 相关文章推荐
基于jquery的监控数据是否发生改变
Apr 11 Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
jquery实现checkbox 全选/全不选的通用写法
Feb 22 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
Feb 20 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
three.js中3D视野的缩放实现代码
Nov 16 Javascript
JavaScript迭代器的含义及用法
Jun 21 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
JavaScript Window窗口对象属性和使用方法
Jan 19 Javascript
javascript的hashCode函数实现代码小结
Aug 11 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 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
python 拼接文件路径的方法
2018/10/23 Python
python实现顺时针打印矩阵
2019/03/02 Python
python实现最速下降法
2020/03/24 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
python3的pip路径在哪
2020/06/23 Python
Python如何对齐字符串
2020/07/30 Python
python字典按照value排序方法
2020/12/28 Python
CLR与IL分别是什么含义
2016/08/23 面试题
打架检讨书300字
2014/02/02 职场文书
干部下基层实施方案
2014/03/14 职场文书
倡议书格式模板
2014/05/13 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
毕业设计工作总结
2015/08/14 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers