jsp实现轮播图
背景 支持ie老版本没办法使用比较新的框架,只能使用原始js实现。 演示地址 实现功能如下:
- 鼠标放在图上暂停。
- 点击下面圆点切换图片。
- 点击左右箭头切换。
- 自动进行轮播。
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/context/mytags.jsp" %>
<!DOCTYPE html>
<html>
<head>
<title>商品信息查看</title>
<style>
.ui-button {
display: inline-block;
padding: 2px 2px;
margin-bottom: 0;
font-size: 8px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
body {
overflow: scroll;
}
/* 轮播图样式表 */
#content #carousel_wrap {
position: relative;
margin: 0 auto;
width: 100%; /* 轮播图宽度 */
overflow: hidden;
}
#content #carousel_wrap #carousel_images {
position: absolute;
border: 0;
outline: none;
white-space: nowrap; /* 将图片一行排列 */
width: 100%;
font-size: 0; /* 清除white-space间隙 */
margin: 0px;
}
#content #carousel_wrap #carousel_images img {
width: 100%;
}
#content #carousel_wrap .arrow {
position: absolute;
font-weight: bold;
font-size: 50px;
color: lightgray;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
transition-property: opacity;
transition-duration: 0.5s;
}
#content #carousel_wrap .arrow:hover {
opacity: 0.5;
}
#content #carousel_wrap .left-arrow {
left: 20px;
}
#content #carousel_wrap .right-arrow {
right: 20px;
}
#content #carousel_wrap #dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%)
}
#content #carousel_wrap .dot {
background-color: white;
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin: 4px;
opacity: 0.2;
cursor: pointer;
}
#content #carousel_wrap .active {
opacity: 1;
}
.transition {
transition-property: left;
transition-duration: 1s;
}
/* END 轮播图样式表 */
</style>
/* 这里引入自己jquery就行 */
<t:base type="jquery,easyui,tools,DatePicker"></t:base>
<script type="text/javascript">
$(document).ready(function () {
$('#tt').tabs({
onSelect: function (title) {
$('#tt .panel-body').css('width', 'auto');
}
});
$(".tabs-wrap").css('width', '100%');
});
</script>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Lifeblog.com</title>
<script type="text/javascript" src="js/friends.js"></script>
<link rel="stylesheet" type="text/css" href="css/friends.css"/>
</head>
<body>
<!-- 轮播图 -->
<div id="content">
<div id="carousel_wrap">
<div id="carousel_images">
<!-- 前后分别加上一张图片，方便无缝过渡显示。可以使用JS DOM增加节点操作省去该步骤 -->
<img src=" " width='675' height='380' id="first">
<img src=" " width='675' height='380' id="worst">
</div>
<span class="arrow left-arrow"><</span>
<span class="arrow right-arrow">></span>
<div id="dots">
<!-- 使用小点标记实际多少张图片，要添加图片时需要修改carousel_images和此处 -->
<span class="dot active"></span>
<%--<span class="dot"></span>--%>
<%--<span class="dot"></span>--%>
</div>
</div>
</div>
<!-- END 轮播图 -->
</body>
</html>
<script>
window.onload = function () {
//动态从后台获取图片
var url = 'lpaArticlesController.do?getFiles';
url += '&id=' + '${id}';
$.ajax({
url: url,
type: 'post',
cache: false,
success: function (data) {
var d = $.parseJSON(data);
console.log(d.obj);
if (d.obj.length > 1) {
//增加图片
for (var i = 0; i < d.obj.length; i++) {
$("#carousel_images").append("<img width='675' height='380' src=" + d.obj[i].path + " >");
if (i == 0) {
$("#first").attr("src", d.obj[0].path);
} else {
$("#worst").attr("src", d.obj[d.obj.length - 1].path);
}
}
//增加小圆点
for (var i = 0; i < d.obj.length - 1; i++) {
$("#dots").append("<span class='dot'></span>");
}
} else if (d.obj.length == 1) {
//如果只有一张图片 不需要加圆点
for (var i = 0; i < d.obj.length; i++) {
$("#first").attr("src", "");
$("#worst").attr("src", d.obj[0].path);
$("#carousel_images").append("<img width='675' height='380' src=" + d.obj[i].path + " >");
}
} else {
//没有图片的时候 建议放一张空白图
$("#first").attr("src", "webpage/main/img/noPictures.jpg");
$("#worst").attr("src", "webpage/main/img/noPictures.jpg");
$("#carousel_images").append("<img width='675' height='380' src='webpage/main/img/noPictures.jpg' >");
}
var carouImg = document.getElementById("carousel_images");
var carouWrap = document.getElementById("carousel_wrap");
var img = carouImg.getElementsByTagName("img")[0];
var leftArrow = document.getElementsByClassName("left-arrow")[0];
var rightArrow = document.getElementsByClassName("right-arrow")[0];
var oBtn = document.getElementsByClassName("dot");
var index = 0;
//设置图片下面小点个数
var index_length = d.obj.length;
// var index_length = oBtn.length;
// 给图片添加过渡效果
carouImg.classList.add("transition");
// 动态获取绝对定位轮播图的高度，设置carousel_wrap的高度，宽度为整个main宽度
// 如果mystyle.css中使用overflow:auto->含有滚动条宽度; 故使用overflow:scroll
carouImg.style.left = -img.clientWidth + "px";
carouWrap.style.height = img.offsetHeight + "px";
// 监听body大小变化，修改轮播图的图片位置和高度
document.body.onresize = function () {
carouImg.style.left = -img.clientWidth + "px";
carouWrap.style.height = img.offsetHeight + "px";
}
// 点击右箭头
rightArrow.onclick = function () {
next_pic();
showCurrentDot(index);
}
// 点击左箭头
leftArrow.onclick = function () {
pre_pic();
showCurrentDot(index);
}
// 点击小点
for (let i = 0; i < oBtn.length; ++i) {
oBtn[i].onclick = function () {
var newLeft = (-img.clientWidth) * (i + 1);
carouImg.style.left = newLeft + 'px';
console.log(i);
showCurrentDot(i);
var left = parseInt(carouImg.style.left);
var newLeft;
// 如果没有临界判断，当图片位于“替补图片”时，点击提示点会有错乱过渡
if (left <= (-img.clientWidth) * (index_length + 1)) {
// 临界情况判断
carouImg.classList.remove("transition");
newLeft = -img.clientWidth * 1;
carouImg.style.left = newLeft + 'px';
}
if (left >= -10) {
// 临界情况判断
carouImg.classList.remove("transition");
newLeft = -img.clientWidth * index_length;
carouImg.style.left = newLeft + 'px';
}
newLeft = (-img.clientWidth) * (i + 1);
carouImg.style.left = newLeft + 'px';
// 注意click事件的执行过程，要在修改完left后添加transition类
carouImg.classList.add("transition");
index = i;
showCurrentDot(i);
}
}
// 下一张图片
function next_pic() {
var left = parseInt(carouImg.style.left);
if (left <= (-img.clientWidth) * (index_length + 1)) {
// 临界情况判断
carouImg.classList.remove("transition");
var newLeft = -img.clientWidth * 1;
carouImg.style.left = newLeft + 'px';
newLeft = -img.clientWidth * 2;
carouImg.classList.add("transition");
index = 1;
}
else {
// 一般情况
var newLeft = parseInt(carouImg.style.left) - img.clientWidth;
(index == (index_length - 1)) ? index = 0 : index += 1;
}
carouImg.style.left = newLeft + 'px'; // 不要忘记添加'px'
}
// 上一张图片
function pre_pic() {
var left = parseInt(carouImg.style.left);
if (left >= -10) {
// 临界情况判断
carouImg.classList.remove("transition");
var newLeft = -img.clientWidth * index_length;
carouImg.style.left = newLeft + 'px';
newLeft = -img.clientWidth * (index_length - 1);
carouImg.classList.add("transition");
index = index_length - 2;
}
else {
// 一般情况
var newLeft = parseInt(carouImg.style.left) + img.clientWidth;
(index == 0) ? index = (index_length - 1) : index -= 1;
}
carouImg.style.left = newLeft + 'px';
}
function showCurrentDot(index) {
for (let i = 0; i < oBtn.length; ++i) {
(i == index) ? oBtn[i].classList.add("active") : oBtn[i].classList.remove("active");
}
}
// 设置轮播定时器 3秒
var timer = setInterval(function () {
next_pic();
showCurrentDot(index);
}, 3000);
carouWrap.onmouseover = function () {
clearInterval(timer);
}
carouWrap.onmouseout = function () {
timer = setInterval(function () {
next_pic();
showCurrentDot(index);
}, 3000);
}
}
});
}
</script>
</body>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-01-08，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读