JavaScript-轮播2

<div class="container">
<div class="wrap" style="left: -600px;">
<img src="./img/timg10.jpg" alt="">
<img src="./img/timg14.jpg" alt="">
<img src="./img/timg15.jpg" alt="">
<img src="./img/timg8.jpg" alt="">
<img src="./img/timg9.jpg" alt="">
<img src="./img/timg17.jpg" alt="">
<img src="./img/timg19.jpg" alt="">
</div>
<div class="buttons">
<span class="on">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow arrow_left"><</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow arrow_right">></a>
</div>

* {
margin:0;
padding:0;
}
a{
text-decoration: none;
}
.container {
position: relative;
width: 600px;
height: 400px;
margin:100px auto 0 auto;
box-shadow: 0 0 5px green;
overflow: hidden;
}
.container .wrap {
position: absolute;
width: 4200px;
height: 400px;
z-index: 1;
}
.container .wrap img {
float: left;
width: 600px;
height: 400px;
}
.container .buttons {
position: absolute;
right: 5px;
bottom:40px;
width: 150px;
height: 10px;
z-index: 2;
}
.container .buttons span {
margin-left: 5px;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: green;
text-align: center;
color:white;
cursor: pointer;
}
.container .buttons span.on{
background-color: red;
}
.container .arrow {
position: absolute;
top: 35%;
color: green;
padding:0px 14px;
border-radius: 50%;
font-size: 50px;
z-index: 2;
display: none;
}
.container .arrow_left {
left: 10px;
}
.container .arrow_right {
right: 10px;
}
.container:hover .arrow {
display: block;
}
.container .arrow:hover {
background-color: rgba(0,0,0,0.2);
}

window.οnlοad=function()
{
　　var wrap = document.querySelector(".wrap");
　　var next = document.querySelector(".arrow_right");
　　var prev = document.querySelector(".arrow_left");
　　

　　next.onclick = function () {
　　　　next_pic();
　　}
　　

　　prev.onclick = function () {
　　　　prev_pic();
　　}

　　function next_pic () {
　　　　index++;
　　if(index > 4){
　　　　index = 0;
　　}　　
　　showCurrentDot();
　　var newLeft;
　　if(wrap.style.left === "-3600px"){
　　　　newLeft = -1200;
　　}else{
　　　　newLeft = parseInt(wrap.style.left)-600;
　　}
　　wrap.style.left = newLeft + "px";
}

function prev_pic () {
　　index--;
　　if(index < 0){
　　index = 4;
}
　　showCurrentDot();
　　var newLeft;
　　if(wrap.style.left === "0px"){
　　　　newLeft = -2400;
　　}else{
　　　　newLeft = parseInt(wrap.style.left)+600;
　　}
　　wrap.style.left = newLeft + "px";
}

var timer = null;
function autoPlay () {
　　timer = setInterval(function () {
　　next_pic();
},2000);
}
autoPlay();

var container = document.querySelector(".container");
container.onmouseenter = function () {
　　clearInterval(timer);
}
container.onmouseleave = function () {
　　autoPlay();
}

var index = 0;
var dots = document.getElementsByTagName("span");
function showCurrentDot () {
　　for(var i = 0, len = dots.length; i < len; i++){
　　　　dots[i].className = "";
　　}
　　dots[index].className = "on";
}

for (var i = 0, len = dots.length; i < len; i++)
{
　　(function(i){
　　　　dots[i].onclick = function ()
　　{
　　var dis = index - i;
　　if(index == 4 && parseInt(wrap.style.left)!==-3000)
　　{
　　　　dis = dis - 5;
　　}　　
//和使用prev和next相同，在最开始的照片5和最终的照片1在使用时会出现问题，导致符号和位数的出错，做相应地处理即可
if(index == 0 && parseInt(wrap.style.left)!== -600){
dis = 5 + dis;
}
wrap.style.left = (parseInt(wrap.style.left) + dis * 600)+"px";
index = i;
showCurrentDot();
}
})(i);
}

}

转载于:https://www.cnblogs.com/xiaoyangtian/p/7979968.html

• 点赞
• 收藏
• 分享
• 文章举报