js实现淡入淡出轮播切换功能
话不多说，请看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
/*最小宽度 这样图片就可以自适应居中*/
.warp{
min-width:900px;
width:100%;
height: 600px;
margin:0 auto;
}
#banner{
position: relative;
}
ul{
position: relative;
width:100%;
height:600px;
overflow: hidden;
}
ul li{
display: none;
position: absolute;
top:0;
left: 0;
width: 100%;
height: 600px;
text-align: center;
}
.cur{
position:absolute;
bottom:20px;
text-align: center;
width: 100%;
height: 40px;
line-height: 40px;
}
.cur span{
display: inline-block;
width: 20px;
height: 20px;
background:#000;
}
.cur span.active{
background:blue;
}
.btn{
position: absolute;
top:50%;
width: 50px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top:-50px;
color:#fff;
font-size:18px;
background: rgba(0,0,0,0.9)
}
.btnLeft{
left:0;
}
.btnRight{
right:0;
}
img{
width: 900px;
height: 600px;
}
</style>
</head>
<body>
<div class="warp">
<div class="lunbo" id="banner">
<ul>
<li style="background:red;display: block">全屏渐变 图片自适应居中</li>
<li style="background:green">全屏渐变 图片自适应居中</li>
<li style="background:yellow">全屏渐变 图片自适应居中</li>
</ul>
<!-- 如果两个按钮在图片的外面 只需要把按钮移到外面然后在js里添加按钮移入清除定时器事件 -->
<div class="btn btnLeft"><</div>
<div class="btn btnRight">></div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script>
var num=0;
var btnLeft=$(".btnLeft");
var btnRight=$(".btnRight");
var Id=$("#banner");
var oUl=Id.find("ul");
var oLi=oUl.find("li");
var oLiLen=oLi.length;
var curHtml="<div class='cur'></div>";
Id.append(curHtml);
var oCur=$(".cur");
// 动态添加小圆点
for(var i=0;i<oLiLen;i++){
var curA="<span></span>"
oCur.append(curA);
}
var oCurSpan=oCur.find("span");
var oCurS=oCur.find("span:first");
oCurS.addClass('active')
// 自动轮播
var t=setInterval(function(){
num++;
lunbo();
},3000);
// 移动到轮播清除定时器
Id.hover(function(){
clearInterval(t)
},function(){
t=setInterval(function(){
num++;
lunbo();
},3000);
});
// 左箭头按钮
btnLeft.on("click",function(){
num--;
lunbo();
})
//右箭头按钮
btnRight.on("click",function(){
num++;
lunbo();
})
function lunbo(){
if(num==oLiLen){
num=0;
}
oLi.eq(num).fadeIn().siblings().fadeOut();
oCurSpan.eq(num).addClass('active').siblings().removeClass('active');
}
lunbo();
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
原生JS实现图片轮播切换效果
首先来分析一下轮播图效果的实现原理: 1.父元素作为显示窗口,大小固定超出部分隐藏,即设置overflow:hidden; 2.子元素存放图片列表用ul,ul固定定位,参照为父元素,即父元素position:relative;ul元素position:absolute; 3.一个li即一张图片的宽度为父元素的显示宽度 4.初始时,ul的left为0,这时第一张图片即第一个li显示 5.点击下一张按钮,将整个ul左移,使第二个li对齐父元素的左边框,此时ul的left为负的一个li的宽度 6.点击
-
js图片轮播手动切换特效
先瞄一眼js图片轮播手动切换特效图: 代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> * {padding:0px;margin:0px;} #content {width:400px;height:400px
-
js图片轮播手动切换效果
利用ScrollPicLeft.js这个库实现图片的前后切换,适用于网页中的证书展示.推荐商品之类的栏目.它不像传统的marquee滚动那样,而是可以手动的去点击前后切换箭头按钮,进行图片的翻页,从而达到浏览上一张,下一张的效果. 不需要调用jquery,初始化简单,使用非常的简单,便利. 实例效果: js代码: <script type="text/javascript"> var scrollPhoto = new ScrollPicleft(); scrollPhot
-
JS仿京东移动端手指拨动切换轮播图效果
如今,移动端web页面在市场上也是占有相当大的比例,而移动端的轮播图效果也是很常见的,今天我就来记录下关于实现一组适用于移动端的可用手指进行拨动切换轮播图的效果. 这个效果的主要技术点依托于触屏设备特有的touch事件:好了,接下来就进入主题吧. 首先是html布局: 1. 这里强调的是记得给html加上viewport这个适口属性. 2. 由于在拨动第一张图片以及最后一张图片的时候需要切换到最后一张以及第一张,要想达到理想效果,需要给第一张图片前面加上最后一张图片,而在最后一张图片后加上第一张
-
原生js实现图片层叠轮播切换效果
本文实例介绍了js焦点图片层叠轮播切换滚动效果,分享给大家供大家参考,具体内容如下 效果图: 功能描述: 自定义图片尺寸: 每隔一段时间自动滚动图片: 每次动画执行的时候改变图片的位置,宽高以及其它属性也要跟随着变化: 鼠标移上图片,显示当前图片的详细信息: 点击按钮向前向后滚动: 详细代码: html代码: <!DOCTYPE html> <!-- saved from url=(0062)http://x1.xiuimg.com/style/xiu/woxiu/v1/tpl/topi
-
Bootstrap 最常用的JS插件系列总结（图片轮播、标签切换等）
在Bootstrap下载与安装后,可以在D:\Program Files\nodejs\node_modules\bootstrap\js中找到12个JS文件,这些JS文件是Bootstrap自带的12个jQuery插件,也可以在D:\Program Files\nodejs\node_modules\bootstrap\dist\js中找到bootstrap.js和bootstrap.min.js,这两个文件都包含12个jQuery插件. 在这12个jQuery插件中,最常用的有图片轮播car
-
javascript实现图片自动和可控的轮播切换特效
演示图: 需要引入的文件 复制代码 代码如下: <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/js/1/css/style.css"> <script type="text/javascript" src="http://hovertree.com/texiao/js/1/js/koala.min.1
-
js支持键盘控制的左右切换立体式图片轮播效果代码分享
本文实例讲述了js支持键盘控制的左右切换立体式图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于javascript实现支持键盘控制的左右切换立体式图片轮播效果,特别有立体感,最重要的一点是可以利用键盘进行控制. 特性介绍: 1.轻松的改变幻灯变的宽度. 2.轻易改变下一张展示图片的数量. 3.最后一张图片会循环回到第一张图片里. 4.嵌入了Fancy查看插件,在每张图片上都能查看详细图片信息. 运行效果图:
-
javascript五图轮播切换实用版
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
-
js实现支持手机滑动切换的轮播图片效果实例
本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu