简单易懂的banner图滚动源代码
2024-08-27 03:09:34
banner图左右滚动简单易懂源代码
1
样式展示
css代码：
* {
padding: 0px;
margin: 0px;
}
.banner {
width: 100%;
height: 450px;
font-size:;
overflow: hidden;
position: relative;
}
.banner_img {
width: 100%;
height: 450px;
position: absolute;
left:;
top:;
}
.banner_img li {
width: 100%;
height: 450px;
display: inline-block;
background-position: center;
background-repeat: no-repeat;
float: left;
list-style: none;
}
.banner_list {
height: 50px;
top: 400px;
position: relative;
margin: 0 auto;
z-index:;
}
.banner_list span {
display: block;
cursor: pointer;
width: 14px;
height: 14px;
border-radius: 50%;
border: 3px solid #555;
float: left;
margin: 0 5px;
}
.banner_list .spcss {
border: 3px solid yellowgreen;
}
.banner_left {
position: absolute;
height: 90px;
width: 60px;
top: 50%;
left: -60px;
background-color: rgba(73,72,62, 0.6);
margin-top: -45px;
text-align: center;
transition: all .5s;
z-index:;
}
.banner_left:hover {
background-color: rgba(73,72,62, 0.9);
}
.banner_right {
position: absolute;
height: 90px;
width: 60px;
top: 50%;
right: -60px;
background-color: rgba(73,72,62, 0.6);
margin-top: -45px;
text-align: center;
transition: all .5s;
z-index:;
}
.banner_right:hover {
background-color: rgba(73,72,62, 0.9);
}
.banner_left img {
margin-top: 22px;
}
.banner_right img {
margin-top: 22px;
}
html代码：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>banner1</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="banner">
<ul class="banner_img">
<li><img src="data:images/banner1.jpg" /></li>
<li><img src="data:images/banner2.jpg" /></li>
<li><img src="data:images/banner3.jpg" /></li>
</ul>
<div class="banner_list"></div>
<div class="banner_left"><img src="data:images/left.png" /></div>
<div class="banner_right"><img src="data:images/right.png" /></div>
</div>
</body>
<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</html>
js代码：
$(function() {
var n = 0;
var b = $(".banner_img li").length;
var c = b * 100;
var d = 1 / b * 100;
$(".banner_img").width(c + "%");
$(".banner_img li").width(d + "%");
$(".banner_list").width(b * 30);
//根据里数量 创建焦点个数
if(b > 1) {
for(var i = 0; i < b; i++) {
var listSpan = $("<span></span>")
$(".banner_list").append(listSpan);
}
}
$(".banner_list span:eq(0)").addClass("spcss").siblings("span").removeClass(
"spcss");
/*创建自动滚动动画*/
function rollEnvent() {
if(n == b - 1) {
var ctPosit = (n + 1) * 100;
$(".banner").append($(".banner_img").clone());
$(".banner_img:last").css("left", "100%");
$(".banner_img:first").animate({
"left": "-" + ctPosit + "%"
}, 1000);
$(".banner_img:last").animate({
"left": "0"
}, 1000);
var setTime0 = setTimeout(function() {
$(".banner .banner_img:first").remove();
}, 1000);
n = 0;
$(".banner_list span:eq(0)").addClass("spcss").siblings("span").removeClass(
"spcss");
} else {
n++;
var ctPosit = n * 100;
$(".banner_img").animate({
"left": "-" + ctPosit + "%"
}, 1000);
$(".banner_list span:eq(" + n + ")").addClass("spcss").siblings("span").removeClass(
"spcss");
}
}
var slidesetInterval = setInterval(rollEnvent, 3000);/*设置banner滚动时间*/
//鼠标hover banner图 停止滚动 移开自动开始滚动动画
$(".banner").hover(function() {
clearInterval(slidesetInterval);
}, function() {
slidesetInterval = setInterval(rollEnvent, 3000);
})
/*banner_right 按钮*/
$(".banner_right").click(function() {
if(n == b - 1) {
var ctPosit = (n + 1) * 100;
$(".banner").append($(".banner_img").clone());
$(".banner_img:last").css("left", "100%");
$(".banner_img:first").animate({
"left": "-" + ctPosit + "%"
}, 1000);
$(".banner_img:last").animate({
"left": "0"
}, 1000);
var setTime0 = setTimeout(function() {
$(".banner .banner_img:first").remove();
}, 1000);
n = 0;
$(".banner_list span:eq(0)").addClass("spcss").siblings("span").removeClass(
"spcss");
} else {
n++;
var ctPosit = n * 100;
$(".banner_img").animate({
"left": "-" + ctPosit + "%"
}, 1000);
$(".banner_list span:eq(" + n + ")").addClass("spcss").siblings("span")
.removeClass("spcss");
}
});
/*banner_left按钮*/
$(".banner_left").click(function() {
if(n == 0) {
var stPosit = b * 100;
var etPosit = (b - 1) * 100;
$(".banner").prepend($(".banner_img").clone());
$(".banner_img:first").css("left", "-" + stPosit + "%");
$(".banner_img:last").animate({
"left": "100%"
}, 1000);
$(".banner_img:first").animate({
"left": "-" + etPosit + "%"
}, 1000);
var setTime0 = setTimeout(function() {
$(".banner .banner_img:last").remove();
}, 1000);
n = b - 1;
$(".banner_list span:eq(" + n + ")").addClass("spcss").siblings("span")
.removeClass("spcss");
} else {
n--;
var ctPosit = n * 100;
$(".banner_img").animate({
"left": "-" + ctPosit + "%"
}, 1000);
$(".banner_list span:eq(" + n + ")").addClass("spcss").siblings("span")
.removeClass("spcss");
}
});
/*焦点按钮*/
$(".banner_list span").click(function() {
var indexS = $(this).index();
n = indexS;
var ctPosit = n * 100;
$(".banner_img").animate({
"left": "-" + ctPosit + "%"
}, 1000);
$(this).addClass("spcss").siblings("span").removeClass("spcss");
})
});
/*left right 按钮动画*/
$(".banner").mouseover(function() {
$(".banner_left").css({
"left": "25px"
})
$(".banner_right").css({
"right": "25px"
})
});
$(".banner").mouseleave(function() {
$(".banner_left").css({
"left": "-60px"
})
$(".banner_right").css({
"right": "-60px"
})
});
/*将img标签转换成背景图显示*/
$(function() {
$(".banner_img img").css("display", "none")
$(".banner_img li").each(function(e) {
$(".banner_img li:eq(" + e + ")").css("backgroundImage", "url(" + $(
".banner_img li:eq(" + e + ")").find("img").attr("src") + ")");
});
});
代码完整希望大家自己研究写出自己风格的banner滚动。
最新文章
- 添加系统右键菜单项 管理员取得所有权(W)(带盾牌)
- jquery做表格变色效果-demo
- java 垃圾回收
- Mojette
- webForm中dropDownList的一些用法
- 使用轻量级ORM Dapper进行增删改查
- C#初入串口通信（串行通信）总结
- ubuntu下简单的驱动编译
- poj 1064 (二分+控制精度) && hdu 1551
- Weblogic11g安装
- 好用的QT连接
- TopCoder中插件的用法
- 使用jquery时一些小技巧的总结
- 安装nginx-1.5.2
- shiro（三），使用第三方jdbcRealm连接数据库操作
- 【Tomcat】Tomcat的类加载机制
- pycharm安装numpy和scipy（window）
- 简洁的实现ls-l命令
- 多线程 死锁 wait(int i) notifyAll()
- 使用开源Breeze工具部署Kubernetes 1.12.1高可用集群