轮播图

最新推荐文章于 2024-06-17 15:29:34 发布

紫颖梦忆

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量293

点赞数

分类专栏：随笔

本文链接：https://blog.csdn.net/jiaqingge/article/details/52858532

版权

随笔专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>

<head>

* {

margin: 0;

padding: 0;

}

#wrap {

width: 350px;

height: 200px;

margin:100px auto;

border:3px solid red;

position: relative;

overflow:hidden;

}

#contentDiv {

/*width: 2100px;*/

height: 200px;

position: absolute;

top: 0;

left: 0;

}

#contentDiv img{

width: 350px;

height: 200px;

float:left;

}

ul {

list-style: none;

position: absolute;

margin:0 auto;

left: 30%;

bottom: 0;

}

li {

width: 20px;

height: 20px;

border-radius:50%;

background:white;

text-align: center;

line-height: 20px;

float:left;

margin:0 auto;

}

a {

color:black;

text-decoration:none;

}

#left, #right{

width: 30px;

height: 30px;

position: absolute;

top: 50%;

background: black;

opacity:0.3;

color:white;

text-align: center;

line-height: 30px;

}

#right{

right:0px;

}

.lis {

background: red;

}

</style>

</head>

<body>

</div>

<ul>

</ul>

</div>

//内容div

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

// contentDiv.innerHTML += contentDiv.innerHTML;

//图片数组

var imgs = document.getElementsByTagName("img");

contentDiv.style.width = imgs[0].offsetWidth * imgs.length + "px";

//小球

var lis = document.getElementsByTagName("li");

//左按钮

var leftbtn = document.getElementById("left");

//右按钮

var rightbtn = document.getElementById("right");

把换小球和换图片分别封装成两个函数

点击按钮时调用换小球与换图片的函数

当鼠标移入小球时调用换图片函数

当鼠标不在可视区域时,使用定时器调用换小球函数与换图片函数

当鼠标移入可视区域时,清除定时器

//声明一个变量记录当前是第几张图片

var index = 0;

//左边按钮点击事件

leftbtn.onclick = function(){

if(index == 0){

index = 6;

contentDiv.style.left = -imgs[0].offsetWidth * index + "px";

}

index--;

//换图片

scrollImg();

//换小球

changePoint();

}

//右边按钮点击事件

rightbtn.onclick = function(){

if(index == 6){

index = 0;

contentDiv.style.left = imgs[0].offsetWidth * index + "px";

}

index++;

scrollImg();

changePoint();

}

//换图片函数

function scrollImg(){

var t = 0;

//offsetLeft 获取对应元素距离父级最左端的位置

var b = contentDiv.offsetLeft;

var c = index * -imgs[0].offsetWidth - b;

var d = 20;

function move(){

t++;

contentDiv.style.left = Tween.Linear(t, b, c, d) + "px";

if(t == d){

clearInterval(timer);

}

var timer = setInterval(move, 20);

}

//换小球函数

function changePoint(){

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

if(index == i){

lis[i].style.background = "red";

}

else{

lis[i].style.background = "white";

}

if(index == 6){

lis[0].style.background = "red";

}

//为每一个小球绑定鼠标移入事件

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

lis[i].onmouseenter = (function(nowIndex){

return function(){

index = nowIndex;

scrollImg();

changePoint();

}

})(i);

}

function autoScrollImg(){

if(index == 6){

index = 0;

contentDiv.style.left = imgs[0].offsetWidth * index + "px";

}

index++;

scrollImg();

changePoint();

}

var timer2 = setInterval(autoScrollImg, 1000);

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

wrap.onmouseenter = function(){

clearInterval(timer2);

}

wrap.onmouseleave = function(){

timer2 = setInterval(autoScrollImg, 1000);

}

</script>

</body>

</html>

紫颖梦忆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图

DOCTYPE html>html>head>metacharset="UTF-8">title>轮播图title>styletype="text/css">*{margin:0;padding:0;}#wrap{width:350px;height:200px;margin:100pxauto;borde
复制链接

扫一扫

专栏目录