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] Island Perimeter 岛屿周长
You are given a map in form of a two-dimensional integer grid where 1 represents land and 0 represen ...
- [LeetCode] Sort Transformed Array 变换数组排序
Given a sorted array of integers nums and integer values a, b and c. Apply a function of the form f( ...
- [LeetCode] Find Median from Data Stream 找出数据流的中位数
Median is the middle value in an ordered integer list. If the size of the list is even, there is no ...
- Redis初识、设计思想与一些学习资源推荐
一.Redis简介 1.什么是Redis Redis 是一个开源的使用ANSI C 语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value 数据库,并提供多种语言的API.从2010 年 ...
- 图解javascript
- jQuery 常用速查
jQuery 速查 基础 $("css 选择器") 选择元素,创建jquery对象 $("html字符串") 创建jquery对象 $(callback) $( ...
- 【C#】调度程序进程已挂起,但消息仍在处理中；
环境:WPF.弹窗,messageBox.show();错误信息:调度程序进程已挂起,但消息仍在处理中:解决方法:Dispatcher.BeginInvoke(new Action(()=>{ ...
- Java的修饰符
转自:http://blog.csdn.net/manyizilin/article/details/51926230#L42 修饰符: 像其他语言一样,Java可以使用修饰符来修饰类中方法和属性.主 ...
- flask-- 基础篇
flask简介: flask是一轻量级的web应用框架,它的实现是一个 wsgi 的微("Micro")框架,当然微("Micro")也不意味这它的功能存在不足 ...
- 【bzoj4518】 Sdoi2016—征途
http://www.lydsy.com/JudgeOnline/problem.php?id=4518 (题目链接) 题意 给出n个连续的整数,求将它们分成m段,求最小方差*m^2. Solutio ...