本文主要和大家分享jq和css自制轮播效果代码，希望能帮助到大家。
html部分：
这是我定义的第一张图 这是我定义的第二张图 这是我定义的第三张图
css部分：
.banner1 {
width: 100%;
height: 4rem;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.imgbox1 {
height: 7.5rem;
position: absolute;
left: 0;
overflow: hidden;
background: #fff;
}
.imgbox1 img {
width: 100%;
float: left;
}.title1 {
width: 100%;
position: absolute;
bottom: 0px;
padding: .25rem .2rem;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.8);
}
.title1>span {
color: #000000;
display: block;
text-align: center;
}
.circle1 {
width: 1.5rem;
margin: .2rem auto 0;
}
.circle1 li {
width: .2rem;
height: .2rem;
margin: .1rem 5px;
cursor: pointer;
display: inline-block;
background: #CCCCCC;
border-radius: 50%;
}
.circle_active {
background: #575757 !important;
}js部分：
var imgindex=$('.imgbox1').find('a').index()
var titleindex=$('.title1').find('span').index();
$(window).ready(function(){
$('.title1').find('span').eq(0).show();
$('.title1').find('span').eq(0).siblings().hide();
})
$('.circle1').on('click','li',function(){
var circleindx=$(this).index();
imgindex=circleindx;
titleindex=circleindx;
$(this).addClass('circle_active');
$(this).siblings().removeClass('circle_active');
$('.imgbox1').find('a').eq(imgindex).show(300);
$('.imgbox1').find('a').eq(imgindex).siblings().hide();
$('.title1').find('span').eq(titleindex).show();
$('.title1').find('span').eq(titleindex).siblings().hide();
})
function autoplay(){
timer=setInterval(function(){
imgindex++;
var circles=$('.circle1').find('li');
if(imgindex>circles.length-1){
imgindex=0;
}
circles.eq(imgindex).trigger("click");
},2000);
}
autoplay()相关推荐：
react轮播图组件react-slider-light详解
追梦flash企业网站管理模板A系列11.0
下载
追梦A系列（11.0版本，以下11.0均简称为A）是针对企业网站定制设计的，模板采用全新AS3.0代码编辑，拥有更快的运行和加载速度，A系列模板主要针对图片展示，拥有简洁大气展示效果，并且可以自由扩展图片分类，同时还拥有三个独立页面介绍栏目，一个新闻栏目，一个服务介绍栏目，一个幻灯片展示和flv视频播放栏目。A系列模板对一些加载效果进行了修改，包括背景的拉伸模式以及标题的展示方式等都进行了调整，同
立即学习“前端免费学习笔记（深入）”；
