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 ...
随机推荐
- SQL/LINQ/Lamda 写法[转发]
SQL LINQ Lambda SELECT * FROM HumanResources.Employee from e in Employees select e Employees .Sele ...
- asp.net core 部署 提示DataProtectionServices 错误
今天在部署asp.net core网站时,因为调用到阿里云的api,api的参数需要加密签名,系统报出了如下错误: warn: Microsoft.Extensions.DependencyInjec ...
- 创意十足的web布局及交互设计
富有灵感和创意的设计与一般设计的区别在于,它不那么容易被想到和实现,一旦它被实现,一个非常有趣并且迷人的网站就诞生了. 网站几乎每天都能见到,但是不是每一个网站你都会说“真希望我也能想到过!” 设计者 ...
- 转 android 从底部弹出一个popuwindow，渐入渐出效果。我这里是用在购物车需要选择购买选项的操作。
最近要改客户端,需要实现一个从底部弹出的popuwindow,像我这种渣渣android技术,能整出popuwindow但是整不出动画,百度之,记录一下. 从下面这个地址转的 http://blog. ...
- 浅谈 underscore 内部方法 group 的设计原理
前言 真是天一热什么事都不想干,这个月只产出了一篇文章,赶紧写一篇压压惊! 前文(https://github.com/hanzichi/underscore-analysis/issues/15)说 ...
- docfx daylybuild
参考:https://myget.org/gallery/docfx-dev 根据对应的vs或nuget版本中添加地址. PS:daylybuild可能包含很多错误哦.
- APIPA（Automatic Private IP Addressing，自动专用IP寻址）
APIPA APIPA(Automatic Private IP Addressing,自动专用IP寻址),是一个DHCP故障转移机制.当DHCP服务器出故障时, APIPA在169.254.0.1到 ...
- 动画的使用—View Animation
View Animation定义了下面的四种动画效果: 缩放(scale).位移(translation).旋转(rotation).透明(alpha) 缩放动画: ScaleAnimation( ...
- Activity数据传递
1.在启动界面里通过intent调用方法putExtra添加欲携带数据 2.在被启动界面里通过getIntent方法获取Intent对象 3.通过intent的getXxxExtra方法获取对应的数据
- windows下编译chromium浏览器的15个流程整理
编译chromium 系统为windows, 国内在windows上编译chromium的资料比较少, 我这篇文章只能作为参考, 记录我遇到的一些问题,因为chromium团队也会修改了代码,或者编译 ...