鼠标滑动切换图片
本帖最后由 wp231957 于 2020-2-24 19:32 编辑<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>演示鼠标滑动切换图像的页面</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
<style>
.circle ul li
{
list-style:none;
float:left;
width:40px;
height:40px;
background:orange;
margin-left:5px;
border-radius: 50%;
}
.circle ul
{
overflow:hidden;
height:50px;
margin-top:20px;
margin-left:120px;
}
.circle
{
position:absolute;
bottom:200px;
left:20%;
width:400px;
height:400px;
border:1px solid #000;
}
.circle ul li.current
{
background:red;
}
</style>
</head>
<body>
<div class="circle" id="circle">
<img width=400pxheight=400px id="img01" src="/pic/2111.png"></img>
<ul>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
imglist=["2111.png","2112.png","2113.png","2114.png","2115.png"];
$("#circle ul li").mouseover(function()
{
$(this).hover(function()
{
//console.log($(this).index());
$(this).css('background', 'red');
$("#img01").attr('src',"/pic/"+imglist[$(this).index()]);
}, function()
{
$(this).css('background', 'orange');
});
});
</script>
</body>
</html>
示例图片
页:
[1]