本文出自汗血宝马，转载时请注明出处及相应链接。
本文永久链接: http://www.caotama.com/49355.html
Ɣ回顶部基于Swiper实现移动端页面图片轮播效果
转载 &更新时间：日 10:51:26 & 作者：sunshine_hl
这篇文章主要为大家详细介绍了基于Swiper实现移动端页面图片轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用Swiper开发移动端页面，轻松实现图片的轮播。
1.主要包含模块：
swiper：指滑动、切换（整个滑动对象，有时特指滑块释放后仍然正向移动直到贴合边缘的过程（过渡））
container：指容器（swiper的容器里面包括滑动快（slide）的集合（wrapper）、分页器（pagination）、前进按钮等）
wrapper：指包含（触控的对象，可触摸区域，移动的块的集合，过渡时会随slide切换产生位移）
slider：指滑块（切换的块中的一个，可以包含文字、图片、html元素或另外一个swiper
pagination：指分页器（指示slide的数量和当前活动的slide）
active：指活动的，激活的（可视的（visible）slide是活动的，当可视slide不止一个时，默认最左边那个活动的）
callback：指回调函数（在某些情况下触发）
2.简单的轮播，如下所示：
&!DOCTYPE html&
&head lang="en"&
&meta charset="UTF-8"&
&title&&/title&
&link rel="stylesheet" href="swiper-3.2.7.min.css" rel="external nofollow" &
&script type="text/javascript" src="jquery-1.7.1.js"&&/script&
&script type="text/javascript" src="swiper-3.2.7.min.js"&&/script&
&div class="swiper-container"style="width: 38%;"&&!--swiper容器[可以随意更改该容器的样式--&
&div class="swiper-wrapper"&
&div class="swiper-slide"&&img src="Walks-poster.png"&&/div&
&div class="swiper-slide"&&img src="Walks-poster.png"&&/div&
&div class="swiper-slide"&&img src="Walks-poster.png"&&/div&
&div class="swiper-pagination" style="width: 100float: right"&&/div&&!--分页器--&、
&div class="swiper-button-prev"&&/div&&!--前进按钮--&
&div class="swiper-button-next"&&/div&&!--后退按钮--&
&script type="text/javascript"&
var mySwiper = new Swiper(".swiper-container",{
direction:"horizontal",/*横向滑动*/
loop:true,/*形成环路（即：可以从最后一张图跳转到第一张图*/
pagination:".swiper-pagination",/*分页器*/
prevButton:".swiper-button-prev",/*前进按钮*/
nextButton:".swiper-button-next",/*后退按钮*/
autoplay:3000/*每隔3秒自动播放*/
3.js中其他参数：
var mySwiper = new Swiper(".swiper-container",{
effect:"coverflow",/*轮播的效果：（1）fade:淡入淡出；（2）cube:立方体；（3）coverflow:立体照片*/
slidesPerView:3,/*网格分布：1为在容器区域出现一张图；2：在容器区域出现两张图；3：在容器区域出现三张图*/
centeredSlides:true,/*默认第一块居左，设置为true后则是居中显示*/
coverflow:{
rotate:30,/*3d旋转角度设置为30度*/
stretch:10,/*每个slide之间的拉伸值，值越大靠得越近*/
depth:60,/*位置深度，值越大离Z轴越远，看起来越小*/
modifier:2,
slideshadows:true/*开启阴影*/
注意：在使用swiper前，要引入swiper.css和swiper.js以及jQuery
具体可参考网址：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具路漫漫其修远兮，吾将上下而求索。
非常简单的图片轮播，自动轮播，按下和移动停止轮播，有点击事件
PictureCarousel
一个非常简单的图片轮播，可自动轮播，按下和移动停止轮播，外加点击事件，无限轮播，往左往右均可轮播。
使用方法：
1 . 设置你需要展示的图片资源及图片描述文字
/** 设置文字描述和图片数据 */
public void setTitlesAndImages(String[] titles, List&ImageView& imgs) {
this.titles =
this.mListDatas =
2 . 设置点击事件，点击图片进入需要展示的页面
/** 设置监听 */
public void setOnLunBoClickListener(OnLunBoClickListener onLunBoClickListener) {
this.onLunBoClickListener = onLunBoClickL
控制图片开始轮播和停止轮播
/** 开启自动轮播 */
public void startAutoScroll() {
if(!isScrolling){
getAutoScrollTask().start();
isScrolling = true;
/** 停止自动轮播 */
public void stopAutoScroll() {
if(isScrolling){
getAutoScrollTask().stop();
isScrolling = false;
4 . 使用例子：
public class MainActivity extends Activity {
int[] imgs = { R.drawable.img_0, R.drawable.img_1, R.drawable.img_2, R.drawable.img_3, R.drawable.img_4,
R.drawable.img_5 };
String[] titles = { "为", "梦", "想", "坚", "持", "呀" };
private PicsView mP
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
mPicsviewpager = (PicsView) findViewById(R.id.picsviewpager);
List&ImageView& imgList = new ArrayList&ImageView&();
for(int i = 0; i & imgs. i++){
ImageView iv = new ImageView(getApplicationContext());
iv.setScaleType(ScaleType.FIT_XY);
iv.setImageResource(imgs[i]);
imgList.add(iv);
mPicsviewpager.setTitlesAndImages(titles, imgList);
mPicsviewpager.setOnLunBoClickListener(new OnLunBoClickListener() {
public void clickLunbo(int position) {
System.out.println("点击有效");
Toast.makeText(MainActivity.this, "点击有效，位置为：" + position, Toast.LENGTH_SHORT).show();
protected void onPause() {
mPicsviewpager.stopAutoScroll();
super.onPause();
protected void onResume() {
mPicsviewpager.startAutoScroll();
super.onResume();
完整源码下载
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！js实现从左向右滑动式轮播图效果
转载 &更新时间：日 11:27:09 & 作者：艾新觉罗
这篇文章主要为大家详细介绍了js实现从左向右滑动式轮播图效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
轮播图就是让图片每隔几秒自动滑动，达到图片轮流播放的效果。轮播图从效果来说有滑动式的也有渐入式的，滑动式的轮播图就是图片从左向右滑入的效果，渐入式的轮播图就是图片根据透明度渐渐显示的效果，这里说的是实现第一种效果的方法。
相同大小的图片并成一列，但只显示其中一张图片，其余的隐藏，通过修改left值来改变显示的图片。
　　nav为总容器，第一个ul列表#index为小圆点列表，鼠标覆盖哪个小圆点就显现第几张图片，on是一个给小圆点添加背景颜色属性的类；第二个ul列表#img为图片列表。
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Carousel Figure&/title&
&link rel="stylesheet" href="style.css" rel="external nofollow" &
&!--从左向右滑动--&
&ul id="index"&
&li class="on"&&/li&
&ul id="img"&
&li&&img src="../images/img1.jpg" alt="img1"&&/li&
&li&&img src="../images/img2.jpg" alt="img2"&&/li&
&li&&img src="../images/img3.jpg" alt="img3"&&/li&
&li&&img src="../images/img4.jpg" alt="img4"&&/li&
&li&&img src="../images/img5.jpg" alt="img5"&&/li&
&script src="script.js"&&/script&
图片尺寸均为720*405，这里需要注意以下几点：
ul#img列表相对于nav是绝对定位的，#img的长度必须设置为所有图片的总宽度，这样图片才可以并列一排显示；
总容器nav的宽度必须设置为图片的宽度720px,即只能显示一张图片，超出宽度的部分隐藏，即overflow: hidden；
小圆点列表应该在图片列表上面显示，故设置#img的z-index：-1；
小圆点列表是由一系列的li通过改变边框样式构成，故只需改变背景颜色即可达到移动小圆点的效果。
padding:0;
width: 720
height: 405
bottom: 20
#index li{
border: solid 1
border-radius: 100%;
background-color: #
display: inline-
width: 3600/*不给宽高无法移动*/
height: 405
position:/*不定义absolute，js无法设置left和top*/
z-index: -1;
width: 720
height: 405
#index .on{
background-color:
图片移动函数moveElement()
　　moveElement函数需要获取图片现在的位置以及目标位置并计算它们之间的差距进行移动，可以用offsetLeft和offsetTop获取图片现在的位置。图片移动时“划过”的效果是将距离分成好10次进行移动，即利用setTimeOut函数，然而为了防止鼠标悬停，需调用clearTimeout()函数，代码如下：
function moveElement(ele,x_final,y_final,interval){//ele为元素对象
var x_pos=ele.offsetL
var y_pos=ele.offsetT
var dist=0;
if(ele.movement){//防止悬停
clearTimeout(ele.movement);
if(x_pos==x_final&&y_pos==y_final){//先判断是否需要移动
dist=Math.ceil(Math.abs(x_final-x_pos)/10);//分10次移动完成
x_pos = x_pos&x_final ? x_pos+dist : x_pos-
dist=Math.ceil(Math.abs(y_final-y_pos)/10);//分10次移动完成
y_pos = y_pos&y_final ? y_pos+dist : y_pos-
ele.style.left=x_pos+'px';
ele.style.top=y_pos+'px';
ele.movement=setTimeout(function(){//分10次移动，自调用10次
moveElement(ele,x_final,y_final,interval);
},interval)
小圆点移动函数moveIndex()
　　移动小圆点的实质是移动设置的背景颜色的类on，原理是先判断哪个li上有背景颜色，有则去掉，让所有的li都没有背景，然后在对当前的li添加背景。
function moveIndex(list,num){//移动小圆点
for(var i=0;i&list.i++){
if(list[i].className=='on'){//清除li的背景样式
list[i].className='';
list[num].className='on';
图片自动轮播
　　将以下代码直接写在window.onload中即可。
　　这里需要定义一个变量index，表示移动到第index（0~n-1，n为li的个数）张图片。
var img=document.getElementById('img');
var list=document.getElementById('index').getElementsByTagName('li');
var index=0;//这里定义index是变量，不是属性
var nextMove=function(){//一直向右移动，最后一个之后返回
if(index&=list.length){
moveIndex(list,index);
moveElement(img,-720*index,0,20);
图片的自动轮播需要用到setInterval()函数，让程序每隔几秒自动调用nextMove()函数：
var play=function(){
timer=setInterval(function(){
nextMove();
鼠标覆盖小圆点效果
　　要实现鼠标覆盖哪个小圆点，就呈现出对应的图片这一效果，需要知道鼠标覆盖的是哪个小圆点，这里给每个li都添加一个自定的属性index，使该属性的值为对应的小圆点的序号i(0~n-1，n为li的个数)，这样每次鼠标覆盖时只需获取index属性的值即可知道鼠标覆盖的是哪个小圆点。注意，该index属性和变量index没有丝毫的关系，只有相同的名字。
for(var i=0;i&list.i++){//鼠标覆盖上哪个小圆圈，图片就移动到哪个小圆圈，并停止
list[i].index=i;//这里是设置index属性，和index变量没有任何联系
list[i].onmouseover= function () {
var clickIndex=parseInt(this.index);
moveElement(img,-720*clickIndex,0,20);
index=clickI
moveIndex(list,index);
clearInterval(timer);
list[i].onmouseout= function () {//移开后继续轮播
　　轮播图的实现并不复杂，主要在于将图片的移动行为和小圆点的移动行为分开，这样就比较容易实现。这个轮播图其实还是有点问题的，从最后一幅图滑向第一个时滑动的距离较长，其实也很好解决，将滑动的方式改一下，这里是根据-720*index来计算最终的left值，而index是将图片的移动和小圆点的移动绑到一起，将滑动方式改成现在的offsetLeft+（-720），图片的移动就可以与index值无关，然后在html文件增加一幅图片：
&li&&img src="../images/img1.jpg" alt="img1"&&/li&
&li&&img src="../images/img2.jpg" alt="img2"&&/li&
&li&&img src="../images/img3.jpg" alt="img3"&&/li&
&li&&img src="../images/img4.jpg" alt="img4"&&/li&
&li&&img src="../images/img5.jpg" alt="img5"&&/li&
&li&&img src="../images/img1.jpg" alt="img1"&&/li&
然后在滑到最后一幅图片时，迅速的将偏移量赋值0，变成第一幅，两幅图一样，无法分辨其中变化，即可达到无缝连接。
if(x_pos==-3600){
ele.style.left='0';
ele.style.top='0';
ele.style.left=x_pos+'px';
ele.style.top=y_pos+'px';
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具新人专享好礼凡未购买过小册的用户，均可领取三张 5 折新人专享券，购买小册时自动使用专享券，最高可节省 45 元。小册新人 5 折券最高可省 15 元小册新人 5 折券最高可省 15 元小册新人 5 折券最高可省 15 元注：专享券的使用期限在领券的七天内。一键领取购买小册时自动使用专享券前往小册首页本活动仅适用于小册新用户知道了十五分钟用 JavaScript 基础写一个图片轮播效果 + 思路详解原文链接：
轮播图的基本样式
这次也是一个适合JavaScript初学者的小练手，用JavaScript的基本知识去写一个轮播图，其实轮播图有很多方法去实现，像用一些框架，Bootstrap之类的，或者CSS3都可以轻松做出漂亮的轮播图，这次去用JavaScript实现，主要是为了锻炼自己使用Js的能力，代码非常简单，我会先放出HTML和CSS部分，最后详细讲解Js部分，还是那句话，重要的是思路，希望Js的初学者可以跟着我动手敲一敲，绝对对自己的能力有提升！完整代码也放在GitHub上了，链接在最后。
效果演示：卡顿是因为GIF图片压缩了，损失了帧数
class="main_div"&
class="arrows"&
title="1" class="arrow"&&
title="0" class="arrow" style="float: right"&&&
class="ul_img"&
class="li_img"&&
class="li_img"&&
class="li_img"&&
class="li_img"&&
style="margin-left: 600px"&
class="div_btn"&&
class="div_btn"&&
class="div_btn"&&
class="div_btn"&&
整个HTML非常简单，分三部分，第一部分就是四张图片，第二部分就是左右方向键，第三部分就是底部的四个圆角矩形，没什么说的，为了简化代码，都是最简单的。
width: 100%;
width: 800px;
list-style:
width: 6000px;
padding: 0px;
margin: 0px;
transition: all 2s;
.main_div {
width: 800px;
top: 100px;
left: 350px;
z-index: 9999;
padding-top: 230px;
width: 800px;
font-size: 3em;
.arrows :hover {
background-color: rgba(192, 192, 192, 0.29);
.div_btn {
border-radius: 100px;
background-color:
width: 60px;
height: 10px;
margin-left: 10px;
margin-top: 130px;
.div_btn:hover {
background-color:
CSS部分也是尽量简洁，没有设置太花哨的样式，随意设置了一下，各位可以自己发挥，主要为了写JavaScript……唯一要注意的就是我为.li_img设置了一个transition。由于是用固定像素设置的宽高，所以不同浏览器可能会显示样式有所区别，不影响功能就是了，这里我使用调试的浏览器是Chrome和Firefox
请先不要直接看这部分代码，先看我的思路讲解再看这部分，你绝对可以轻松理解 &
var count = 0;
var isgo = false;
window.onload = function () {
var ul_img = document.getElementsByClassName("ul_img")[0];
var li_img = document.getElementsByClassName("li_img");
var arrow = document.getElementsByClassName("arrow");
var div_btn = document.getElementsByClassName("div_btn");
div_btn[0].style.backgroundColor = "aqua";
showtime();
function showtime() {
timer = setInterval(function () {
if (isgo == false) {
ul_img.style.transform = "translate(" + -800 * count + "px)";
if (count &= li_img.length - 1) {
count = li_img.length - 1;
isgo = true;
ul_img.style.transform = "translate(" + -800 * count + "px)";
if (count &= 0) {
count = 0;
isgo = false;
for (var i = 0; i & div_btn. i++) {
div_btn[i].style.backgroundColor = "aquamarine";
div_btn[count].style.backgroundColor = "aqua";
for (var i = 0; i & arrow. i++) {
arrow[i].onmouseover = function () {
clearInterval(timer);
arrow[i].onmouseout = function () {
showtime();
arrow[i].onclick = function () {
if (this.title == 0) {
if (count & 3) {
count = 0;
if (count & 0) {
count = 3;
ul_img.style.transform = "translate(" + -800 * count + "px)";
for (var i = 0; i & div_btn. i++) {
div_btn[i].style.backgroundColor = "aquamarine";
div_btn[count].style.backgroundColor = "aqua";
for (var b = 0; b & div_btn. b++) {
div_btn[b].index =
div_btn[b].onmouseover = function () {
clearInterval(timer);
for (var a = 0; a & div_btn. a++) {
div_btn[a].style.backgroundColor = "aquamarine";
div_btn[this.index].style.backgroundColor = "aqua";
if (this.index == 3) {
isgo = true;
if (this.index == 0) {
isgo = false;
count = this.
ul_img.style.transform = "translate(" + -800 * this.index + "px)";
div_btn[b].onmouseout = function () {
showtime();
首先，在思考这个轮播图怎么去实现的时候，请先考虑要为这个轮播图设置什么样的功能，我设定的有三个功能：
在明确了功能之后，接下来依次解决不就行了，好，我们看第一个问题，怎么实现图片可以自动右向轮播，轮播至最后一张图片的时候，反向向左轮播，循环反复呢？没错，使用定时器setTimeout()或者setInterval()可以轻松解决，在这里我就使用setInterval()，如果有不太了解的，请点这里。好了，接下是第一部分功能的代码思路：
要想让图片自动轮播，我们首先去设定一个函数showtime()，当然写完了这个函数，我们的第一个功能也就完成了，好的，那我就开始写了……
好吧，当然不能直接写了，首先你得思考，既然图片一开始向右轮播，你总得先设定一个方向吧，然后再考虑，还得设定一个跑动的次数，比如初始位置为第一张图片，我要向右跑动3次，就可以到达第四张图片，然后还要设定一个定时器对象，用处以后会说到，这几个必须是全局变量，所以必须在一开始就声明：
var count = 0;
var isgo =
var timer;
然后可以开写了，当然要先获取图片元素：
var ul_img = document.getElementsByClassName("ul_img")[0];
var li_img = document.getElementsByClassName("li_img");
好的，准备工作到此结束，图片轮播的原理就是图片排成一行，然后准备一个只有一张图片大小的容器，对这个容器设置超出部分隐藏，在控制定时器来让这些图片整体左移或右移，这样呈现出来的效果就是图片在轮播了，我们这里先function一个showtime()函数，并在里边添加一个定时器来为控制图片轮播做准备：
function showtime() {
timer = setInterval(function (){ }, 4000);
在上面，我定义了每次延迟4000毫秒（即4秒）来执行一次setInterval()里的匿名函数function(){ }，是为了尽可能的让轮播效果不至于太快。然后我在匿名函数function(){ }加入以下三行代码：
function showtime() {
timer = setInterval(function (){
if (isgo == false) {
ul_img.style.transform = "translate(" + -800 * count + "px)";
记得之前我们声明了isgo全局变量,并为它赋值为布尔值false吗？这里if判断语句会直接成立，if中的语句会让count加一，并为ul_img设置了style样式，让ul_img整体（即四张图片整体的ul）向左移动800px，（因为在CSS中为图片设置了width为800px），所以以上语句会控制图片集体向左推入800px的距离，让第二张图片进入到显示容器中，、（在此之前第二三四张图片都是隐藏的，因为我设置了超出部分隐藏），所以此时轮播图的状态是第二张图片显示，第一三四张图片隐藏，然后每隔4秒就会重复上述过程，然后这样就实现了轮播……吗？
很快你就会发现问题，那就是当向左移动了三次（即count = 3时），显示的是第四张图片，这没问题对吧，但是再过4秒，可就不妙了，你会发现图片再往左移（即 count = 4时），妈蛋！没图了！显示的是空白，怎么解决呢？hin简单！加一个if判断语句不就行了！
function showtime() {
timer = setInterval(function (){
if (isgo == false) {
ul_img.style.transform = "translate(" + -800 * count + "px)";
if (count &= li_img.length - 1) {
count = li_img.length - 1;
isgo = true;
以上代码，我加了一个判断语句，在count大于等于li.img.length-1（即count &= 3）时，禁止count再自增，同时改变isgo的值，让轮播图开始反向滚动，所以就会在增加一个else来描述isgo=true的情况：
function showtime() {
timer = setInterval(function (){
if (isgo == false) {
ul_img.style.transform = "translate(" + -800 * count + "px)";
if (count &= li_img.length - 1) {
count = li_img.length - 1;
isgo = true;
ul_img.style.transform = "translate(" + -800 * count + "px)";
if (count &= 0) {
count = 0;
isgo = false;
showtime()；
else的情况就是控制图片反向轮播，所以以上代码很好理解，就是count--，并且在count &= 0时，为isgo重新设置false，让图片再正向轮播，循环往复，最后再调用showtime()函数，第一个功能到此为止就完全实现了！
第二个功能我们要添加鼠标进入左右两个方向键的操作，首先获取左右两个方向键。
var arrow = document.getElementsByClassName("arrow");
好了，由于方向键有两个，所以我们要来用for循环来为它们绑定事件：
for (var i = 0; i & arrow. i++) {
arrow[i].onmouseover = function () {
clearInterval(timer);
arrow[i].onmouseout = function () {
showtime();
以上四条语句为方向键绑定了两个事件，鼠标悬停时，我们利用clearInteral()来终止定时器，这就是前面我们把timer要声明为全局变量的原因，便于我们可以在想停止定时器的时候停止它。接下来我们为方向键添加onclick事件，以便我们可以通过其控制方向：
for (var i = 0; i & arrow. i++) {
arrow[i].onmouseover = function () {
clearInterval(timer);
arrow[i].onmouseout = function () {
showtime();
arrow[i].onclick = function () {
if (this.title == 0) {
if (count & 3) {
count = 0;
if (count & 0) {
count = 3;
ul_img.style.transform = "translate(" + -800 * count + "px)";
不知道大家注意到了没有，我在之前HTML中为左右方向键分别设置了title值：0和1；所以这里直接用title值来区分左右，为右方向键我们执行count++；为左方向键我们执行count--；同时也考虑到count&3和count&0的情况，这些之前提到过，这里不再赘述，到此为止，第二部分的功能也实现了，很简单吧
鼠标悬停在底部圆角矩形的操作，同样的道理，首先获取四个圆角矩形，然后用for循环为它们绑定事件：
var div_btn = document.getElementsByClassName("div_btn");
div_btn[0].style.backgroundColor = "aqua";
for (var b = 0; b & div_btn. b++) {
div_btn[b].index =
div_btn[b].onmouseover = function () {}
div_btn[b].onmouseout = function () {}
有的同学可能不太懂div_btn[b].index =这条语句干什么的用的，关于这个问题，涉及到循环绑定的一个坑，请大家看这篇文章
好，接下来我们先写鼠标悬停事件：
div_btn[b].onmouseover = function () {
clearInterval(timer);
for (var a = 0; a & div_btn. a++) {
div_btn[a].style.backgroundColor = "aquamarine";
div_btn[this.index].style.backgroundColor = "aqua";
if (this.index == 3) {
isgo = true;
if (this.index == 0) {
isgo = false;
count = this.index;
ul_img.style.transform = "translate(" + -800 * this.index + "px)";
有了之前的基础，我在讲鼠标悬停事件的时候，各位应该就更容易理解了，我首先在鼠标悬停时用 clearInterval(timer);来停止定时器，然后为每个圆角矩形都加上颜色，并且为悬停的圆角矩形变色，之后考虑到了大于三和小于零的情况，再之后，我把当前的index属性值赋给count，让用户可以通过悬停底部圆角矩形来选择看第几张图片。
最后再加上鼠标离开事件：
div_btn[b].onmouseout = function () {
showtime();
大功告成！！！至此所有功能写完。其实最后还有一步就是：
for (var a = 0
div_btn[a].style.backgroundColor = "aquamarine"
div_btn[count].style.backgroundColor = "aqua"
将以上代码，添加到功能一和功能二的代码里，目的是，让图片自动轮播和控制左右方向键时，底部圆角矩形也能随之变色。以下是源码，放在Github上了：
最后再放一遍完整的JS代码： &
var count = 0;
var isgo = false;
window.onload = function () {
var ul_img = document.getElementsByClassName("ul_img")[0];
var li_img = document.getElementsByClassName("li_img");
var arrow = document.getElementsByClassName("arrow");
var div_btn = document.getElementsByClassName("div_btn");
div_btn[0].style.backgroundColor = "aqua";
showtime();
function showtime() {
timer = setInterval(function () {
if (isgo == false) {
ul_img.style.transform = "translate(" + -800 * count + "px)";
if (count &= li_img.length - 1) {
count = li_img.length - 1;
isgo = true;
ul_img.style.transform = "translate(" + -800 * count + "px)";
if (count &= 0) {
count = 0;
isgo = false;
for (var i = 0; i & div_btn. i++) {
div_btn[i].style.backgroundColor = "aquamarine";
div_btn[count].style.backgroundColor = "aqua";
for (var i = 0; i & arrow. i++) {
arrow[i].onmouseover = function () {
clearInterval(timer);
arrow[i].onmouseout = function () {
showtime();
arrow[i].onclick = function () {
if (this.title == 0) {
if (count & 3) {
count = 0;
if (count & 0) {
count = 3;
ul_img.style.transform = "translate(" + -800 * count + "px)";
for (var i = 0; i & div_btn. i++) {
div_btn[i].style.backgroundColor = "aquamarine";
div_btn[count].style.backgroundColor = "aqua";
for (var b = 0; b & div_btn. b++) {
div_btn[b].index =
div_btn[b].onmouseover = function () {
clearInterval(timer);
for (var a = 0; a & div_btn. a++) {
div_btn[a].style.backgroundColor = "aquamarine";
div_btn[this.index].style.backgroundColor = "aqua";
if (this.index == 3) {
isgo = true;
if (this.index == 0) {
isgo = false;
count = this.
ul_img.style.transform = "translate(" + -800 * this.index + "px)";
div_btn[b].onmouseout = function () {
showtime();
& 相关热门文章分享