Jquery 轮播图简易框架
=====================基本结构=====================
<div class="carousel" style="width: 800px;height: 378px;">
<ul class="carousel-imgs">
<li>
<a href="#"><img src="picture.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="picture.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="picture.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="picture.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="picture.jpg" alt="" /></a>
</li>
</ul>
<div class="carousel-btns">
<button type="button" class="carousel-btn-left"><</button>
<button type="button" class="carousel-btn-right">></button>
</div>
</div>
这是轮播图的HTML基本结构，只需要做细微调整即可使用。1、替换carousel-imgs中的图像地址 2、为图像添加超链接 3、指定 DIV.carousel 的大小（默认宽800 高378）
有了轮播图的基本结构，还需要引入相应的样式和效果，这里提供两种基础的轮播图效果，滚动轮播和渐变轮播。
=====================效果引入=====================
滚动轮播图：
.carousel {
width: 800px;
height: 378px;
padding: 0px;
margin: 0px auto;
position: relative;
overflow: hidden;
}
.carousel-imgs {
width: 500%;
height: 100%;
padding: 0px;
margin: 0px;
list-style: none;
position: absolute;
}
.carousel-imgs li {
width: 20%;
height: 100%;
float: left;
}
.carousel-imgs a {
text-decoration: none;
}
.carousel-imgs img {
width: 100%;
height: 100%;
}
.carousel-btns {
width: 100%;
position: absolute;
top: 45%;
}
.carousel-btns button {
border: 0px;
outline: none;
padding: 5px;
background: rgba(0, 0, 0, 0.4);
text-align: center;
color: white;
font-size: 34px;
font-family: "microsoft yahei";
}
.carousel-btns button:hover {
background: rgba(0, 0, 0, 0.5);
}
.carousel-btn-left {
float: left;
}
.carousel-btn-right {
float: right;
}
滚动轮播图样式
function carousel(left, top) {
/* 获取元素对象 */
var $carousel = $(".carousel");
var $imgs = $(".carousel-imgs li");
var $btnL = $(".carousel-btn-left");
var $btnR = $(".carousel-btn-right");
/* 创建导航按钮 */
var $item_group = $("<ul></ul>");
$item_group.attr("class", "carousel-items");
$imgs.each(function() {
$item_group.append("<li></li>");
});
$carousel.append($item_group);
/* 样式初始化 */
$item_group.css({
"padding": "0px",
"margin": "0px",
"list-style": "none",
"width": "100px",
"position": "absolute",
"left": left,
"top": top
});
$item_group.children().css({
"width": "10px",
"height": "10px",
"padding": "0px",
"margin": "5px",
"background": "white",
"opacity": "0.6",
"border-radius": "5px",
"box-shadow": "0 0 5px black",
"cursor": "pointer",
"float": "left"
});
var index = 0; // 初始展示位置
var $items = $(".carousel-items li");
$items.eq(index).css("background", "gray");
/* 按钮点击动作 */
$btnL.click(function() {
imgAnimator(false);
});
$btnR.click(function() {
imgAnimator(true);
});
$items.click(function() {
imgAnimator(true, $items.index($(this)));
});
/* 图像动画 */
function imgAnimator(toNext, select) {
if(select != null) {
index = select;
} else if(toNext == true) {
index = ($imgs.length + index + 1) % $imgs.length;
} else if(toNext == false) {
index = ($imgs.length + index - 1) % $imgs.length;
}
$items.css("background", "white");
$items.eq(index).css("background", "grey");
var position = index * -($imgs.outerWidth());
$imgs.parent().animate({
"left": position + "px"
}, "fast");
}
}
滚动轮播图效果
渐变轮播图：
.carousel {
width: 800px;
height: 378px;
padding: 0px;
margin: 0 auto;
position: relative;
}
.carousel-imgs {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
list-style: none;
background: white;
}
.carousel-imgs li {
width: 100%;
height: 100%;
position: absolute;
z-index:;
opacity:;
}
.carousel-imgs a {
text-decoration: none;
}
.carousel-imgs img {
width: 100%;
height: 100%;
}
.carousel-btns {
width: 100%;
z-index:;
position: absolute;
top: 45%;
}
.carousel-btns button {
border: 0px;
outline: none;
padding: 5px;
background: rgba(0, 0, 0, 0.4);
text-align: center;
color: white;
font-size: 34px;
font-family: "microsoft yahei";
}
.carousel-btns button:hover {
background: rgba(0, 0, 0, 0.5);
}
.carousel-btn-left {
float: left;
}
.carousel-btn-right {
float: right;
}
渐变轮播样式
function carousel(left, top) {
/* 获取元素对象 */
var $carousel = $(".carousel");
var $imgs = $(".carousel-imgs li");
var $btnL = $(".carousel-btn-left");
var $btnR = $(".carousel-btn-right");
/* 创建导航按钮 */
var $item_group = $("<ul></ul>");
$item_group.attr("class", "carousel-items");
$imgs.each(function() {
$item_group.append("<li></li>");
});
$carousel.append($item_group);
/* 样式初始化 */
$item_group.css({
"padding": "0px",
"margin": "0px",
"list-style": "none",
"width": "100px",
"z-index": "50",
"position": "absolute",
"left": left,
"top": top
});
$item_group.children().css({
"width": "10px",
"height": "10px",
"padding": "0px",
"margin": "5px",
"background": "white",
"opacity": "0.6",
"border-radius": "5px",
"box-shadow": "0 0 5px black",
"cursor": "pointer",
"float": "left"
});
/* 初始展示位置 */
var index = 0;
var $items = $(".carousel-items li");
$items.eq(index).css("background", "gray");
$imgs.eq(index).css("opacity", "1");
$imgs.eq(index).css("z-index", "20");
/* 按钮点击动作 */
$btnL.click(function() {
imgAnimator(false);
});
$btnR.click(function() {
imgAnimator(true);
});
$items.click(function() {
imgAnimator(true, $items.index($(this)));
});
/* 图像动画 */
function imgAnimator(toNext, select) {
if(select != null) {
index = select;
} else if(toNext == true) {
index = ($imgs.length + index + 1) % $imgs.length;
} else if(toNext == false) {
index = ($imgs.length + index - 1) % $imgs.length;
}
$items.css("background", "white");
$items.eq(index).css("background", "grey");
$imgs.eq(index).css("z-index", 20);
$imgs.eq(index).animate({
"opacity": "1"
}, "slow", function() {
$imgs.css("z-index", "0");
$imgs.css("opacity", "0");
$imgs.eq(index).css("z-index", 10);
$imgs.eq(index).css("opacity", "1");
});
}
}
渐变轮播效果
由于轮播图的效果是依靠JQuery实现的，所以一定要在引入效果之前引入JQuery。
启用效果需要手动初始化，在基本结构之后添加 <script>carousel("10%", "10%");</script> 注册动画效果。
carousel 接受两个参数用于对切换控件进行定位，第一个参数为相对轮播图左侧距离，第二个参数为相对轮播图顶部距离。
=====================轮播示例=====================
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>滚动轮播图</title>
<style type="text/css">
.carousel {
width: 800px;
height: 378px;
padding: 0px;
margin: 0px auto;
position: relative;
overflow: hidden;
} .carousel-imgs {
width: 500%;
height: 100%;
padding: 0px;
margin: 0px;
list-style: none;
position: absolute;
} .carousel-imgs li {
width: 20%;
height: 100%;
float: left;
} .carousel-imgs a {
text-decoration: none;
} .carousel-imgs img {
width: 100%;
height: 100%;
} .carousel-btns {
width: 100%;
position: absolute;
top: 45%;
} .carousel-btns button {
border: 0px;
outline: none;
padding: 5px;
background: rgba(0, 0, 0, 0.4);
text-align: center;
color: white;
font-size: 34px;
font-family: "microsoft yahei";
} .carousel-btns button:hover {
background: rgba(0, 0, 0, 0.5);
} .carousel-btn-left {
float: left;
} .carousel-btn-right {
float: right;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
function carousel(left, top) {
/* 获取元素对象 */
var $carousel = $(".carousel");
var $imgs = $(".carousel-imgs li");
var $btnL = $(".carousel-btn-left");
var $btnR = $(".carousel-btn-right");
/* 创建导航按钮 */
var $item_group = $("<ul></ul>");
$item_group.attr("class", "carousel-items");
$imgs.each(function() {
$item_group.append("<li></li>");
});
$carousel.append($item_group);
/* 样式初始化 */
$item_group.css({
"padding": "0px",
"margin": "0px",
"list-style": "none",
"width": "100px",
"position": "absolute",
"left": left,
"top": top
});
$item_group.children().css({
"width": "10px",
"height": "10px",
"padding": "0px",
"margin": "5px",
"background": "white",
"opacity": "0.6",
"border-radius": "5px",
"box-shadow": "0 0 5px black",
"cursor": "pointer",
"float": "left"
});
var index = 0; // 初始展示位置
var $items = $(".carousel-items li");
$items.eq(index).css("background", "gray");
/* 按钮点击动作 */
$btnL.click(function() {
imgAnimator(false);
}); $btnR.click(function() {
imgAnimator(true);
}); $items.click(function() {
imgAnimator(true, $items.index($(this)));
});
/* 图像动画 */
function imgAnimator(toNext, select) {
if(select != null) {
index = select;
} else if(toNext == true) {
index = ($imgs.length + index + 1) % $imgs.length;
} else if(toNext == false) {
index = ($imgs.length + index - 1) % $imgs.length;
}
$items.css("background", "white");
$items.eq(index).css("background", "grey");
var position = index * -($imgs.outerWidth());
$imgs.parent().animate({
"left": position + "px"
}, "fast");
}
}
</script> </head> <body style="background-color: #424242; padding-top: 100px;">
<div class="carousel" style="width: 800px;height: 378px;">
<ul class="carousel-imgs">
<li>
<a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/mi5-shenruliaojie.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone-mimax/shenruliaojie.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/note3-shenruliaojie.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/hongmi3s-shenruliaojie.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/hongmi3x-shenruliaojie.jpg" alt="" /></a>
</li>
</ul>
<div class="carousel-btns">
<button type="button" class="carousel-btn-left"><</button>
<button type="button" class="carousel-btn-right">></button>
</div>
</div>
<script>
/* 启用轮播图效果 */
carousel("43%", "71%");
</script>
</body> </html>
滚动轮播示例
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>渐变轮播图</title>
<style type="text/css">
.carousel {
width: 800px;
height: 378px;
padding: 0px;
margin: 0 auto;
position: relative;
} .carousel-imgs {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
list-style: none;
background: white;
} .carousel-imgs li {
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
opacity: 0;
} .carousel-imgs a {
text-decoration: none;
} .carousel-imgs img {
width: 100%;
height: 100%;
} .carousel-btns {
width: 100%;
z-index: 50;
position: absolute;
top: 45%;
} .carousel-btns button {
border: 0px;
outline: none;
padding: 5px;
background: rgba(0, 0, 0, 0.4);
text-align: center;
color: white;
font-size: 34px;
font-family: "microsoft yahei";
} .carousel-btns button:hover {
background: rgba(0, 0, 0, 0.5);
} .carousel-btn-left {
float: left;
} .carousel-btn-right {
float: right;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
function carousel(left, top) {
/* 获取元素对象 */
var $carousel = $(".carousel");
var $imgs = $(".carousel-imgs li");
var $btnL = $(".carousel-btn-left");
var $btnR = $(".carousel-btn-right");
/* 创建导航按钮 */
var $item_group = $("<ul></ul>");
$item_group.attr("class", "carousel-items");
$imgs.each(function() {
$item_group.append("<li></li>");
});
$carousel.append($item_group);
/* 样式初始化 */
$item_group.css({
"padding": "0px",
"margin": "0px",
"list-style": "none",
"width": "100px",
"z-index": "50",
"position": "absolute",
"left": left,
"top": top
});
$item_group.children().css({
"width": "10px",
"height": "10px",
"padding": "0px",
"margin": "5px",
"background": "white",
"opacity": "0.6",
"border-radius": "5px",
"box-shadow": "0 0 5px black",
"cursor": "pointer",
"float": "left"
});
/* 初始展示位置 */
var index = 0;
var $items = $(".carousel-items li");
$items.eq(index).css("background", "gray");
$imgs.eq(index).css("opacity", "1");
$imgs.eq(index).css("z-index", "20");
/* 按钮点击动作 */
$btnL.click(function() {
imgAnimator(false);
}); $btnR.click(function() {
imgAnimator(true);
}); $items.click(function() {
imgAnimator(true, $items.index($(this)));
});
/* 图像动画 */
function imgAnimator(toNext, select) {
if(select != null) {
index = select;
} else if(toNext == true) {
index = ($imgs.length + index + 1) % $imgs.length;
} else if(toNext == false) {
index = ($imgs.length + index - 1) % $imgs.length;
} $items.css("background", "white");
$items.eq(index).css("background", "grey"); $imgs.eq(index).css("z-index", 20);
$imgs.eq(index).animate({
"opacity": "1"
}, "slow", function() {
$imgs.css("z-index", "0");
$imgs.css("opacity", "0");
$imgs.eq(index).css("z-index", 10);
$imgs.eq(index).css("opacity", "1");
});
}
}
</script>
</head> <body style="background-color: #424242; padding-top: 100px;">
<div class="carousel" style="width: 800px;height: 378px;">
<ul class="carousel-imgs">
<li>
<a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/mi5-shenruliaojie.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone-mimax/shenruliaojie.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/note3-shenruliaojie.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/hongmi3s-shenruliaojie.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/hongmi3x-shenruliaojie.jpg" alt="" /></a>
</li>
</ul>
<div class="carousel-btns">
<button type="button" class="carousel-btn-left"><</button>
<button type="button" class="carousel-btn-right">></button>
</div>
</div>
<script>
/* 启用轮播图效果 */
carousel("43%", "71%");
</script>
</body> </html>
渐变轮播示例
Jquery 轮播图简易框架的更多相关文章
- jQuery轮播图（手动点击轮播）
下面来看看最终做的手动点击轮播效果: 一.原理说明 (1)首先是轮播图的架构,我采用了一个最外边的大div包住两个小div,一个小div里面放四张图片,另一个小div里面放四个数字按钮 (2)对最外边 ...
- jQuery轮播图--不使用插件
说明:引入jquery.min.js 将轮播图放入imgs文件夹 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- jQuery轮播图（二）利用构造函数和原型创建对象以实现继承
本文是在我开始学习JavaScript继承时,对原型继承的一些理解和运用.文中所述的继承方式均是使用js特有的原型链方式,实际上有了ES6的类之后,实现继承的就变得十分简单了,所以这种写法现在也不在推 ...
- jQuery轮播图（一）轮播实现并封装
利用面向对象自己动手写了一个封装好的jquery轮播组件,可满足一般需求,不仅使用简单且复用性高. demo:点此预览 代码地址:https://github.com/zsqosos/componen ...
- jquery 轮播图实例
实现效果:1.图片每2秒钟切换1次. 2.当鼠标停留在整个页面上时,图片不进行轮播. 3.当点击右下角的小球时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应的变化. 4.当图片发生轮播切换时 ...
- 《第31天：JQuery - 轮播图》
源码下载地址:链接:https://pan.baidu.com/s/16K9I... 提取码:0ua2 写这篇文章,当做是对自已这一天的一个总结.写轮播图要准备的东西:三张尺寸大小一样的图片.分为三个 ...
- jquery 轮播图
slider.js (function(){ /** parent //父容器 changeTime //每次间隔几秒切换下一条 leaveTime //鼠标从小图上离开过后几秒继续切换 index ...
- 超级简单的jquery轮播图demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 支持触屏的jQuery轮播图插件
移动轮播图我看到两类, 一款是无线天猫的m.tmall.com和携程,实现了无缝轮播. 一款是蘑菇街的,没有实现无缝轮播. 我自己重写一个,类似天猫. 1.页面代码 <!DOCTYPE html ...
随机推荐
- [LeetCode] First Bad Version 第一个坏版本
You are a product manager and currently leading a team to develop a new product. Unfortunately, the ...
- [LeetCode] Number of Islands 岛屿的数量
Given a 2d grid map of '1's (land) and '0's (water), count the number of islands. An island is surro ...
- 【已更新】【原创】Chrome53 最新版惊现无厘头卡死 BUG！
发现问题 今天有客户向我们反馈了一个BUG:一个页面在IE.FireFox.Chrome52中能正常运行,但是在最新版的Chrome53中显示不了??? 习惯性的,我们需要客户提供页面在浏览器中的HT ...
- 设计模式之单例模式——Singleton
设计模式之单例模式--Singleton 设计意图: 保证类仅有一个实例,并且可以供应用程序全局使用.为了保证这一点,就需要这个类自己创建自己的对象,并且对外有 ...
- 【WPF】WPF 布局
1.window 类继承自 ContentControl 所以内部只能有一个元素2.遵循原则: 不应显示的设置元素(控件)尺寸,可以通过设置最大最小尺寸来限制大小 ...
- java 分页功能
1.分页工具类 package com.bw.shop.util; import java.util.List; import com.sun.org.apache.regexp.internal.r ...
- 最全的 JavaScript 知识总结
来源于:http://gcdn.gcpowertools.com.cn/showtopic-28404-1-3.html?utm_source=gold.xitu.io&utm_medium= ...
- jquery Combo Select 下拉框可选可输入插件
Combo Select 是一款友好的 jQuery 下拉框插件,在 PC 浏览器上它能模拟一个简单漂亮的下拉框,在 iPad 等移动设备上又能回退到原生样式.Combo Select 能够对选项进行 ...
- hibernate入门案例
最近准备学ssh,今天学了一下hibernate,用的是hibernate4,现在已经出5了:配置文件很容易写错,写配置文件的时候尽量复制. 需要的jar包如下:(jar包我是直接放在项目工程里面了, ...
- jsp重定向和转发
表单提交到servlet后,servlet进行转发之后浏览器上的url为什么还是servlet的url-pattern,但是页面内容却是跳转之后页面的内容. 研究了半天之后发现这个和转发和重定向有关系 ...