jQuery+css实现的切换图片功能代码
更新时间：2016年01月27日 11:12:20 作者：m1870164
这篇文章主要介绍了jQuery+css实现的切换图片功能代码,涉及jQuery响应鼠标事件动态变换页面元素样式的相关技巧,需要的朋友可以参考下
本文实例讲述了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特效相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》及《jQuery动画与特效用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
关于hashchangebroker和statehashable的补充文档
我觉得之前写的两篇随笔有点不负责任，完全没写明白，补充了一份文档（权且算是文档吧=.=）2011-08-08
这篇文章主要为大家详细介绍了jQuery实现大屏滚动播放效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
本文示例要为大家实现的效果是鼠标滑动,显示详情，代码很简洁，很适合学习2014-01-01
这篇文章主要介绍了jquery制作漂亮的弹出层提示消息特效,需要的朋友可以参考下2014-12-12
CamanJs库用于个人项目中进行使用的图形操作库，这个库是基于JavaScript的canvas操作库，接下来，通过本篇文章给大家详细介绍使用CamanJS在Web页面上处理图像的技巧，需要的朋友一起来学习下2015-08-08
jquery表格datatables实例解析 直接加载和延迟加载
这篇文章主要针对jquery表格datatables实例进行解析，可以直接加载和延迟加载，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
以下是用jquery控制ASP.NET中的两个asp:listbox控件中选择项的移动。2009-11-11
这篇文章主要介绍了jQuery表格排序组件-tablesorter的使用,需要的朋友可以参考下2014-05-05
在日常开发中JQuery是我们使用最频繁的JS库。使用JQuery进行开发，你需要先了解JQuery的基本语法。下面是在学习JQuery时总结的一些简单语法。2015-02-02
这篇文章主要介绍了jquery 校验中国身份证号码实例详解的相关资料,需要的朋友可以参考下2017-04-04
最新评论