用JQuery实现一行多图轮播,是单击一下一张图片轮播,不是一下一行图片...
发布网友
发布时间：2022-04-25 15:25
共2个回答
热心网友
时间：2022-04-22 14:53
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding: 0;margin: 0; }
ul li{list-style-type: none}
.gameTab{ width: 1100px; height: 150px; overflow: hidden; margin: 50px auto;position: relative;}
.gameTab ul{ width: 7680px; overflow: hidden; }
.gameTab ul>li{ width: 220px; height:150px; float: left;text-align: center;}
.gameTab ul>li:hover{opacity: 0.5}
.prev,.next{position: absolute;top: 50%;transform:translate(0,-50%);padding: 5px;background: red;z-index: 99;text-decoration: none;color: #fff;
}
.prev{left: 0;}
.next{right: 0;}
</style>
</head>
<body>
<div>
<a href="javascript:;">前一张</a>
<ul>
<li style="background: #CB2929">1111</li>
<li style="background: #23C048">2222</li>
<li style="background: #00ABEA">3333</li>
<li style="background: #FF9800">4444</li>
<li style="background: #F96B36">5555</li>
<li style="background: #ADADAD">6666</li>
</ul>
<a href="javascript:;">下一张</a>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(function () {
//下一张
function moveLeft(){
$(".gameTab ul").animate({marginLeft:"-220px"},300, function () {
$(".gameTab ul").children().first().appendTo($(".gameTab ul"));
$(".gameTab ul").css('marginLeft','0px');
});
}
$('.next').click(moveLeft);
//前一张
$('.prev').click(function () {
$(".gameTab ul").children().last().prependTo($(".gameTab ul"));//把ul的最后一个子元素添加到开头第一个
$(".gameTab ul").css('marginLeft','-220px'); //初始化把ul的marginleft左移220
$(".gameTab ul").animate({marginLeft:"0px"},300);
})
// 自动轮播
var timer = setInterval(moveLeft,3000)
//hover时停掉定时器
$('.gameTab').mouseenter(function(){
clearTimeout(timer)
})
$('.gameTab').mouseleave(function(){
timer=setInterval(moveLeft,3000)
})
})
</script>
</body>
</html>
热心网友
时间：2022-04-22 16:11
