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 ...
随机推荐
- jmeter（五）Sample之JDBC Request
jmeter中取样器(Sampler)是与服务器进行交互的单元.一个取样器通常进行三部分的工作:向服务器发送请求,记录服务器的响应数据和记录相应时间信息 有时候工作中我们需要对数据库发起请求或者对数据 ...
- 熟悉MyEclipse
资源网址:http://www.myeclipsecn.com/learningcenter/ 20151126 [从这里开始]量身打造自己的MyEclipse(多图) 主要讲在MyEclipse里面 ...
- 2016-2017-2 《Java程序设计》课程学生博客和代码托管链接
2016-2017-2 <Java程序设计>课程学生博客和代码托管链接 博客 1552 20155201 李卓雯 20155202 张 旭 20155203 杜可欣 20155204 王 ...
- 地理信息系统 - ArcGIS - 高/低聚类分析工具(High/Low Clustering ---Getis-Ord General G)
前段时间在学习空间统计相关的知识,于是把ArcGIS里Spatial Statistics工具箱里的工具好好研究了一遍,同时也整理了一些笔记上传分享.这一篇先聊一些基础概念,工具介绍篇随后上传. 空间 ...
- 延迟容忍网络(Delay-tolerant networking)
标签: 网络networking存储工作network路由器 2012-03-24 10:01 3702人阅读 评论(0) 收藏 举报 分类: 计算机网络(12) 版权声明:本文为博主原创文章,对文章 ...
- Css-深入学习之单个颜色实现 hover 和 active 时的明暗变化效果
本文是作者从别的网站和文章学习了解的知识,简单做了个笔记,想要学习更多的可以参考这里:[css进阶]伪元素的妙用--单标签之美,奇思妙想 (1.normal)(2.hover)(3.active) / ...
- python对缓存(memcached,redis)的操作
1.Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的 ...
- [C#] 将 List 转 DataTable
/// <summary> /// Convert a List{T} to a DataTable. /// </summary> private DataTable ToD ...
- 负载均衡的几种算法Java实现代码
轮询 package class2.zookeeper.loadbalance; import java.util.ArrayList; import java.util.HashMap; impor ...
- CSS实现正方体旋转
代码如下: <!DOCTYPE html><html lang="en"><head> <meta charset="UT ...