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 ...
随机推荐
- [zz]如何在C语言程序中处理汉字
学习过C语言的人也许有时会遇到这样一个问题:如何用变量存储汉字以及对这些变量进行操作.目前许多C语言参考书中都没涉及到这个问题,程序中多为处理英文变量和英文字符串,涉及到汉字的情况也大都是在print ...
- js 检测页面刷新或关闭
window.onbeforeunload=function(){ //要提交的内容 return "随意写";//必须有return ,不然只有ie有效,chrome无效 }
- Tomcat 7.0的配置
一.安装JDK 1.7 1.添加环境变量:在我的电脑->属性->高级->环境变量 2.新建系统变量,变量名:JAVA_HOME 变量值:C:\Program Fi ...
- Markdown 11种基本语法
markdown真的很方便! 我根据自己在github上维护的项目编写的readme文件总结一些最基本的使用方法 ,学完这些Markdown的基本使用已经不成问题. 1. 标题设置(让字体变大,和wo ...
- ExtJS4随笔（1） -- 在VS中加入Ext4的智能提示
将辅助文件加入到Web工程内即可. 辅助文件
- Java 基础【12】 压缩与解压缩
Java.util.zip 提供用于读写标准 ZIP 和 GZIP 文件格式的类. 还包括使用 DEFLATE 压缩算法(用于 ZIP 和 GZIP 文件格式)对数据进行压缩和解压缩的类. 依赖 Jd ...
- 浅谈对Spring Framework的认识
Spring Framework,作为一个应用框架,官方的介绍如下: The Spring Framework provides a comprehensive programming and con ...
- Linux 下配置php开发环境
windows下有一键安装的环境很方便,不过现实中常常服务器是linux系统.想要搭建环境怎么搞呢? 边学变发直播博客,不定期更新.
- Cocos2d-x 3.X 事件分发机制
介绍 Cocos2d-X 3.X 引入了一种新的响应用户事件的机制. 涉及三个基本的方面: Event listeners 封装你的事件处理代码 Event dispatcher 向 listener ...
- 设置 github 帐号user.name和邮箱user.email
git config --global user.name username git config --global user.email username@email.com