js简单的图片轮播

Ⅰ 简单轮播图的实现及原理讲解（js）

三个div，最外层id为 parent 的大div内包含了 uls 和 buttons 两个div，div uls 中包含了两个列表 img_ul （图片列表）, litCir_ul （小圆点列表），div buttons 里则包含了“左”， “右”两个按钮。

之所用js添加小圆点，是因为小圆点的数量是由图片张数决定的。

默认 li 的 class 为 quiet , 第一张默认为 active 。

首先先理解该轮播图如何滚动，这里是通过控制 img_ul 的 left 值来控制显示某张图片， 为了实现“滚动”的效果，我们需要 逐渐 改变 img_ul 的 left 值，而不能直接使该值变化图片宽度的倍数。这里我们定义一个动画效果函数 Roll() 。

试想下面的情况，当图片从最后一张切换到第一张时，这时就不能通过逐渐改变 img_ul 的 left 值来实现滚动的效果，于是 克隆第一张图片至列表尾部，当滚动完最后一张图片时，继续滚动到克隆的第一张，然后将 img_ul 的 left 值置为0。

需要注意的是小圆点和图片列表的 li 数目是不一样的，当滚动到最后一个克隆项时，此时小圆点实际上在第一个位置。

开始自动滚动：
timer = setInterval(autoRun, gap);

给每个小圆点绑定了onmouseover事件，这个方法有个细节，会根据两次小圆点的距离差调整速率为 rate*times ，使切换效果更自然（也就是说每次切换说花的时间基本一致，无论是第一张到第二张，还是第一张到最后一张）。

触及区域，清除定时器，显示按钮。
离开区域，添加定时器，隐藏按钮。

自动播放就是间隔一定时间不断调用函数“下一张”的过程，所以这里的按钮 right 下一张的实现就是上面的 autoRun 函数。

以上就是轮播图各部分的实现原理，如果你有其他的方法，欢迎一起交流！
2019.3.30更新：
用requestAnimationFrame()实现一个轮播图

Ⅱ 怎么用js做一个简单的轮播图

obj1.onmouseover = function () {
clearInterval(time);
}
obj1.onmouseout = function () {
time = setInterval("turn();", 6000);
}
for (var num = 0; num < obj2.length; num++) {
obj2[num].onmouseover = function () {
turn(this.innerHTML);
clearInterval(time);
}
obj2[num].onmouseout = function () {
time = setInterval("turn();", 6000);
}
}

Ⅲ js如何制作图片轮播

工具/材料

Sublime Text

• 01

  首先在Sublime Text下面准备一个html和5张图片，图片宽高为600px和400px，如下图所示

• 02

  然后在HTML页面中布局轮播图的结构，如下图所示，主要包括图片区域，圆形按钮，左右箭头

• 03

  接下来需要给轮播图页面布局声明一些样式，请按照下图所示的样式代码进行声明

• 04

  最后就是实现轮播图的JS脚本功能，如下图所示，主要包括前进，后退，自动播放的功能

• 05

  最后运行页面，你就会看到下图所示的轮播图效果，点击圆圈或者左右箭头可以切换轮播图

Ⅳ js实现效果：循环轮播图

跟普通的左右切换轮播图类似，但是它看起来是首尾相连的。

首先来讲一下我的思路：
我们要想无缝切换图片，必须要在所有图片的最后添加一张第一张图片，因为要实现从最后一张切换到第一张时有过渡效果；
之后我们要让你处在第一张时，向前向后切换都要进行 隐式切换 。

我们也可以将所有的轮播图的图片外面套一层div，并设置绝对定位，然后使用 父相子绝 ，来让图片可以相对父元素定位（父元素就是装轮播图的盒子）

之后，只要我们让不该显示的图片定位到盒子范围外的位置（父元素设置overflow:hidden;），在需要切换图片时，我们就把当前图片前后的图片定位到对应位置，然后通过setInterval方法循环改变其位置实现轮播效果。之后更改当前图片的索引即可。

Ⅳ JS制作轮播图

轮播图是每个网站中必不可少的元素，那么如何用JS制作轮播图呢？下面我就给大家分享一下。

工具/材料

Sublime Text

• 01

  首先需要在Sublime中创建HTML文档，然后在文档的body区域中加入如下图所示的轮播图内容

• 02

  然后我们需要在style标签中给所添加的轮播图内容声明样式，如下图所示

• 03

  接下来我们就需要在script标签中实现轮播图的动画脚本内容了，如下图所示，注意script标签的type类型一定要是javascript

• 04

  最后我们运行界面程序，你就会看到如下图所示的轮播图了，点击左右的箭头和中间的圆点都可以进行轮播图的切换

Ⅵ JS实现图片的轮播功能

<!--轮播开始-->
<divclass="slider">
<ulclass="slider-main">
<liclass="slider-panel"><imgsrc="../view/mis/app/handle/images/01.jpg"></li>
<liclass="slider-panel"><imgsrc="../view/mis/app/handle/images/02.jpg"></li>
<liclass="slider-panel"><imgsrc="../view/mis/app/handle/images/03.jpg"></li>
<liclass="slider-panel"><imgsrc="../view/mis/app/handle/images/04.jpg"></li>
</ul>

