2017-03-13

今天把轮播图的知识1过了一下，写了一个比较简单的轮播图，给大家参考一下。

查看具体的效果点击这个链接 ： http://gjhnstxu.me/%E8%BD%AE%E6%92%AD%E5%9B%BE/html/demo.html

html代码：

轮播图

　　　　　　//要自己修改一下路径

　　　　　　　//要自己修改一下路径

js代码：

var i=0;

var timer;

$(function(){

// $("#igs").hover(function(){

// $(".btn").show();

// },function(){

// $(".btn").hide();

// })

$(".ig").eq(0).show().siblings().hide();

ShowTime();

$(".tab").hover(function(){

i = $(this).index();

Show();

clearInterval(timer);//清除轮播

},function(){

ShowTime();

})

$(".btn1").click(function(){

clearInterval(timer);

if (i == 0) {

i = 6;

}

i--;

Show();

ShowTime();

})

$(".btn2").click(function(){

clearInterval(timer);

if(i == 5){

i = -1;

}

i++;

Show();

ShowTime();

})

});

function Show(){

$(".ig").eq(i).fadeIn(300).siblings().fadeOut(300);

$(".tab").eq(i).addClass("bg").siblings().removeClass("bg");

}

function ShowTime(){

timer = setInterval(function(){

i++;

if (i == 6) {

i =0;

}

Show();

},2000);

}

css代码：

*{

padding: 0px;

margin: 0px;

}

.ig{

position: absolute;

}

.btn{

position: absolute;

height: 130px;

width: 80px;

background:rgba(0,0,0,0.4);

color: #fff;

text-align: center;

line-height: 130px;

font-size: 70px;

top: 175px;

cursor: pointer;/*放上鼠标变成一个手的形状*/

/*display: none;*/

}

.btn2{

left: 1100px;

}

#tabs{

position: absolute;

top: 420px;

left: 475px;

}

.tab{

width: 30px;

height: 30px;

background-color: #5388e8;

float: left;

margin-right: 10px;

text-align: center;

line-height: 30px;

color: #fff;

cursor: pointer;

border-radius: 100%;/*将方形变成圆形*/

}

.bg{

background-color: red;

}

好了，这样就可以了，记得自己修改一下css和js的路径。

原生js焦点轮播图

原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

原生js实现轮播图

原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...

js实现轮播图效果(附源码)--原生js的应用

1.js实现轮播图效果

js实现轮播图