求类似于淘宝产品详情页面大图下面多个小图然后点击左右箭头可以换图片的那种效果的CSS或JS代码
求类似于淘宝产品详情页面大图下面多个小图然后点击左右箭头可以换图片的那种效果的CSS或JS代码...
求类似于淘宝产品详情页面大图下面多个小图然后点击左右箭头可以换图片的那种效果的CSS或JS代码
展开
19个回答
展开全部
参考代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.btn{
display: block;
margin:135px auto;
width: 30px;
height: 30px;
font-size: 30px;
cursor: pointer;
}
.btn:hover
{
color: gray;
font-size: 35px;
font-weight: bold;
}
.img
{
width: 600px;
height: 400px;
float: left;
transition: all 1s;
}
.info-img
{
width: 100px;
height: 67px;
float: left;
margin-left: 20px;
}
</style>
</head>
<body>
<div style="width: 1000px;height: 800px;margin: auto;">
<div style="width: 700px;height: 500px;margin: auto;">
<div style="width: 50px;height: 400px;float: left;text-align: center;">
<span class="btn" onclick="change_img('last')"><</span>
</div>
<img id="1" src="image/fj1.jpg" class="img">
<div style="width: 50px;height: 400px;float: left;text-align: center;">
<span class="btn" onclick="change_img('next')">></span>
</div>
<div style="width: 700px;height: 100px;text-align: center;">
<span>图片介绍：</span>
<span id="text">风景图片1</span>
</div>
</div>
<div id="info" style="width: 700px;height: 200px;margin: auto;text-align: center;">
</div>
</div>
<script>
var data = [
{id:1,src:"image/fj1.jpg",text:"风景图片1"},
{id:2,src:"image/fj2.jpg",text:"风景图片2"},
{id:3,src:"image/fj3.jpg",text:"风景图片3"},
{id:4,src:"image/fj4.jpg",text:"风景图片4"},
];
var info = document.getElementById("info");
onload = function () {
let doc=``;
for(d of data)
{
doc = doc + `<div><img src="${d.src}" value="${d.id}" title="${d.text} "> </div>`;
}
info.innerHTML = doc;
};
var img = document.getElementsByTagName("img")[0];
var text = document.getElementById("text");
function change_img(e) {
var id = parseInt(img.id);
if(e == "next")
{
id += 1;
}else {
id -= 1;
}
if(id>4)
{
id=1;
}else if(id<1){
id=4;
}
try {
img.setAttribute("src",data[id-1].src);
text.innerText = data[id-1].text;
img.id = id;
}catch(e) {
id = id - 1;
}
}
</script>
</body>
</html>
效果：
注意：
图片是本地的
样式这些都可以自己定义。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
http://down.admin5.com/texiao/flash/这里有很多的。我这俩天正好做的个那·~但是JS有冲突，希望到时候你也帮我
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
呃，幻灯片，有专门的js插件，多种形式的效果都有
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个属于轮播图效果，可以去懒人看看应该有这种效果的代码下载
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个东西叫轮播图，你按轮播图来搜，应该还是有的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