<divclass="slider-extra">
<ulclass="slider-nav">
<liclass="slider-item">1</li>
<liclass="slider-item">2</li>
<liclass="slider-item">3</li>
<liclass="slider-item">4</li>
</ul>

<divclass="slider-page">
<aclass="slider-pre"href="javascript:;;"><</a><a
class="slider-next"href="javascript:;;">></a>
</div>
</div>
<!--轮播结束-->


上面的我的页面
这是css文件
.w_lr{width:100%;height:100%;}
.w_lr.left{width:50%;height:350px;float:left;}
.w_lr.right{width:49%;height:350px;float:right;}

a{
text-decoration:none;
}
ul{
list-style:outsidenonenone;
}
.slider,.slider-panelimg,.slider-extra{
width:330px;
height:280px;
}
.slider{
text-align:center;
margin:10pxauto;
position:relative;
}
.slider-panel,.slider-nav,.slider-pre,.slider-next{
position:absolute;
z-index:8;
}
.slider-panel{
position:absolute;
}
.slider-panelimg{
border:none;
}
.slider-extra{
position:relative;
}
.slider-nav{
margin-left:-51px;
position:absolute;
left:50%;
bottom:4px;
}
.slider-navli{
background:#3e3e3e;
border-radius:50%;
color:#fff;
cursor:pointer;
margin:02px;
overflow:hidden;
text-align:center;
display:inline-block;
height:18px;
line-height:18px;
width:18px;
}
.slider-nav.slider-item-selected{
background:blue;
}
.slider-pagea{
background:rgba(0,0,0,0.2);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
color:#fff;
text-align:center;
display:block;
font-family:"simsun";
font-size:22px;
width:28px;
height:62px;
line-height:62px;
margin-top:-31px;
position:absolute;
top:50%;
}
.slider-pagea:HOVER{
background:rgba(0,0,0,0.4);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
}
.slider-next{
left:100%;
margin-left:-28px;
}

Ⅶ 求一段简单的js图片轮播代码，刚学js，不要太复杂。谢谢！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="焦点图" />
<meta name="description" content="焦点图代码" />
<title>焦点图</title>

<script type="text/javascript" src="http://www.jinchuwenhua.com/templets/default/js/jquery.js"></script>
<script type="text/javascript" src="http://www.jinchuwenhua.com/templets/default/js/slide.js"></script>

</head>
<body>
<!-- 代码 开始 -->

