jq加css制作图片切换,jQuery+css实现的切换图片功能代码
本文实例讲述了jQuery+css实现的切换图片功能代码。分享给大家供大家参考,具体如下:
运行效果截图如下:
具体代码如下:
demo
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;
}
$(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);
}
});
Demo
- Page1
- Page2
- Page3
- Page4
- Page5
- Page6
- 1
- 2
- 3
- 4
- 5
- 6
更多关于jQuery特效相关内容感兴趣的读者可查看本站专题:《jQuery常见经典特效汇总》及《jQuery动画与特效用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
jq加css制作图片切换,jQuery+css实现的切换图片功能代码相关推荐
- H5开发:使用H5、CSS、JS、JQUERY实现从本地选择图片、预览图片、上传图片列表
需求描述 使用H5.CSS.JS.JQUERY 点击添加图片按钮,从本地选择图片(同名图片不可重复选择),在页面预览选中的图片 点击图片查看大图,点击图片右上角"×"删除此图 点击 ...
- 企业网站前端制作实战教程 JQuery CSS JS HTML 登录表单验证
引入重置css样式reset样式 @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, h2, ...
- 用CSS制作大背景网站,以及80个大背景图片网站。
用CSS制作大背景网站 As the monitor resolution and internet speed is advancing, it seems like more and more d ...
- 企业网站前端制作实战教程 JQuery CSS JS HTML 登录界面
盒子模型 引入重置css样式reset样式 @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, ...
- html简单图片放大镜,jQuery轻量级简单实用的图片放大镜特效
zoomtoo是一款轻量级的简单实用的jQuery图片放大镜特效插件.这个图片放大镜特效在鼠标滑过骨牌的时候,在原来图片区域内部将图片放大.鼠标进入和离开图片区域时都带有淡入淡出的效果.该图片放大镜插 ...
- html怎么做动态切换效果,使用CSS制作一个比较炫酷的页面切换动画
今天我们想与大家分享一组创意的页面切换熊效果集合.我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果.虽然有些效果都非常简单,只是简单的滑动动作,但另外的一些则是利用了 ...
- 企业网站前端制作实战教程 JQuery CSS JS HTML 项目需求分析与准备工作
1思维导图 2登录界面 3管理界面
- html和css制作动漫岛,CSS动画
transition 早期要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, ...
- html css制作计算器,使用html+css+js实现计算器
使用html+css+js实现计算器,开启你的计算之旅吧 效果图: 代码如下,复制即可使用: /* 主体 */ .counter{ width: 396px; height: 486px; backg ...
最新文章
- 激光雷达数据到云cloud
- 国内最牛逼的笔记,不接受反驳!!
- 图文结合!一文搞懂 Redis 常用知识点!
- linux IP类常用命令
- python pypdf2另存为图片_用Python玩转PDF的各种骚操作
- vue脚手架---vue-cli
- 形式化方法、《大象:Thinking in UML》
- ad 原理图差分线_再改原理图,得加钱检查原理图PCB系列教程17
- echart vue 图表大小_vue之将echart封装为组件
- C++起始(内联函数,宏的优缺点,const关键字,auto关键字(C++11)基于范围的for循环(C++11). 指针空值nullptr(C++11))
- Linux 引入自动化测试平台 KernelC
- android 解析XML方式(二)
- Linux蓝牙耳机软件,Linux下蓝牙耳机的配置与测试
- Flash存储的故事
- rss阅读器Reeder 5 for Mac
- 飞信2008协议抓包(2)
- Unity ML-Agents 之 环境的搭建,以及的 demo 测试
- js中的数据驱动(基础)
- 似然函数、最大似然函数理解
- 辗转相除法c++_欧冠尤文被黑马,C罗太可惜了,他错失了一次千载难逢的机会...