用JQuery实现一行多图轮播，是单击一下一张图片轮播，不是一下一行图片轮播，给个例子，跪求
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用JQuery实现一行多图轮播，是单击一下一张图片轮播，不是一下一行图片轮播，给个例子，跪求相关的知识，希望对你有一定的参考价值。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*padding: 0;margin: 0;
ul lilist-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:hoveropacity: 0.5
.prev,.nextposition: absolute;top: 50%;transform:translate(0,-50%);padding: 5px;background: red;z-index: 99;text-decoration: none;color: #fff;
.prevleft: 0;
.nextright: 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> 参考技术A 使用SuperSlide2.1.js插件，就可以实现这个效果，而且很容易使用
以上是关于用JQuery实现一行多图轮播，是单击一下一张图片轮播，不是一下一行图片轮播，给个例子，跪求的主要内容，如果未能解决你的问题，请参考以下文章
在图片轮播过程中，采用jquery，如何将除了第一张以外的图片全部隐藏？