<style>
.ck-slide ul { margin: 0; padding: 0; list-style-type: none;}
.ck-slide { position: relative; overflow: hidden;}
.ck-slide ul.ck-slide-wrapper { position: absolute; top: 0; left: 0; z-index: 1; margin: 0; padding: 0;}
.ck-slide ul.ck-slide-wrapper li { position: absolute;}
.ck-slide .ck-prev, .ck-slide .ck-next { position: absolute; top: 50%; z-index: 2; width: 35px; height: 70px; margin-top: -35px; border-radius: 3px; opacity: .15; background: red; text-indent: -9999px; background-repeat: no-repeat; transition: opacity .2s linear 0s;}
.ck-slide .ck-prev { left: 5px; background: url(templets/default/images/arrow-left.png) #000 50% no-repeat;}
.ck-slide .ck-next { right: 5px; background: url(templets/default/images/arrow-right.png) #000 50% no-repeat;}
.ck-slidebox { position: absolute; left: 50%; bottom: 0px; z-index: 30; hright:30px;width:100%}
.ck-slidebox ul { height: 30px; padding: 0 4px; background: rgba(0,0,0,0.5); text-align:center}
.ck-slidebox ul li { float: left; height: 30px; margin: 0px 4px;line-height:30px;color:#fff;display:none}
.ck-slidebox ul li em { display: block; width: 100%; height: 30px; cursor: pointer; font-size:14px}
.ck-slidebox ul li.current em {color:#fff }
.ck-slidebox ul li em:hover { }
.ck-slide { width: 600px; height: 400px; margin: 0 auto;}

.ck-slide ul.ck-slide-wrapper { height: 400px;}
.ck-slide-wrapper li {display:none}
.ck-slidebox ul li{display:none}
.current{display:block!important}
</style>
<div class="ck-slide">

<ul class="ck-slide-wrapper">
<li>

<a target="_blank" href="http://www.jinchuwenhua.com/a/xinwen/2015/1014/307.html" target="_blank"><img id="slide-img-1" src="http://www.jinchuwenhua.com/uploads/allimg/151014/1-151014114S60-L.jpg" class="slide" alt="国考明起报名招2.7万人 首次仅面向体制外招录" style='width:600px'/></a>

</li>
<li>

<a target="_blank" href="http://www.jinchuwenhua.com//a/xinwen/2015/1014/289.html" target="_blank"><img id="slide-img-2" src="http://www.jinchuwenhua.com/uploads/151014/1-151014092105J3.jpg" class="slide" alt="中关村“变形记”：从电子卖场到7.2公里的创业大街" style='width:600px'/></a>

</li>
<li>

<a target="_blank" href="http://www.jinchuwenhua.com/a/xinwen/2015/1014/290.html" target="_blank"><img id="slide-img-3" src="http://www.jinchuwenhua.com/uploads/allimg/151014/1-151014092F30-L.jpg" class="slide" alt="金星大聊两性话题 辣评娱乐圈男星：没我想睡的" style='width:600px'/></a>

</li>

</ul>

<a href="javascript:" class="ctrl-slide ck-prev">上一张</a> <a href="javascript:" class="ctrl-slide ck-next">下一张</a>

<div class="ck-slidebox">

<div class="slideWrap">

<ul class="dot-wrap">

<li><em>国考明起报名招2.7万人 首次仅面向体制外招录</em></li>
<li><em>中关村“变形记”：从电子卖场到7.2公里的创业大街</em></li>
<li><em>金星大聊两性话题 辣评娱乐圈男星：没我想睡的</em></li>

</ul>

</div>

</div>

</div>

<!--图片轮播结束-->
<!-- 代码 结束 -->
<script>

$('.ck-slide').ckSlide({

autoPlay: true
});

</script>

</body>
</html>

Ⅷ JS简单的轮播图​，像图片这种怎么做

如果你想要上下同时切换的方法也很简单，只要你定ID的时候有点规律就好了，例如img1和imgs1，function asd(target){
document.getElementById("img"+target).style.display="none";
document.getElementById("imgs"+target).style.display="none";
}
那么只要target传入图片序号如：1；那么就可以实现两张图片同时隐藏显示了；

Ⅸ 简单的HTML+js图片轮播

h5代码：

<div id="wrap">
<ul id="list">
<li>10</li>
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>

<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
</ul>
</div>

css代码：

<style type="text/css">
@-webkit-keyframes move{
0%{left:-500px;}
100%{left:0;}
}
#wrap{width:600px;height:130px;border:1px solid #000;position:relative;margin:100px auto;
overflow: hidden;}

#list{position:absolute;left:0;top:0;padding:0;margin:0;
-webkit-animation:5s move infinite linear;width:200%;}

#list li{list-style:none;width:120px;height:130px;border:1px solid red;background: pink;
color:#fff;text-align: center;float:left;font:normal 50px/2.5em '微软雅黑';}

#wrap:hover #list{-webkit-animation-play-state:paused;}
</style>

(9)js简单的图片轮播扩展阅读：

轮播图就是一种网站在介绍自己的主打产品或重要信息的传播方式。说的简单点就是将承载着重要信息的几张图片，在网页的某一部位进行轮流的呈现，从而做到让浏览者很快的了解到网站想要表达的主要信息。以及各种新闻网站的头版头条都是用这种方式呈现的重要信息。

轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为1024px、高度为512px.那么轮播的窗口大小就应该为一张图片的尺寸，即为：1024×512。之后将这5张图片0px水平相接组成一张宽度为：5120px,高度依然为：512px。最后将这张合成后的大图每次向左移动1024px即可实现轮播图。

Ⅹ js实现左右切换轮播图思路

我们在 CSS 阶段就已经接触到轮播图。通过轮播图我们可以达到一些好玩的特效，但使用 CSS 做出来的轮播图只有左右切换，渐变切换和简单的点击切换。局限性较大，观看效果也不佳。但当我们接触 js 之后，你就发现使用js来实现轮播图后，在看CSS实现轮播的效果就是...。我想说啥你知道的。废话不多说，咱们一起看看如何使用js来实现轮播效果。

（本文以阴阳师中“平安世界”模块的轮播图为例）

这个轮播图，我们通过两大模块构成；左右点击模块和姓名点击模块。然后在两者相关联来达到最终的效果。

在使用js实现轮播图的效果前，先使用HTML和CSS完善这一模块的布局。

本轮播图使用8张图片。每次出现两张。我们在使用HTML和CSS布局时可以先把第一组的两张图片放好位置。其他的放在两边隐藏起来。需要使用的时候在出现移动到中间。

左右点击切换模块：

我们通过对左右按钮进行点击监听。在点击后做出反应。左右点击的思路一样。我们先说一下右边按钮点击事件。

当我们点击右边按钮后，我们通过对点击次数进行累计。此处我使用初始化常量然后累加最后通过判断来达到循环效果

对每一张图片进行编码，以此来达到循环切换图片的效果。在切换图片时，我们可以使用排他思想。当点击按钮切换下一张图片的时候，我们可以先遍历所有的图片，把所有的图片移动到两边，然后将要移动的图片移动到中央来达到切换效果

在移动的过程中的动画和定时器设置的延迟可以自己添加一下。

左边按钮的原理和右边一样反操作即可。注意常量要使用一个。否则两个按钮都只能单方向运动，可能还会出现其他问题。

本次现讲一下左右切换的思路。