html 原生态轮播图,html 轮播图

1、最近突然要做一个轮播图，原来做的一个demo轮播图不怎么适合，就百度了几篇轮播图的文章，最后找到一些 比较合适的js代码，就是这个：

$(".apl_home_layered ul li").eq(index).fadeIn(500).siblings().hide();

2、然后，自己就凑合的写了一个(记得引入图片路径)

轮播图

ul,li,img{border:0px;list-style-type: none;}

.apl_home_img_first{width: 800px; height: 600px;}

.home_slideshow{position:relative;}

.apl_home_layered ul li{display:none;}

.home_hoves{position:absolute;bottom:0;left:50%;transform: translate(-50%,0);}

.home_hover{cursor:pointer;position:relative;display:inline-block;width:12px;height:12px;margin:12px;border-radius:8px;background:#227FF;opacity:0.7;}

• 
• 
• 
• 

var index = 0;//标记

var time;//定时器

$(document).ready(function(){

var len=$(".apl_home_layered ul li").length;

//循环

function showstart(){

index++;

if(index == len){

index = 0;

}//加载到最后一张，重新开始

$(".apl_home_layered ul li").eq(index).fadeIn(500).siblings().hide();

var i = $(".home_hoves span").eq(index).css("background-color","#227FFE").siblings().css("background-color","#777");//得到该节点并设置背景样式，其它的兄弟节点设置背景样式

}

//定时

function action(){

time = setInterval(function(){showstart();}, 5000);//定时加载showstart()方法

}

//鼠标移入

$(".home_hoves span").mouseover(function(){

$(this).css("background-color","#227FFE").siblings().css("background-color","#777");

var s = $(this).index();

$(".apl_home_layered ul li").eq(s).fadeIn(500).siblings().hide();

//console.log(s);

clearInterval(time);//移除定时器

});

//鼠标移出

$(".home_hoves span").mouseout(function(){

action();//加载定时器

});

action();//初始化加载action()方法

});

3、之前的轮播图：(这个是原生的，没用到jQuery，记得引入图片路径)

轮播图

春天

夏天

秋天

冬天

var index = 0;

function showstart(){

var image = ["images/spring.jpg","images/summer.jpg","images/autumn.jpg","images/winter.jpg"];

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

a[0].src = image[index];

index++;

if(index == 4){

index = 0;

}

}

var time;

function start(){

time = setInterval("showstart()",1000);

}

function stop(i){

clearInterval(time);

index = i;

showstart();

}

4、拥有一个自己的主观思想，生活就很简单(生活不是学习，是调节)

生活中，有忧伤的就有快乐的，不外乎意识形态影响身体机能而带来的一系列生物反应，环境，身体周围的外部因素与个人自身意识形态有着紧密影响，所以，思想很重要；鸡汤很多也很好喝，关键汤里的鸡精也很多；对于自己，重要的是，自己要有自己鸡，煮出来的鸡汤才是最适合自己喝的。

如果有什么问题，可以留言评论哦！