jQuery轮播图7张图 带切换按钮 带预览小图 小图只显示前后五张 通过URL访问指定图片
时间: 2024-06-10 11:10:44 浏览: 175
以下是一个基于jQuery实现的轮播图,包括7张图片、切换按钮和预览小图,小图只显示前后五张。同时,可以通过URL访问指定图片。
HTML代码:
```
<div class="slider">
<div class="slider-main">
<ul class="slider-list">
<li><img src="image1.jpg" alt="Image 1"></li>
<li><img src="image2.jpg" alt="Image 2"></li>
<li><img src="image3.jpg" alt="Image 3"></li>
<li><img src="image4.jpg" alt="Image 4"></li>
<li><img src="image5.jpg" alt="Image 5"></li>
<li><img src="image6.jpg" alt="Image 6"></li>
<li><img src="image7.jpg" alt="Image 7"></li>
</ul>
</div>
<div class="slider-prev"><i class="fa fa-angle-left"></i></div>
<div class="slider-next"><i class="fa fa-angle-right"></i></div>
<div class="slider-preview">
<div class="preview-list">
<ul>
<li><a href="?img=1"><img src="image1.jpg" alt="Image 1"></a></li>
<li><a href="?img=2"><img src="image2.jpg" alt="Image 2"></a></li>
<li><a href="?img=3"><img src="image3.jpg" alt="Image 3"></a></li>
<li><a href="?img=4"><img src="image4.jpg" alt="Image 4"></a></li>
<li><a href="?img=5"><img src="image5.jpg" alt="Image 5"></a></li>
<li><a href="?img=6"><img src="image6.jpg" alt="Image 6"></a></li>
<li><a href="?img=7"><img src="image7.jpg" alt="Image 7"></a></li>
</ul>
</div>
<div class="preview-prev"><i class="fa fa-angle-left"></i></div>
<div class="preview-next"><i class="fa fa-angle-right"></i></div>
</div>
</div>
```
CSS代码:
```
.slider {
position: relative;
overflow: hidden;
width: 800px;
height: 500px;
}
.slider-main {
position: absolute;
top: 0;
left: 0;
width: 700%;
height: 100%;
}
.slider-list {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.slider-list li {
position: relative;
float: left;
width: 14.2857%;
height: 100%;
}
.slider-list li img {
display: block;
width: 100%;
height: 100%;
}
.slider-prev,
.slider-next {
position: absolute;
top: 50%;
z-index: 1;
width: 50px;
height: 50px;
margin-top: -25px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.slider-prev {
left: 0;
}
.slider-next {
right: 0;
}
.slider-preview {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background-color: rgba(0, 0, 0, 0.5);
}
.preview-list {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.preview-list ul {
position: absolute;
top: 0;
left: 0;
width: 700%;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
transition: transform 0.5s ease;
}
.preview-list li {
position: relative;
float: left;
width: 14.2857%;
height: 100%;
}
.preview-list li a {
display: block;
width: 100%;
height: 100%;
}
.preview-list li img {
display: block;
width: 100%;
height: 100%;
opacity: 0.5;
transition: opacity 0.5s ease;
}
.preview-list li.active img {
opacity: 1;
}
.preview-prev,
.preview-next {
position: absolute;
top: 50%;
z-index: 1;
width: 50px;
height: 50px;
margin-top: -25px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.preview-prev {
left: 0;
}
.preview-next {
right: 0;
}
```
JavaScript代码:
```
$(function() {
var $slider = $('.slider'),
$sliderMain = $('.slider-main'),
$sliderList = $('.slider-list'),
$sliderItem = $('.slider-list li'),
$sliderPrev = $('.slider-prev'),
$sliderNext = $('.slider-next'),
$previewList = $('.preview-list ul'),
$previewItem = $('.preview-list li'),
$previewPrev = $('.preview-prev'),
$previewNext = $('.preview-next'),
total = $sliderItem.length,
current = 0,
interval = null;
// 初始化
$sliderItem.eq(current).addClass('active');
$previewItem.eq(current).addClass('active');
$previewList.css('transform', 'translateX(-' + (current * 14.2857) + '%)');
// 切换到指定图片
var img = parseInt(getParameterByName('img'));
if (img && img > 0 && img <= total) {
current = img - 1;
changeSlide();
}
// 切换到下一张图片
function nextSlide() {
current++;
if (current >= total) {
current = 0;
}
changeSlide();
}
// 切换到上一张图片
function prevSlide() {
current--;
if (current < 0) {
current = total - 1;
}
changeSlide();
}
// 切换到指定图片
function gotoSlide(index) {
current = index;
changeSlide();
}
// 切换图片
function changeSlide() {
$sliderList.stop().animate({ 'left': '-' + (current * 100) + '%' }, 500);
$sliderItem.eq(current).addClass('active').siblings().removeClass('active');
$previewItem.eq(current).addClass('active').siblings().removeClass('active');
if (current >= 5 && current < total - 2) {
$previewList.stop().animate({ 'transform': 'translateX(-' + ((current - 4) * 14.2857) + '%)' }, 500);
} else if (current >= total - 2) {
$previewList.stop().animate({ 'transform': 'translateX(-' + ((total - 9) * 14.2857) + '%)' }, 500);
} else {
$previewList.stop().animate({ 'transform': 'translateX(0)' }, 500);
}
}
// 自动轮播
interval = setInterval(nextSlide, 5000);
// 鼠标悬停停止自动轮播
$slider.on('mouseover', function() {
clearInterval(interval);
}).on('mouseout', function() {
interval = setInterval(nextSlide, 5000);
});
// 点击切换按钮切换图片
$sliderPrev.on('click', function() {
prevSlide();
});
$sliderNext.on('click', function() {
nextSlide();
});
// 点击预览小图切换图片
$previewItem.on('click', function() {
var index = $(this).index();
gotoSlide(index);
});
// 点击预览小图切换按钮切换预览小图
$previewPrev.on('click', function() {
if (current > 0) {
current--;
$previewList.stop().animate({ 'transform': 'translateX(-' + (current * 14.2857) + '%)' }, 500);
}
});
$previewNext.on('click', function() {
if (current < total - 1) {
current++;
if (current >= 5 && current < total - 2) {
$previewList.stop().animate({ 'transform': 'translateX(-' + ((current - 4) * 14.2857) + '%)' }, 500);
} else if (current >= total - 2) {
$previewList.stop().animate({ 'transform': 'translateX(-' + ((total - 9) * 14.2857) + '%)' }, 500);
}
}
});
// 获取URL参数
function getParameterByName(name) {
var url = window.location.href;
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) {
return null;
}
if (!results[2]) {
return '';
}
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
});
```
注意事项:
1. 根据实际图片路径修改HTML代码中的图片路径;
2. 如果需要使用字体图标作为切换按钮,需要引入Font Awesome字体库;
3. 代码中使用了ES6语法,需要使用支持ES6的浏览器或者使用Babel进行转换。
阅读全文
相关推荐


















