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 相关文章推荐
CheckBox 如何实现全选?
Jun 23 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
javascript对象的创建和访问
Mar 08 Javascript
JS实现HTML表格排序功能
Aug 05 Javascript
Node.js笔记之process模块解读
May 31 Javascript
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
Mar 30 Javascript
详解微信小程序开发用户授权登陆
Apr 24 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 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版 汉字转码的实现详解
2013/06/09 PHP
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
Laravel 框架控制器 Controller原理与用法实例分析
2020/04/14 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
解析js原生方法创建表格效率测试
2013/07/08 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
python使用webbrowser浏览指定url的方法
2015/04/04 Python
Python对列表排序的方法实例分析
2015/05/16 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
python实现学生通讯录管理系统
2021/02/25 Python
HTML5 Canvas像素处理使用接口介绍
2012/12/02 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
高级技校毕业生自荐信
2013/11/18 职场文书
家长会学生家长演讲稿
2013/12/29 职场文书
水果连锁超市创业计划书
2014/01/24 职场文书
员工入职担保书范文
2014/04/01 职场文书
生产操作工岗位职责
2014/09/16 职场文书
员工试用期自我评价
2014/09/18 职场文书
计划生育个人总结
2015/03/02 职场文书
会计稽核岗位职责
2015/04/13 职场文书
中小企业员工手册范本
2015/05/14 职场文书
实习单位鉴定意见
2015/06/04 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js