【jquery】banner轮播图 完整版

css

*{margin:0;padding:0;}
img{display:block;}
.banner {width:250px;height:140px;margin:10% auto;overflow:hidden;position:relative;border:1px #000 solid}
.banner ul { position:absolute;left:0;top:0;z-index:100;}
.banner ul li { display:block;width:250px;height:140px;float:left;}
.banner .con { position:absolute; left:45%; bottom:3%;z-index:101; }
.banner .con a {
	float:left; margin-right:8px; display:block; width:8px; height:8px; 
	border-radius:100%; background:#000;z-index:101;}
.banner .con a.active { background:red;}
.banner .u { 
	width:20px;padding:10px 0;background:rgba(0,0,0,.5);
	display:none;color:#fff;text-align:center;cursor:pointer;}
.banner .left { position:absolute; top:25%;left:0;z-index:103;}
.banner .right { position:absolute; top:25%;right:0;z-index:103;}

html

<div class="banner">
	<ul>
		<li><img src="./images/3.jpg" /></li>
		<li><img src="./images/4.jpg" /></li>
		<li><img src="./images/3.jpg" /></li>
	</ul>
	<div class="con"></div>
	<div class="u left">上一页</div>
	<div class="u right">下一页</div>
</div>

js完整版【自动轮播、左右翻页、鼠标移停、点击切换】

var index = 0;
var imgnum = $('.banner ul li').length;//图片总个数
var nmun='';
var imgwidth = $('.banner ul li').width(); //计算单个图片的宽度
var allimgwidth = imgwidth*imgnum; //计算所有左浮动图片的宽度
$('.banner ul').css('width',allimgwidth); //设置ul宽度 
$('.banner').hover(function(){
    clearInterval(p);//鼠标移动上来停止轮播
    $('.banner .u').fadeIn();//显示两边切换按钮
},function(){
    pic();//鼠标移开继续轮播
    $('.banner .u').fadeOut();//隐藏两边按钮
});
   
//轮播切换图片的函数，
//思路就是通过定时器不停的改变index的值，
//然后乘以宽度就是总宽度
function pic(){
    p=setInterval(function(){
        index++; 
        if(index>=imgnum){
            index=0;
        }
        selectimg(index);  //选择对应的图片
    },1000);
}
function selectimg(index){
	$('.banner ul li').eq(index).fadeIn().siblings('.banner ul li').fadeOut(); //通过改变ul往左边的距离显示对应的图片
    // $('.banner ul').animate({'margin-left':'-' + imgwidth*index + 'px'},600);  
    $('.con a').eq(index).addClass('active').siblings('a').removeClass('active'); //切换图片并选择对应按钮
}
   
//点击左边的按钮选择对应的图片，往左切换图
$('.banner .left').click(function(){
    index-=1; 
    if(index<0){
       index=imgnum-1;
    }
    selectimg(index);
});
   
//点击左边的按钮选择对应的图片，往右切换图
$('.banner .right').click(function(){
    index+=1;
    if(index>imgnum-1){
       index=0;
    }
   selectimg(index);
});
   
//根据图片个数写入对应按钮的个数
for(var ni=0;ni<imgnum;ni++){
    nmun +="<a href='javascript:;'></a>";
}
$('.banner .con').html(nmun);
$('.banner .con a').eq(0).addClass('active');

//点击圆点选择对应的图片
$('.con a').each(function(i){
	$(this).click(function(){
		index = i;
		$('.banner ul').animate({'margin-left':'-' + imgwidth*i + 'px'},600);
		$('.con a').eq(index).addClass('active').siblings('a').removeClass('active');
	});
});   
//默认开始执行
pic();

javascript轮播

#main {
	width: 480px;
	height: 360px;
	margin: 50px auto;
	position: relative;
}
#but {
	width: 165px;
	height: 22px;
	position: absolute;
	right: 155px;
	bottom: 5px;
}
#but ul li {
	list-style-type: none;
	width: 22px;
	height: 22px;
	background: #ccc;
	border-radius: 11px;
	text-align: center;
	line-height: 22px;
	color: #fff;
	font-size: 12px;
	float: left;
	margin-right: 5px;
	cursor: pointer;
}
#left,#right {
	width: 25px;
	height: 40px;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 10px;
	text-align: center;
	line-height: 40px;
	font-weight: 900;
	font-size: 25px;
	color: #fff;
	position: absolute;
	top: 160px;
	cursor: pointer;
}
#left {left: 10px;}
#right {right: 10px;}
#main #but ul li.hover {background: #E4393c;}
<div id="main">
	<img src="img/0.jpg" id="img" />
	<div id="but">
		<ul>
			<li class="hover">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</div>
	<div id="left">&lt;</div>
	<div id="right">&gt;</div>
