简洁大气的jQuery带有圆点的图片轮播特效，原创，非常实用，兼容ie8
index//点击圆点时，进行切换 $('#pic1 .focusBox li').click(function(){ index = $('#pic1 .focusBox li').index(this); showPic(index); }).eq(0).trigger('click'); $('#pic1 .sildebar').css("width",sWidth * (len));//定时器，定时进行切换 $('#pic1').hover(function(){ clearInterval(timer); },function(){ timer = setInterval(function(){ showPic(index); index++; if(index == len){index = 0;} },3000); }).trigger('mouseleave'); function showPic(index){ var nowLeft = -index * sWidth; $('#pic1 .sildebar').stop(true,false).animate({left:nowLeft},500); $('#pic1 .focusBox li').removeClass('cur').eq(index).addClass('cur'); //$('.sildebar li').eq(index).fadeIn(800).siblings().hide();//淡出淡入效果 }.pic{ position:relative; width:700px; height:300px; overflow:hidden; border:1px #ddd solid; margin:10px;}.pic .sildebar{ width:100%; position:absolute; top:0; height:298px;}.pic .sildebar li{ float:left; width:700px; overflow:hidden; height:100%;}img{border:none;}.focusBox { position: absolute; bottom: 20px; width: 120px; left: 50%; margin-left: -60px;}.focusBox li{ float:left; margin-right:10px; width:10px; height:10px; border-radius:10px; background:#fff; cursor:pointer;}.focusBox li.cur{ background:#f60; opacity:0.6; filter:alpha(opacity=60);}.btn-focus{ position:absolute; display:block; width:60px; height:30px; background-color:#000; opacity:0; filter:alpha(opacity=0); text-align: center; color:#fff; line-height:30px; text-decoration:none;}.prev{ left:2px; top:50%;}.next{ right:2px; top:50%;} ![简洁大气的jQuery带有圆点的图片轮播特效]()
在线演示
积分下载
6毛下载
砍两刀下载
文件目录······
