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 相关文章推荐
Js之软键盘实现(js源码)
Jan 30 Javascript
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
Javascript的匿名函数小结
Dec 31 Javascript
两个JavaScript jsFiddle JSBin在线调试器
Mar 14 Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 Javascript
jQuery操作动态生成的内容的方法
May 28 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
Node.js Buffer用法解读
May 18 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
node运行js获得输出的三种方式示例详解
Jul 02 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
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
一个简单php扩展介绍与开发教程
2010/08/19 PHP
PHP 遍历文件实现代码
2011/05/04 PHP
解析php开发中的中文编码问题
2013/08/08 PHP
php常用表单验证类用法实例
2015/06/18 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
javascript 表单规则集合对象
2009/07/21 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
jQuery Ajax调用WCF服务详细教程
2015/03/31 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
JS轮播图实现简单代码
2021/02/19 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
python多线程threading.Lock锁用法实例
2014/11/01 Python
Python re模块介绍
2014/11/30 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
python读取Kafka实例
2019/12/23 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
CSS3 实现雷达扫描图的示例代码
2020/09/21 HTML / CSS
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
英语系毕业生自荐信
2013/10/31 职场文书
矫正人员思想汇报
2014/01/08 职场文书
入党思想汇报怎么写
2014/04/03 职场文书
学校教师读书活动总结
2014/07/08 职场文书
单位活动策划方案
2014/08/17 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
员工试用期工作总结
2019/06/20 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
mysqldump进行数据备份详解
2022/07/15 MySQL