-03-13
今天把轮播图的知识1过了一下，写了一个比较简单的轮播图，给大家参考一下。
查看具体的效果点击这个链接 ：http://gjhnstxu.me/%E8%BD%AE%E6%92%AD%E5%9B%BE/html/demo.html
html代码：
轮播图
//要自己修改一下路径
//要自己修改一下路径
<>123456
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实现轮播图
