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 ...
随机推荐
- 关于AngularJS（1）
在讲正题之前,先说一下有关angular简介方面的信息: 1. angularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经 ...
- IOS实现自动循环滚动广告--ScrollView的优化和封装
一.问题分析 在许多App中,我们都会见到循环滚动的视图,比如广告,其实想实现这个功能并不难,用ScrollView就可以轻松完成,但是在制作的过程中还存在几个小问题,如果能够正确的处理好这些小问题, ...
- xamarin.forms uwp app部署到手机移动设备进行测试，真机调试（device portal方式部署）
最近学习xamarin.刚好 手上有一个lumia 930.所以试一试把uwp app部署到手机上,并真机调试一把. 目前环境: 1.开发pc电脑是win10,版本1607.加入了insider,所以 ...
- Ubuntu14.04无法在var/www内新建文档
/var/www文件夹的所有者属于www-data用户组. 要想用你自己的帐号在/var/www里面创建文件和文件夹,最好的办法是把自己的帐号纳入到www-data用户组中. 命令:sudo user ...
- 手机GUI自动化测试工具选择
(Graphical User Interface,简称 GUI,又称图形用户接口) 我们需要针对自身产品的需求,从中选取一款合适的工具来实现自动化.对于移动客户端GUI的自动化而言,需要保证选取的工 ...
- Error:Execution failed for task ':app:transformClassesWithDexForDebug'.
使用android studio 时,编译成功但用build apk时却报错 环境: android studio 1.5, jdk1.7 错误:Error:Execution failed for ...
- ABBA BABA statistics
The ABBA BABA statistics are used to detect and quantify an excess of shared derived alleles, which ...
- 贝赛尔曲线UIBezierPath(后续)
使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形 . 1:UIBezierPath: UIBezierPath是在 UIKit 中 ...
- Beta版本冲刺第一天
Aruba 408 409 410 428 429 431 完成任务: 瀑布流方块长按删除提示 实现获取剪贴板内容并保存到数据库 常驻通知栏模块界面实现,设置按钮并预留intent 立会照片: 燃尽图 ...
- 02. Let & Const
Let & Const let 基础用法 很简单就能说明这个问题 if(false) { var a = 'heihei' } a = undefined if(true) { var a = ...