<script src="js/jquery-1.11.1.min.js"></script>
<title></title>
<style type="text/css">
*
{
padding: 0px;
margin: 0px;
}
.divOuter
{
1620px;
height: 230px;
position: relative;
}
.divContianerImg
{
height: 230px;
1085px;
border: 1px solid black;
overflow: hidden;
position: absolute;
left: 300px;
}
.divContianerImg img
{
250px;
cursor:pointer;
}
.divContianerImg ul
{
list-style-type: none;
margin-top: 10px;
1620px;
position: absolute;
left: -270px;
}
.divContianerImg li
{
float: left;
margin: 10px;
250px;
}
.btnLeft
{
left:150px;
}
.btnRight
{
right:100px;
}
.btnRemove
{
position:absolute;
top:40%;
50px;
height:50px;
border-radius:100%;
border:1px solid gray;
text-align:center;
line-height:50px;
cursor:pointer;
font-size:2em;
font-weight:bolder;
}
.btnRemove:hover
{
background-color:#DADADA;
color:white;
}
</style>
</head>
<body>
<div class="divOuter">
<div onclick="Left()" class="btnRemove btnLeft"><</div>
<div onclick="Right()" class="btnRemove btnRight" >></div>
<div class="divContianerImg">
<ul>
<li title="1">
<img src="images/wall1.jpg" /></li>
<li title="2">
<img src="images/wall2.jpg" /></li>
<li title="3">
<img src="images/wall3.jpg" /></li>
<li title="4">
<img src="images/wall4.jpg" /></li>
<li title="5">
<img src="images/wall5.jpg" /></li>
<li title="6">
<img src="images/wall6.jpg" /></li>
<li title="7">
<img src="images/wall7.jpg" /></li>
</ul>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var a = ["/images/wall1.jpg", "/images/wall2.jpg", "/images/wall3.jpg", "/images/wall4.jpg", "/images/wall5.jpg", "/images/wall6.jpg", "/images/wall7.jpg", "/images/wall8.jpg"];
function Right() {
$(".btnRight").removeAttr("onclick");
var i = parseInt($(".divContianerImg").find("ul li:last-child").attr("title"));
if (i + 1 == 9) {
i = 0;
}
i = i + 1;
$(".divContianerImg").find("ul").append("<li title='" +i + "'><img src='" + a[i-1] + "' /></li>");
$(".divContianerImg").find("ul").animate({ marginLeft: "-220px" }, 1000, function () {
$(".divContianerImg").find("ul").css("marginLeft", "0px");
$(".divContianerImg").find("ul li:first-child").remove();
$(".btnRight").attr("onclick", "Right()");
})
}
function Left() {
$(".btnLeft").removeAttr("onclick");
var i = parseInt($(".divContianerImg").find("ul li:first-child").attr("title"));
var check = $(".divContianerImg").find("ul li:first-child").find("img").attr("src");
i = i - 1;
if (i == 0) {
i = 8;
}
$(".divContianerImg").find("ul").animate({ marginLeft: "220px" }, 1000, function () {
$(".divContianerImg").find("ul").prepend("<li title='" + i + "'><img src='" + a[i - 1] + "' /></li>");
$(".divContianerImg").find("ul").css("marginLeft", "0px");
$(".divContianerImg").find("ul li:last-child").remove();
$(".btnLeft").attr("onclick", "Left()");
})
}
var RemoveLeft = setInterval("Right()", 5000)
$(".btnRemove").hover(function () {
clearInterval(RemoveLeft);
}, function () {
RemoveLeft = setInterval("Right()",5000);
});
$(".divContianerImg").find("img").hover(function () {
clearInterval(RemoveLeft);
}, function () {
RemoveLeft = setInterval("Right()", 5000);
});
</script>