使用拼字符串 更改图片的来源
function hoverMiniImg() {
$('#icon_list>li').hover(function() {
//鼠标移入
$(this).css('color', 'red'); //添加样式
//显示对应的中图
var src = "../../img/a" + $(this).index() + ".png";
$('#mediuImg').attr('src', src)
}, function() {
//鼠标移出
$(this).css('color', 'black'); //添加样式
});
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery-3.6.1.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
#product_intro {
position: relative;
overflow: hidden;
height: 600px;
width: 520px;
}
#mediuImg {
width: 520px;
height: 450px;
}
.backward,
.forword {
display: inline-block;
font-size: 60px;
width: 60px;
height: 150px;
line-height: 150px;
background: yellow;
float: left;
text-decoration: none;
overflow: hidden;
}
.forword {
position: absolute;
left: 0px;
}
.backward {
position: absolute;
left: 460px;
}
.color {
width: 60px;
height: 150px;
background-color: royalblue;
}
#icon_list {
position: absolute;
height: 150px;
width: 800px;
float: left;
font-size: 0px;
left: 60px;
}
#icon_list li {
width: 100px;
height: 150px;
font-size: 30px;
font-weight: bold;
text-align: center;
line-height: 150px;
display: inline-block;
}
</style>
</head>
<body>
<div id="product_intro">
<img id="mediuImg" src="../../img/a0.png" alt="图片">
<div>
<ul id="icon_list">
<li style="background: #2ab;">1</li>
<li style="background: #bfa;">2</li>
<li style="background: #acb;">3</li>
<li style="background: #897;">4</li>
<li style="background: #345;">5</li>
<li style="background: #a56;">6</li>
<li style="background: #189;">7</li>
<li style="background: #c78;">8</li>
</ul>
</div>
<!-- 点击监听 -->
<a class="backward" href="#">→</a>
<a class="forword" href="#">←</a>
</div>
<script>
moveMiniImg();
hoverMiniImg();
function hoverMiniImg() {
$('#icon_list>li').hover(function() {
//鼠标移入
$(this).css('color', 'red'); //添加样式
//显示对应的中图
var src = "../../img/a" + $(this).index() + ".png";
$('#mediuImg').attr('src', src)
}, function() {
//鼠标移出
$(this).css('color', 'black'); //添加样式
});
}
function moveMiniImg() {
var $aa = $('#product_intro>a');
var $backward = $('.backward');
var $forword = $('.forword');
var $ul = $('#icon_list');
var showPic = 4; //一次性显示4个
var imgCount = $ul.children().length; //所有图片数量
var distance = $ul.children(':first').width();
//初始化更新
if (imgCount > showPic) {
$forword.addClass('color')
}
//向右的绑定监听
var moveCount = 0; //点击向右+1 点击向左 -1
var curLeft = 0;
var now = $ul.offset().left;
$backward.click(function() {
//判断是否需要移动 不需要直接不行
if (moveCount === imgCount - showPic) { //4个
$backward.addClass('color');
return
}
moveCount++;
//更新右边移动的按钮
$forword.removeClass('color');
//更新右边的按钮
if (moveCount === imgCount - showPic) {
$backward.addClass('color');
}
//移动图片的距离
curLeft = $ul.offset().left - distance;
$ul.css('left', curLeft);
})
//更新左边移动的按钮
$forword.click(function() {
//判断是否需要移动 不需要直接不行
if (moveCount === 0) { //一上来不能移动 是0
$forword.addClass('color');
return
}
moveCount--;
//更新右边移动的按钮
$backward.removeClass('color');
//更新左边的按钮
if (moveCount === 0) {
$forword.addClass('color');
}
//移动图片的距离
curLeft = $ul.offset().left + distance;
$ul.css('left', curLeft);
})
}
</script>
</body>
</html>