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 ...
随机推荐
- webpack中alias别名配置
resolve:{ alias:{ bootcss:__dirname + '/node_modules/.3.3.7@bootstrap/dist/css/bootstrap.min.css' } ...
- Mysql更换MyISAM存储引擎为Innodb的操作记录
一般情况下,mysql会默认提供多种存储引擎,可以通过下面的查看: 1)查看mysql是否安装了innodb插件.通过下面的命令结果可知,已经安装了innodb插件. mysql> show p ...
- GridView绑定Visible
hyerLinkFiled的显示绑定方式 ,强制类型转换后再绑定! Visible='<%#Convert.ToBoolean(Eval("字段名")) %>'
- bzoj 3163: [Heoi2013]Eden的新背包问题
Description "寄没有地址的信,这样的情绪有种距离,你放着谁的歌曲,是怎样的心心静,能不能说给我听."失忆的Eden总想努力地回忆起过去,然而总是只能清晰地记得那种思念的 ...
- jquery富文本在线编辑器UEditor
UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. UEditor的功能非常强大,官方 ...
- LeetCode-70-Climbing Stairs
You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...
- SQL Server 常用关键字
SQL 建库 建表 --1.创建一个数据库 create database School; --删除数据库 drop database School; --创建数据库的时候指定一些选项. create ...
- Angular指令2
scope Create a new scope for this directive rather than inheriting the parent scope. controller Crea ...
- Mac 下面 apache 不解析PHP（or PHP 版本不对）的解决办法
Mac 升级到 EI Caption 之后发现 apache 的配置被重置了,记录下解决的步骤: 在 apache2 配置文件中修改 PHP 的扩展路径即可: vi /etc/apache2/http ...
- [Think In Java]基础拾遗4 - 并发
第21章节 并发 1. 定义任务 任务:任务就是一个执行线程要执行的一段代码.(在C语言中就是函数指针指向的某个地址开始的一段代码) [记忆误区]:任务不是线程,线程是用来执行任务的.即任务由线程驱动 ...