问题描述
- js新手跪求这个轮播图怎么自动轮播
-
<script type=""text/javascript""> var li_num; var total_li; var current = 0; var dots; $(document).ready(function () { $('.buttonfix').hover( function () { $('.buttonfix').css('background-position' 'top left'); } function () { $('.buttonfix').css('background-position' 'bottom left'); } ); total_li = $('.mediawindow div.item').size() - 1; dots = draw_dots($('.media') $('.mediawindow div.item')); update_dots(dots current); ArrowHide(current); $('a.media_left a.media_right').click(function () { if ($(this).html() == 'right') { //alert('left'); current++; if (current >= total_li) { current = total_li; } } else { //alert('right'); current--; if (current < 0) { current = 0; } } //alert(current); item_goto = $('.mediawindow div.item:eq(' + current + ')'); window_slide($('.mediawindow')); update_dots(dots current); ArrowHide(current); return false; }); $('ul.dots li').click(function () { current = $(this).html() - 1; item_goto = $('.mediawindow div.item:eq(' + current + ')'); window_slide($('.mediawindow')); update_dots(dots current); ArrowHide(current); return false; }); }); function ArrowHide(current) { $('.mediapanel a.media_right').css('display' 'block'); $('.mediapanel a.media_left').css('display' 'block'); if (current == total_li) { $('.mediapanel a.media_right').css('display' 'none'); } if (current == 0) { $('.mediapanel a.media_left').css('display' 'none'); } } function window_slide(window) { window.stop().scrollTo(item_goto 600 { easing: 'easeInOutQuad' }); } function draw_dots(container items) { var out = """"; var i = 1; out += '<ul class=""dots"">'; items.each(function () { out += ""<li>"" + i + ""</li>""; i++; }); out += '</ul>'; container.append(out); return container.find('ul.dots'); } function update_dots(dots currentposition) { dots.find('li').css({ backgroundPosition: 'left bottom' }); dots.find('li:eq(' + currentposition + ')').css({ backgroundPosition: 'left top' }); }</script>
解决方案
你可以添加一个函数块，在除了点击之外，实现自动轮播 $(document).ready(function () {
//这里就可以添加一个循环的函数，比如
setinterval（function（）{//这里可以相关代码}， time)
);
题主可以参考这个思路
解决方案二：
可以研究下，不会写也没事，可以网上找到各种案例
解决方案三：
用计时器执行你的轮换代码。
var lis = $('ul.dots li')liLength=lis.length; lis.click(function () { current = $(this).html() - 1; item_goto = $('.mediawindow div.item:eq(' + current + ')'); window_slide($('.mediawindow')); update_dots(dots current); ArrowHide(current); return false; }); setInterval(function () { current++; if (current >= liLength) current = 0; //重头开始 lis.eq(current).trigger('click');//触发点击事件进行切换 } 6000); //6s换一次，要改其他事件修改这个参数解决方案四：
这种东西为什么要自己写呢？ 网上一抓一大把
解决方案五：
$(function(){
PicEve();
})
var isumtext;
function PicEve(){
var $pic_li = $(""#pic li"");
var $btn = $(""#btn"");
sum = $pic_li.length;
text="""";
for( b=0; btext += """"
}
$btn.html(text)
$btn.find(""a"").each(function(bn){
$(n).attr(""index""b)
$(n).html(b+1)
})
$btn.find(""a"").eq(0).addClass(""cur"");
var Play = setInterval(PlayEve 2000);
$btn.find(""a"").click(function(){
$(this).attr(""name""1)
i=parseInt($(this).attr(""index""));
c=parseInt($(""#btn a[class='cur']"").attr(""index""));
if( i!=c ){
$btn.find(""a"").removeClass(""cur"");
$(this).addClass(""cur"");
}
clearInterval(Play);
})
$btn.find(""a"").mouseout(function(){
b=parseInt($(this).attr(""name""));
i=parseInt($(this).attr(""index""));
c=parseInt($(""#btn a[class='cur']"").attr(""index""));
if( i==c && b==1 ){
Play = setInterval(PlayEve 2000);
$(this).attr(""name""0)
}
})
}
function PlayEve(){
var $pic_li = $(""#pic li"");
var $btn = $(""#btn"");
i=parseInt($(""#btn a[class='cur']"").attr(""index""))
sum = $pic_li.length;
if( i < sum - 1){
$btn.find(""a"").eq(i).removeClass(""cur"");
$btn.find(""a"").eq(i+1).addClass(""cur"");
i++
}else if(i==sum-1){
$btn.find(""a"").eq(sum-1).removeClass(""cur"");
$btn.find(""a"").eq(0).addClass(""cur"");
i=0
}
}