求一段点击左右滚动,支持懒加载的js代码
发布网友
发布时间：2022-04-26 23:42
共2个回答
热心网友
时间：2022-04-22 20:48
<html>
<head>
<style>
.right_Frame .ProctSlide{width:792px; height:auto; border:solid 1px #e0e0e0; color:#666;}
.Slide_Screen{ width:790px; height:502px; }
.Slide_Screenp{width:790px; height:502px; }
.Slide_List{width:785px; height:110px; margin:10px 0; padding-left:7px;}
.Slide_List a{ float:left; margin-top:10px; border: 0;}
.Slide_List ul li{width:139px; height:107px; float:left; margin:0 auto;}
.Slide_List ul li a{width:139px; text-align:center; margin-top:10px;}
a {color:#666; text-decoration:none;font-size: 10pt;}
img {border: 0;}
</style>
</head>
<body>
<div class="Slide_Screen">
<div class="right_Frame">
<div class="ProctSlide">
<div class="Slide_Screen">
<img id="bigImg" src="http://www.creatent.net/res/images/Procts_1.jpg" />
</div>
<div class="Slide_List">
<a href="javaScript:changePage(-1);" titlr="向左"><img src="http://www.creatent.net/images/Slide_left.gif" alt="向左"/></a>
<ul id="smallImgList"></ul>
<a href="javaScript:changePage(1)" titlr="向右"><img src="http://www.creatent.net/images/Slide_right.gif" alt="向右"/></a>
</div>
</div>
<div class="Projection"></div>
</div>
</body>
</html>
<script src="jquery-1.4.js"></script>
<script type="text/javascript">
var pimgs = [
{"small":"http://www.creatent.net/res/images/Slide_ico1.jpg", "big":"http://www.creatent.net/res/images/Procts_1.jpg", "desc":"TVpad2“芯”升级，“智”变革"},
{"small":"http://www.creatent.net/res/images/Slide_ico2.jpg", "big":"http://www.creatent.net/res/images/Procts_2.jpg", "desc":"操控流畅，极致体验"},
{"small":"http://www.creatent.net/res/images/Slide_ico3.jpg", "big":"http://www.creatent.net/res/images/Procts_3.jpg", "desc":"更多选择，正版认证"},
{"small":"http://www.creatent.net/res/images/Slide_ico4.jpg", "big":"http://www.creatent.net/res/images/Procts_4.jpg", "desc":"内置wifi，舒适体验"},
{"small":"http://www.creatent.net/res/images/Slide_ico5.jpg", "big":"http://www.creatent.net/res/images/Procts_5.jpg", "desc":"轻松打造客厅KTV"},
{"small":"http://www.creatent.net/res/images/Slide_ico6.jpg", "big":"http://www.creatent.net/res/images/Procts_6.jpg", "desc":"互动游戏，自由掌控"},
{"small":"http://www.creatent.net/res/images/Slide_ico7.jpg", "big":"http://www.creatent.net/res/images/Procts_7.jpg", "desc":"网络通话，全球畅聊"}
];
var pageNo = 1;// 当前页码
var pageSize = 5;// 每页显示张数
$(function(){
initImg(pageNo);
//loadImage();
});
// 预先下载图片
function loadImage() {
for (var i = 0; i < pimgs.length; i++) {
new Image().src = pimgs[i]["big"];
new Image().src = pimgs[i]["small"];
}
}
// 翻页（op: -1表示向左翻，1表示向右翻）
function changePage(op) {
var left = -1;// 向左翻
var right = 1;// 向右翻
var pageSum = pimgs.length / pageSize;// 总页数
if (op == right) {
if (pageNo < pageSum) {
initImg(++pageNo);
}
} else if (op == left) {
if (pageNo > 1) {
initImg(--pageNo);
}
}
}
// 显示初始化
function initImg(pageNo) {
var start = (pageNo - 1) * pageSize;
var end = pageNo * pageSize;
if (end > pimgs.length) {
end = pimgs.length;
}
$("#smallImgList").find("li").remove();
for (var i = start; i < end; i++) {
var smallImg = '<li>'+
'<a href="javaScript:void(0)"><img id="small" src="'+ pimgs[i]["small"] +'" big="'+ pimgs[i]["big"] +'" /></a>'+
'<a href="javaScript:void(0)">'+ pimgs[i]["desc"] +'</a>'+
'</li>';
$("#smallImgList").append(smallImg);
}
// 点击小图时显示对应的大图
$("#smallImgList").find("li").each(function(){
var $this = $(this);
var bigImg = $this.find("#small").attr("big");
$this.mousedown(function(){
$("#bigImg").attr("src", bigImg);
});
});
}
</script>
通过js加载就实现了lazyload，希望能帮到你。
这个例子需要导入jquery才能正确运行。追问你这个我看了，怎么样才能循环翻页？你这个翻到最后就翻不了了，我想要翻到最后一页，再点击按钮时可以跳到第一页。谢谢！
追答// 翻页（op: -1表示向左翻，1表示向右翻）
function changePage(op) {
var left = -1; // 向左翻
var right = 1; // 向右翻
var pageSum = pimgs.length / pageSize; // 总页数
if (op == right) {
if (pageNo 1) {
initImg(--pageNo);
}
}
}
修改这个方法即可
热心网友
时间：2022-04-22 22:06
用Jquery可以实现！
具体可以追问！追问我对编码不懂，平时用得也少。能不能给一个现成的？
我用了Jquery lazyload，图片可以滚动到才显示。但是页面下方用了一个图片用鼠标点击两侧滚动的效果，滚动到这里只能加载其中已经显示的图片， 用了 overflow: hidden; 隐藏的部分用鼠标点击滚动出来，但是不会换成 src属性了，也就不会加载。 有什么办法可以解决？ 最好小点的改动。谢谢
