JQuery实现图片轮播效果源码
======================整体结构========================
<div class="banner">
<ul class="banner-imgs">
<li class="banner-img">
<a href="#"><img src="#" alt="" /></a>
</li>
<li class="banner-img">
<a href="#"><img src="#" alt="" /></a>
</li>
<li class="banner-img">
<a href="#"><img src="#" alt="" /></a>
</li>
<li class="banner-img">
<a href="#"><img src="#" alt="" /></a>
</li>
<li class="banner-img">
<a href="#"><img src="#" alt="" /></a>
</li>
</ul>
<div class="banner-btns">
<button class="banner-btn-left"><</button>
<button class="banner-btn-right">></button>
</div>
<ul class="banner-items">
<li class="banner-item"></li>
<li class="banner-item"></li>
<li class="banner-item"></li>
<li class="banner-item"></li>
<li class="banner-item"></li>
</ul>
</div>
======================滚动轮播========================
<style type="text/css">
body {
background: #424242;
} * {
padding: 0px;
border: 0px;
margin: 0px;
outline: none;
list-style: none;
text-decoration: none;
} .banner {
/*此处调整尺寸*/
width: 800px;
height: 378px;
margin: 100px auto;
position: relative;
overflow: hidden;
} .banner .banner-imgs {
width: 500%;
height: 100%;
position: absolute;
} .banner .banner-imgs .banner-img {
width: 20%;
height: 100%;
float: left;
} .banner .banner-imgs .banner-img img {
width: 100%;
height: 100%;
} .banner .banner-btns {
width: 100%;
position: absolute;
top: 45%;
} .banner .banner-btns button {
padding: 5px;
background: rgba(0, 0, 0, 0.4);
text-align: center;
color: white;
font-size: 34px;
font-family: "微软雅黑";
} .banner .banner-btns button:hover {
background: rgba(0, 0, 0, 0.5);
} .banner .banner-btns .banner-btn-left {
float: left;
} .banner .banner-btns .banner-btn-right {
float: right;
} .banner .banner-items {
width: 100px;
position: absolute;
/*设置按钮位置*/
top: 10%;
right: 5%;
} .banner .banner-items .banner-item {
width: 10px;
height: 10px;
margin: 5px;
background: white;
opacity: 0.6;
border-radius: 5px;
box-shadow: 0 0 5px black;
cursor: pointer;
float: left;
}
</style>
滚动连播样式
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $banner = $(".banner .banner-imgs");
var $imgs = $(".banner .banner-imgs .banner-img");
var $btnL = $(".banner .banner-btns .banner-btn-left");
var $btnR = $(".banner .banner-btns .banner-btn-right");
var $items = $(".banner .banner-items .banner-item");
var index = 0; $items.eq(0).css("opacity", "1"); $btnL.click(function() {
imgAnimator(false);
}); $btnR.click(function() {
imgAnimator(true);
}); $items.click(function() {
imgAnimator(true, $items.index($(this)));
}); function imgAnimator(toNext, select) {
var temp = 0;
if(select != null) {
temp = select;
} else if(toNext == true) {
temp = ($imgs.length + index + 1) % $imgs.length;
} else {
temp = ($imgs.length + index - 1) % $imgs.length;
}
var position = temp * -($banner.outerWidth() / 5);
$banner.stop();
$banner.animate({
"left": position + "px"
}, "fast", function() {
index = temp;
$items.css("opacity", "0.5");
$items.eq(index).css("opacity", "1");
});
} });
滚动连播效果
<!doctype html>
<html> <head>
<meta charset="utf-8">
<title>滚动轮播</title>
<style type="text/css">
body {
background: #424242;
} * {
padding: 0px;
border: 0px;
margin: 0px;
outline: none;
list-style: none;
text-decoration: none;
} .banner {
/*此处调整尺寸*/
width: 800px;
height: 378px;
margin: 100px auto;
position: relative;
overflow: hidden;
} .banner .banner-imgs {
width: 500%;
height: 100%;
position: absolute;
} .banner .banner-imgs .banner-img {
width: 20%;
height: 100%;
float: left;
} .banner .banner-imgs .banner-img img {
width: 100%;
height: 100%;
} .banner .banner-btns {
width: 100%;
position: absolute;
top: 45%;
} .banner .banner-btns button {
padding: 5px;
background: rgba(0, 0, 0, 0.4);
text-align: center;
color: white;
font-size: 34px;
font-family: "微软雅黑";
} .banner .banner-btns button:hover {
background: rgba(0, 0, 0, 0.5);
} .banner .banner-btns .banner-btn-left {
float: left;
} .banner .banner-btns .banner-btn-right {
float: right;
} .banner .banner-items {
width: 100px;
position: absolute;
/*设置按钮位置*/
top: 10%;
right: 5%;
} .banner .banner-items .banner-item {
width: 10px;
height: 10px;
margin: 5px;
background: white;
opacity: 0.6;
border-radius: 5px;
box-shadow: 0 0 5px black;
cursor: pointer;
float: left;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $banner = $(".banner .banner-imgs");
var $imgs = $(".banner .banner-imgs .banner-img");
var $btnL = $(".banner .banner-btns .banner-btn-left");
var $btnR = $(".banner .banner-btns .banner-btn-right");
var $items = $(".banner .banner-items .banner-item");
var index = 0; $items.eq(0).css("opacity", "1"); $btnL.click(function() {
imgAnimator(false);
}); $btnR.click(function() {
imgAnimator(true);
}); $items.click(function() {
imgAnimator(true, $items.index($(this)));
}); function imgAnimator(toNext, select) {
var temp = 0;
if(select != null) {
temp = select;
} else if(toNext == true) {
temp = ($imgs.length + index + 1) % $imgs.length;
} else {
temp = ($imgs.length + index - 1) % $imgs.length;
}
var position = temp * -($banner.outerWidth() / 5);
$banner.stop();
$banner.animate({
"left": position + "px"
}, "fast", function() {
index = temp;
$items.css("opacity", "0.5");
$items.eq(index).css("opacity", "1");
});
} });
</script>
</head> <body>
<div class="banner">
<ul class="banner-imgs">
<li class="banner-img">
<a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/mi5-shenruliaojie.jpg" alt="" /></a>
</li>
<li class="banner-img">
<a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone-mimax/shenruliaojie.jpg" alt="" /></a>
</li>
<li class="banner-img">
<a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/note3-shenruliaojie.jpg" alt="" /></a>
</li>
<li class="banner-img">
<a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/hongmi3s-shenruliaojie.jpg" alt="" /></a>
</li>
<li class="banner-img">
<a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/hongmi3x-shenruliaojie.jpg" alt="" /></a>
</li>
</ul>
<div class="banner-btns">
<button class="banner-btn-left"><</button>
<button class="banner-btn-right">></button>
</div>
<ul class="banner-items">
<li class="banner-item"></li>
<li class="banner-item"></li>
<li class="banner-item"></li>
<li class="banner-item"></li>
<li class="banner-item"></li>
</ul>
</div>
</body> </html>
滚动连播完整代码
======================渐变轮播========================
<style type="text/css">
body {
background: #424242;
} * {
padding: 0px;
border: 0px;
margin: 0px;
outline: none;
list-style: none;
text-decoration: none;
} .banner {
/*此处调整尺寸*/
width: 800px;
height: 378px;
margin: 100px auto;
position: relative;
/*overflow: hidden;*/
} .banner .banner-imgs {
width: 100%;
height: 100%;
background: white;
} .banner .banner-imgs .banner-img {
width: 100%;
height: 100%;
position: absolute;
display: none;
z-index:;
opacity:;
} .banner .banner-imgs .banner-img img {
width: 100%;
height: 100%;
} .banner .banner-btns {
width: 100%;
z-index:;
position: absolute;
top: 45%;
} .banner .banner-btns button {
padding: 5px;
background: rgba(0, 0, 0, 0.4);
text-align: center;
color: white;
font-size: 34px;
font-family: "微软雅黑";
} .banner .banner-btns button:hover {
background: rgba(0, 0, 0, 0.5);
} .banner .banner-btns .banner-btn-left {
float: left;
} .banner .banner-btns .banner-btn-right {
float: right;
} .banner .banner-items {
width: 100px;
z-index:;
position: absolute;
/*设置按钮位置*/
top: 10%;
right: 5%;
} .banner .banner-items .banner-item {
width: 10px;
height: 10px;
margin: 5px;
background: white;
opacity: 0.6;
border-radius: 5px;
box-shadow: 0 0 5px black;
cursor: pointer;
float: left;
}
</style>
渐变连播样式
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $banner = $(".banner .banner-imgs");
var $imgs = $(".banner .banner-imgs .banner-img");
var $btnL = $(".banner .banner-btns .banner-btn-left");
var $btnR = $(".banner .banner-btns .banner-btn-right");
var $items = $(".banner .banner-items .banner-item");
var lastIndex = 0;
var showIndex = 0; $imgs.eq(0).css("opacity", "1");
$imgs.eq(0).css("z-index", "20");
$imgs.eq(0).css("display", "block");
$items.eq(0).css("opacity", "1"); $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) {
showIndex = select;
} else if(toNext == true) {
showIndex = ($imgs.length + lastIndex + 1) % $imgs.length;
} else {
showIndex = ($imgs.length + lastIndex - 1) % $imgs.length;
} $items.css("opacity", "0.5");
$items.eq(showIndex).css("opacity", "1"); var $hideImg = $imgs.eq(lastIndex);
var $showImg = $imgs.eq(showIndex);
$showImg.css("display", "block");
$hideImg.css("z-index", 10);
$showImg.css("z-index", 20);
$showImg.animate({
"opacity": "1"
}, "slow", function() {
$hideImg.css({
"z-index": "0",
"display": "none",
"opacity": "0"
});
})
lastIndex = showIndex;
}
});
</script>
渐变轮播效果
<!doctype html>
<html> <head>
<meta charset="utf-8">
<title>渐变轮播</title>
<style type="text/css">
body {
background: #424242;
} * {
padding: 0px;
border: 0px;
margin: 0px;
outline: none;
list-style: none;
text-decoration: none;
} .banner {
/*此处调整尺寸*/
width: 800px;
height: 378px;
margin: 100px auto;
position: relative;
/*overflow: hidden;*/
} .banner .banner-imgs {
width: 100%;
height: 100%;
background: white;
} .banner .banner-imgs .banner-img {
width: 100%;
height: 100%;
position: absolute;
display: none;
z-index: 0;
opacity: 0;
} .banner .banner-imgs .banner-img img {
width: 100%;
height: 100%;
} .banner .banner-btns {
width: 100%;
z-index: 50;
position: absolute;
top: 45%;
} .banner .banner-btns button {
padding: 5px;
background: rgba(0, 0, 0, 0.4);
text-align: center;
color: white;
font-size: 34px;
font-family: "微软雅黑";
} .banner .banner-btns button:hover {
background: rgba(0, 0, 0, 0.5);
} .banner .banner-btns .banner-btn-left {
float: left;
} .banner .banner-btns .banner-btn-right {
float: right;
} .banner .banner-items {
width: 100px;
z-index: 50;
position: absolute;
/*设置按钮位置*/
top: 10%;
right: 5%;
} .banner .banner-items .banner-item {
width: 10px;
height: 10px;
margin: 5px;
background: white;
opacity: 0.6;
border-radius: 5px;
box-shadow: 0 0 5px black;
cursor: pointer;
float: left;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $banner = $(".banner .banner-imgs");
var $imgs = $(".banner .banner-imgs .banner-img");
var $btnL = $(".banner .banner-btns .banner-btn-left");
var $btnR = $(".banner .banner-btns .banner-btn-right");
var $items = $(".banner .banner-items .banner-item");
var lastIndex = 0;
var showIndex = 0; $imgs.eq(0).css("opacity", "1");
$imgs.eq(0).css("z-index", "20");
$imgs.eq(0).css("display", "block");
$items.eq(0).css("opacity", "1"); $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) {
showIndex = select;
} else if(toNext == true) {
showIndex = ($imgs.length + lastIndex + 1) % $imgs.length;
} else {
showIndex = ($imgs.length + lastIndex - 1) % $imgs.length;
} $items.css("opacity", "0.5");
$items.eq(showIndex).css("opacity", "1"); var $hideImg = $imgs.eq(lastIndex);
var $showImg = $imgs.eq(showIndex);
$showImg.css("display", "block");
$hideImg.css("z-index", 10);
$showImg.css("z-index", 20);
$showImg.animate({
"opacity": "1"
}, "slow", function() {
$hideImg.css({
"z-index": "0",
"display": "none",
"opacity": "0"
});
})
lastIndex = showIndex;
}
});
</script>
</head> <body>
<div class="banner">
<ul class="banner-imgs">
<li class="banner-img">
<a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/mi5-shenruliaojie.jpg" alt="" /></a>
</li>
<li class="banner-img">
<a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone-mimax/shenruliaojie.jpg" alt="" /></a>
</li>
<li class="banner-img">
<a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/note3-shenruliaojie.jpg" alt="" /></a>
</li>
<li class="banner-img">
<a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/hongmi3s-shenruliaojie.jpg" alt="" /></a>
</li>
<li class="banner-img">
<a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/hongmi3x-shenruliaojie.jpg" alt="" /></a>
</li>
</ul>
<div class="banner-btns">
<button class="banner-btn-left"><</button>
<button class="banner-btn-right">></button>
</div>
<ul class="banner-items">
<li class="banner-item"></li>
<li class="banner-item"></li>
<li class="banner-item"></li>
<li class="banner-item"></li>
<li class="banner-item"></li>
</ul>
</div>
</body> </html>
渐变轮播完整代码
JQuery实现图片轮播效果源码的更多相关文章
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- [转]jQuery实现图片轮播效果，jQuery实现焦点新闻
本文转自:http://blog.csdn.net/tsyj810883979/article/details/8986157 效果图: 实现代码: <!DOCTYPE html> < ...
- 使用JQuery实现图片轮播效果
[效果如图] [原理简述] 这里大概说一下整个流程: 1,将除了第一张以外的图片全部隐藏, 2,获取第一张图片的alt信息显示在信息栏,并添加点击事件 3,为4个按钮添加点击侦听,点击相应的按钮,用f ...
- （转）jquery实现图片轮播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- JQ 实现轮播图（3D旋转图片轮播效果）
轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- CSS3图片轮播效果
原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...
- 用jquery实现图片轮播
用jquery简单实现图片轮播效果,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta ...
随机推荐
- IntelliJ IDEA设置JVM运行参数
2015十一月 28 原 IntelliJ IDEA设置JVM运行参数 分类:JavaSE (11566) (1) 打开 IDEA 安装目录,看到有一个 bin 目录,其中有两个 vmoptions ...
- POJO和VO的区别
网上说 POJO对应DAO层中的数据库,POJO重的成员变量对于表中的每个字段. VO 为POJO的分装,与视图层交互.
- 某CRM项目招投标工作的感悟
最近参与了某公司的CRM项目招标工作, 由于此项目涉及到的二级单位比较多,以及项目金额比较大,所以此招标工作从准备到宣布中标一直持续了大概3个月时间,中间过程发生了一些颇有意思的事情,因为保密的原因无 ...
- 二维RMQ
求二维ST表 ;k<=;k++) ;l<=;l++) ;i<=n;i++) ;j<=m;j++){ <<(l-)),m+),tx=min(n+,i+(<< ...
- 【CF 710F】String Set Queries
在校内OJ上A了,没有加强制在线的东西..不放链接了. 这道题题意是维护一个字符串集合,支持三种操作: 1.加字符串 2.删字符串 3.查询集合中的所有字符串在给出的模板串中出现的次数 操作数\(m ...
- Java的多线程机制系列：(一)总述及基础概念
前言 这一系列多线程的文章,一方面是个人对Java现有的多线程机制的学习和记录,另一方面是希望能给不熟悉Java多线程机制.或有一定基础但理解还不够深的读者一个比较全面的介绍,旨在使读者对Java的多 ...
- Ubuntu操作系统相关
1.安装 三种网络类型 修改密码 重启unbuntu系统,出现starting启动界面后,长按shift键. 出现如下引导界面: (注意:这里保持默认的选项就行,即白色横条选择在*Ubuntu上,不要 ...
- 转 PresentViewController切换界面
视图切换,没有NavigationController的情况下,一般会使用presentViewController来切换视图并携带切换时的动画, 其中切换方法如下: – presentViewCon ...
- MlLib--逻辑回归笔记
批量梯度下降的逻辑回归可以参考这篇文章:http://blog.csdn.net/pakko/article/details/37878837 看了一些Scala语法后,打算看看MlLib的机器学习算 ...
- 用File判断D盘下面是否还有txt文件
package cn.idcast; import java.io.File; public class File1 { public static void main(String[] args) ...