</div>
window.onload = function() {
	var oImg = document.getElementById('img');
	var but = document.getElementById('but');
	var oLi = but.getElementsByTagName('li');
	var left = document.getElementById("left");
	var right = document.getElementById("right");
	var num = 1;
	for (i = 0; i < oLi.length; i++) {
		oLi[i].index = i;
		oLi[i].onmouseover = function() {
			oImg.src = 'img/' + this.index + '.jpg';
			for (j = 0; j < oLi.length; j++) {
				oLi[j].className = "";
			}
			oLi[this.index].className = "hover";
		};
	};
	right.onclick = function() {
		if (num == 5) {
			num = 0;
		} else {
			num = num + 1;
		}
		oImg.src = "img/" + num + ".jpg";
		for (i = 0; i < oLi.length; i++) {
			oLi[i].className = "";
		}
		oLi[num].className = "hover";
	}
	left.onclick = function() {
		if (num == 0) {
			num = 5;
		} else {
			num = num - 1;
		}
		oImg.src = "img/" + num + ".jpg";
		for (i = 0; i < oLi.length; i++) {
			oLi[i].className = "";
		}
		oLi[num].className = "hover";
	}
};

使用：

<div class="v6bannertop"></div>


<script id="homeBanner" type="text/html">
	<div class="v6bannerbox" data-role="v6bannerbox">
		{{each data as item i}}
			{{if i == 0 }}
				{{if item.jumpurl != '' }}
					<a href="{{item.jumpurl}}" target="_blank" class="adv-bannerbox" style="display: block;" data-adid="{{item.adid}}" data-jumpurl="{{item.jumpurl}}">
				{{else}}
					<a href="#" class="adv-bannerbox" style="display: block;pointer-events: none;" data-adid="{{item.adid}}" data-jumpurl="{{item.jumpurl}}">
				{{/if}}
			{{else}}
				{{if item.jumpurl != '' }}
					<a href="{{item.jumpurl}}" target="_blank" class="adv-bannerbox" data-adid="{{item.adid}}" data-jumpurl="{{item.jumpurl}}">
				{{else}}
					<a href="#" class="adv-bannerbox" style="pointer-events: none;" data-adid="{{item.adid}}" data-jumpurl="{{item.jumpurl}}">
				{{/if}}
			{{/if}}
			<img src="{{item.images[0]['url']}}" class="adv-banner"/></a>	
		{{/each}}
	</div>
	<div class="squcirle">
		{{each data as item i}}
			{{if i == 0 }}
				<i class="active"></i>
			{{else}}
				<i ></i>
			{{/if}}
		{{/each}}
	</div>
</script>



//banner轮播
var _banner = 0;
var timeImg;
//自动轮播
function autoplayImg(lenImg){
    timeImg = setInterval(function(){
        _banner++; 
        if(_banner >= lenImg){
            _banner = 0;
        }
        selectimg(_banner);  //选择对应的图片
    },10000);
}
function selectimg(index){
	$('[data-role="v6bannerbox"] a').eq(index).show().siblings('[data-role="v6bannerbox"] a').hide(); 
    $('.squcirle i').eq(index).addClass('active').siblings().removeClass('active'); 
}
//圆点切换
$(document).on('click','.squcirle i',function(){
	_banner = $(this).index();
	$('[data-role="v6bannerbox"] a').eq(_banner).show().siblings().hide();
	$(".squcirle i").eq(_banner).addClass("active").siblings().removeClass("active");
})