[插件封装] 创建一个banner广告栏,点击切换图片
2018-03-02 00:36
399 查看
使用Bootstarp官方插件创建一个幻灯片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery移入移出幻灯片效果</title>
<!--匹配移动端-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--安装bootstrap-->
<!--第一步必须先引入:jquery.js, bootstarp引入之前必须先引入1.9以上版本的jquery,因为bootstarp是简历在jquery基础上的-->
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<!--生成占位图-->
<script src="../../bs/js/holder.js"></script>
<!--css-->
<link rel="stylesheet" href="../../bs/css/bootstrap.css">
<!--bootstrap.js-->
<script src="../../bs/js/bootstrap.js"></script>
<style>
/*把所有的解释内容全部设置为隐藏*/
.carousel-caption{
display:none;
}
.carousel-caption{
background: #000;
opacity: 0.5;
width:100%;
position: absolute;
left:0;
bottom: 0;
}
</style>
</head>
<body>
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<!-- 幻灯片图片部分 -->
<div class="carousel-inner" >
<div class="item active">
<a href="https://www.baidu.com"><img src="1.jpg" alt="..."></a>
<!--幻灯片的标题内容-->
<div class="carousel-caption">
<h3>幻灯片标题1</h3>
<p>幻灯片的解释内容1</p>
</div>
</div>
<div class="item">
<img src="2.jpg" alt="...">
<!--幻灯片的标题内容-->
<div class="carousel-caption">
<h3>幻灯片标题2</h3>
<p>幻灯片的解释内容2</p>
</div>
</div>
<div class="item">
<img src="3.jpg" alt="...">
<!--幻灯片的标题内容-->
<div class="carousel-caption">
<h3>幻灯片标题3</h3>
<p>幻灯片的解释内容3</p>
</div>
</div>
<div class="item">
<img src="4.jpg" alt="...">
<!--幻灯片的标题内容-->
<div class="carousel-caption">
1a70c
<h3>幻灯片标题4</h3>
<p>幻灯片的解释内容4</p>
</div>
</div>
<div class="item">
<img src="5.jpg" alt="...">
<!--幻灯片的标题内容-->
<div class="carousel-caption">
<h3>幻灯片标题5</h3>
<p>幻灯片的解释内容5</p>
</div>
</div>
</div>
<!-- 指示灯按钮 -->
<!--<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class="active"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
<li data-target="#mycarousel" data-slide-to="3"></li>
<li data-target="#mycarousel" data-slide-to="4"></li>
</ol>-->
<!-- 左右按钮 -->
<a class="left carousel-control" href="#mycarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#mycarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script>
//图片一旦hover,就去找到他里边的一个类名为carousel-caption的元素,为他设置显示状态
$(".item").hover(
function(){
$(this).find(".carousel-caption").slideDown();
},
function(){
$(this).find(".carousel-caption").slideUp();
}
);
</script>
</body>
</html>使用Jquery自定义实现广告栏效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>banner广告栏效果</title>
<!--百度在线压缩地址-->
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.slider.js"></script>
<style>
*{
margin:0;
padding:0;
}
#shang{
width: 100%;
height: 500px;
background:red;
text-align: center;
}
/*这里是外层的包裹,主要作用限制img的显示范围*/
#shang #imgdiv{
width: 1920px;
height:500px;
position:absolute;
left:50%;
overflow: hidden;
margin-left:-960px;
}
/*这里是内层包裹.主要作用承载img图片,使得img排成一列,并根据点击做出特效*/
#shang #imgdiv #aa{
width: 9600px;
/*background: blue;*/
}
#aa img{
float: left;
}
#xia{
width:300px;
height: 40px;
margin:0 auto;
position: absolute;
top: 440px;
left:50%;
margin-left: -150px;
z-index:1;
}
#xia li{
width: 52px;
height: 40px;
margin:0;
padding:0;
float: left;
list-style:none;
}
#xia li p{
width:13px;
height:13px;
border: 2px solid black;
border-radius:20px;
/*background: blue;*/
position: relative;
top: 10px;
transition:border 0.5s,height 0.5s,width 0.5s;
}
#xia li p:hover{
border:2px solid yellow;
width:15px;
height: 15px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="shang">
<div id="xia">
<ul>
<li><p style="border: 2px solid yellow;"></p></li>
<li><p></p></li>
<li><p></p></li>
<li><p></p></li>
<li><p></p></li>
</ul>
</div>
<div id="imgdiv">
<div id="aa">
<img src="1.jpg" alt="">
<img src="2.jpg" alt="">
<img src="3.jpg" alt="">
<img src="4.jpg" alt="">
<img src="5.jpg" alt="">
</div>
</div>
</div>
</div>
</body>
<script>
// 给li按钮添加点击事件
$(" #xia li").click(function(){
//当li元素点击的时候,把li按钮的索引拿到
val = $(this).index();
i = val; //当li点击的时候,就把全局变量计数器变为点击的元素的索引
//给img图片的外包裹添加一个自定义动画,每点击一次就让他的margin-left值变化 索引值 * 1920,在一秒内完成
$("#aa").animate({
"margin-left":val*-1920+"px"
},500);
$(" #xia li p").eq(val).css({"border":"2px solid yellow"})
$(" #xia li p").not($(" #xia li p").eq(val)).css({"border":"2px solid black"})
});
//定时器,2秒执行一次
setInterval(sss,2000);
//全局变量,用于表示当前出现的图片的索引
i = 0;
function sss(){
$("#aa").animate({
"margin-left":i*-1920+"px"
},500);
panduan();
$(" #xia li p").eq(i-1).css({"border":"2px solid yellow"})
$(" #xia li p").not($(" #xia li p").eq(i-1)).css({"border":"2px solid black"})
}
function panduan(){
i++;
if(i >= 5){
i = 0;
}
}
</script>
</html>使用JS用根据索引定时渐隐的方式显示和隐藏重叠的图片,可以添加任何数量的图片来进行滚动,不用考虑图片前后位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐隐式幻灯片</title>
<!--引入:jquery.js -->
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
.cantainer{
width:1400px;
height: 350px;
/*background:red;*/
margin: 0 auto;
}
.window{
width:100%;
height: 100%;
/*overflow: hidden;*/
position: relative;
}
.window img{
width:100%;
height: 100%;
display: none;
position: absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div class="cantainer">
<h1>渐隐式幻灯片</h1>
<div class="window">
<img src="1.jpg" alt="">
<img src="2.jpg" alt="">
</div>
</div>
</body>
<script>
/* 使用变量计数的方式做到变换,这样写是根据索引来变换,只要有两张以上的都可以进行变换,不需要调换位置*/
i = 0;
$("img").eq(i).show();
setInterval(function(){
// i变量为索引的那张图隐藏
$("img").eq(i).fadeOut(1000); //隐藏
//括号里是判断变量i是否等于最后一张图片的索引,如果等于,就把变量设置为0,然后显示变量为0的那张图,否则就显示i变量的下一张
if(i == ($("img").length-1)){
i = 0;
$("img").eq(i).fadeIn(1000); //显示
}else{
$("img").eq(i+1).fadeIn(1000); //显示
i++;
}
},2000)
</script>
</html>使用Jquery中的函数,PrePendTo 把显示接收后的元素调换位置到所有图片末尾,等待新一轮显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery追加完成渐隐式幻灯片</title>
<!--引入:jquery.js -->
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
.cantainer{
width:1400px;
height: 350px;
/*background:red;*/
margin: 0 auto;
}
.window{
width:100%;
height: 100%;
overflow: hidden;
position: relative;
}
.window img{
width:100%;
height: 100%;
position: absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div class="cantainer">
<h1>渐隐式幻灯片</h1>
<div class="window">
<!--倒置目的是为了使1图片先显示出来-->
<img src="5.jpg" alt="">
<img src="4.jpg" alt="">
<img src="3.jpg" alt="">
<img src="2.jpg" alt="">
<img src="1.jpg" alt="">
</div>
</div>
</body>
<script>
/* 使用jqeury追加函数来完成幻灯片,原理是所有的图片原版都是显示出来的,最上边的哪一个指定时间内隐藏,因为隐藏后这个元素的display属性会变为none,所以为了让他下一次仍然显示,隐藏完之后会调用一个函数,使得当前元素调换位置到window内所有元素的最前面*/
setInterval(function(){
imgs = $(".window img")
imgs.eq($("img").size()-1).fadeOut(function(){
//这里运用了Jquery中的函数,即把当前元素追加到window内部第一个
$(this).show().prependTo(".window");
});
},1000)
</script>
</html>自定义可以链接最前面一个的幻灯片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动的幻灯片首位衔接</title>
<!--百度在线压缩地址-->
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.slider.js"></script>
<style>
*{
margin:0;
padding:0;
}
#shang{
width: 100%;
height: 500px;
/*background:red;*/
text-align: center;
}
/*这里是外层的包裹,主要作用限制img的显示范围*/
#shang #imgdiv{
width: 1920px;
height:500px;
position:absolute;
left:50%;
/*overflow: hidden;*/
margin-left:-960px;
}
/*这里是内层包裹.主要作用承载img图片,使得img排成一列,并根据点击做出特效*/
#shang #imgdiv #aa{
width: 15000px;
/*background: blue;*/
}
#aa img{
float: left;
}
#xia{
width:300px;
height: 40px;
margin:0 auto;
position: absolute;
top: 440px;
left:50%;
margin-left: -150px;
z-index:1;
}
#xia li{
width: 52px;
height: 40px;
margin:0;
padding:0;
float: left;
list-style:none;
}
#xia li p{
width:13px;
height:13px;
border: 2px solid black;
border-radius:20px;
/*background: blue;*/
position: relative;
top: 10px;
transition:border 0.5s,height 0.5s,width 0.5s;
}
#xia li p:hover{
border:2px solid yellow;
width:15px;
height: 15px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="shang">
<div id="xia">
<ul>
<li><p style="border: 2px solid yellow;"></p></li>
<li><p></p></li>
<li><p></p></li>
<li><p></p></li>
<li><p></p></li>
</ul>
</div>
<div id="imgdiv">
<div id="aa">
<img src="1.jpg" alt="">
<img src="2.jpg" alt="">
<img src="3.jpg" alt="">
<img src="4.jpg" alt="">
<img src="5.jpg" alt="">
<img src="1.jpg" alt="">
</div>
</div>
</div>
</div>
</body>
<script>
// 给li按钮添加点击事件
$(" #xia li").click(function(){
//当li元素点击的时候,把li按钮的索引拿到
val = $(this).index();
i = val; //当li点击的时候,就把全局变量计数器变为点击的元素的索引
//给img图片的外包裹添加一个自定义动画,每点击一次就让他的margin-left值变化 索引值 * 1920,在一秒内完成
$("#aa").animate({
"margin-left":val*-1920+"px"
},500);
$(" #xia li p").eq(val).css({"border":"2px solid yellow"})
$(" #xia li p").not($(" #xia li p").eq(val)).css({"border":"2px solid black"})
});
//定时器,2秒执行一次
kai = setInterval(sss,2000);
//全局变量,用于表示当前出现的图片的索引
i = 0;
function sss(){
//执行动画500秒内把元素的margin
$("#aa").animate({
"margin-left":i*-1920+"px"
},500);
panduan();
$(" #xia li p").eq(i-1).css({"border":"2px solid yellow"})
$(" #xia li p").not($(" #xia li p").eq(i-1)).css({"border":"2px solid black"})
}
function panduan(){
if(i >= $("img").size()-1){ //当 i 大于等于最后一个索引的时候
as();
}else{
i++;
}
}
function as(){
//执行到这里的时候黄色圆圈已经回到第一个了,这是在瞬间完成的
$(" #xia li p").eq(i-1).css({"border":"2px solid yellow"})
//执行到这里的时候把图片整个外部包裹的margin-left设置为0,使其可以在下一个定时器运行的时候直接转到第二个,这里不能用CSS直接设置,因为CSS会卡掉中间的动画
$("#aa").animate({
"margin-left":0+"px"
},1);
//这里的i变为1是为下一次出现第二张图片做准备,由于最后一张和第一张一样,在最后的时候已经展示过了,所以不再次做展示
i = 1; //判断变为1
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用IOS做一个界面切换的效果(登录界面和注册界面和找回密码界面的切换)(用封装好的lable和textf创建界面)
- 一个简单的图片切换 jQuery 插件
- 封装一个简单的banner轮播插件
- 封装一个简单的banner轮播插件
- 在imageView依次添加7个手势, 1.点击哪个按钮,往imageView上添加哪个手势.(保证视图上只有一个手势). 2.轻拍:点击视图切换美女图片.(imageView上首先展示的美女
- 广告banner：手动滑动切换，自动切换，点击跳转，异步加载网络图片
- 广告banner：手动滑动切换，自动切换，点击跳转，异步加载网络图片
- 一个实用的图片切换支持点击切换和自动轮播
- jQuery 一个图片切换的插件
- UGallery是Dreamweaver的一个图片网站创建插件
- 在imageView依次加入7个手势, 1.点击哪个button,往imageView上加入哪个手势.(保证视图上仅仅有一个手势). 2.轻拍:点击视图切换美女图片.(imageView上首先展示的美女
- 点击一个Text切换旁边的图片
- 基于jquery创建的一个图片、视频缓冲的效果样式插件
- 一个实用的图片切换支持点击切换和自动轮播
- ios：点击一个button不断切换背景图片
- 基于jquery创建的一个图片、视频缓冲的效果样式插件
- jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
- 通过js写的一个比较简单的点击切换图片效果
- jquery创建一个图片、视频缓冲的效果样式插件