JS特效----图片轮播

Posted 石佳灵

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS特效----图片轮播相关的知识,希望对你有一定的参考价值。

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

* {

margin: 0px;

padding: 0px;

}

 

#stage {

width: 500px;

height: 300px;

border: 3px solid black;

margin: 100px;

overflow: hidden;

position: relative;

}

 

#banner {

width: 3000px;

height: 300px;

background-color: rosybrown;

}

 

.items {

width: 500px;

height: 300px;

color: white;

font-size: 150px;

text-align: center;

line-height: 300px;

float: left;

}

 

.btn-l,

.btn-r {

width: 50px;

height: 300px;

background-color: black;

opacity: 0.5;

color: white;

font-size: 40px;

line-height: 300px;

text-align: center;

position: absolute;

top: 0px;

}

 

.btn-l {

left: 0px;

}

 

.btn-r {

right: 0px;

}

 

.btn-l:hover,

.btn-r:hover {

cursor: pointer;

opacity: 0.2;

}

 

.points {

position: absolute;

bottom: 10px;

left: 200px;

/*background-color: orangered;*/

width: 125px;

height: 20px;

}

 

.dot {

width: 15px;

height: 15px;

border-radius: 50%;

background-color: gainsboro;

float: left;

margin-right: 5px;

cursor: pointer;

}

 

.active {

background-color: red;

}

</style>

</head>

 

<body>

<div id="stage">

<div class="btn-l">

<</div>

<div class="btn-r">></div>

<div id="banner">

<div class="items" style="background-color: red;">1</div>

<div class="items" style="background-color: blueviolet;">2</div>

<div class="items" style="background-color: green;">3</div>

<div class="items" style="background-color: yellow;">4</div>

<div class="items" style="background-color: brown;">5</div>

<div class="items" style="background-color: red;">1</div>

</div>

<div class="points">

<div data="1" class="dot active"></div>

<div data="2" class="dot"></div>

<div data="3" class="dot"></div>

<div data="4" class="dot"></div>

<div data="5" class="dot"></div>

</div>

</div>

</body>

 

</html>

<script>

//取对象

var btn_l = document.getElementsByClassName(‘btn-l‘)[0];

var btn_r = document.getElementsByClassName("btn-r")[0];

var banner = document.getElementById("banner");

var dots = document.getElementsByClassName(‘dot‘);

//定义变量

var count = 1;

var arr = [];

//右侧按钮点击事件

btn_r.onclick = function() {

if(count < 6) {

count++;

arr.push(window.setInterval("move_left()", 20));

} else if(count == 6) {

count = 1;

banner.style.marginLeft = 0 + ‘px‘;

 

count++;

arr.push(window.setInterval("move_left()", 20));

}

for(var i = 0; i < dots.length; i++) {

dots[i].setAttribute("class", "dot");

}

dots[count - 1].setAttribute("class", "dot active");

}

//左侧按钮点击事件

btn_l.onclick = function() {

if(count > 1) {

count--;

arr.push(window.setInterval("move_right()", 20));

}else if(count == 1){

count = 6;

banner.style.marginLeft = -2500 + ‘px‘;

 

count--;

arr.push(window.setInterval("move_right()", 20));

}

 

for(var i = 0; i < dots.length; i++) {

dots[i].setAttribute("class", "dot");

}

dots[count - 1].setAttribute("class", "dot active");

}

//向左移动

function move_left() {

if(banner.offsetLeft == (count - 1) * (-500)) {

clear();

} else {

banner.style.marginLeft = banner.offsetLeft - 20 + "px";

}

 

}

//向右移动

function move_right() {

if(banner.offsetLeft == (count - 1) * (-500)) {

clear();

} else {

banner.style.marginLeft = banner.offsetLeft + 20 + "px";

}

}

//清除所有间隔执行

function clear() {

for(var x in arr) {

window.clearInterval(arr[x]);

}

}

//批量添加点击事件

for(var j = 0; j < dots.length; j++) {

dots[j].onclick = function() {

 

count_s = this.getAttribute("data");

if(count > count_s) {

count = count_s;

arr.push(window.setInterval("move_right()", 20));

} else if(count < count_s) {

count = count_s;

arr.push(window.setInterval("move_left()", 20));

}

 

for(var i = 0; i < dots.length; i++) {

dots[i].setAttribute("class", "dot");

}

this.setAttribute("class", "dot active");

}

}

//自动轮播

function auto_move(){

if(count < 6) {

count++;

arr.push(window.setInterval("move_left()", 20));

} else if(count == 6) {

count = 1;

banner.style.marginLeft = 0 + ‘px‘;

 

count++;

arr.push(window.setInterval("move_left()", 20));

}

for(var i = 0; i < dots.length; i++) {

dots[i].setAttribute("class", "dot");

}

dots[count - 1].setAttribute("class", "dot active");

}

 

window.setInterval("auto_move()",3000);

</script>

 

以上是关于JS特效----图片轮播的主要内容,如果未能解决你的问题,请参考以下文章

这周用到的圆形轮播插件 mislider.js

HTML轮播图片代码,带解释

js轮播特效

用js写的简单轮播特效

js之pc端网页特效三

js之pc端网页特效三