Ⅰ 用jquery實現圖片輪播怎麼寫呢求指教
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
.slideShow{
width:620px;
height:700px;/*其實就是圖片的高度*/
border:1px#eeeeeesolid;
margin:100pxauto;
position:relative;
overflow:hidden;/*此處需要將溢出框架的圖片部分隱藏*/
}
.slideShowul{
width:2500px;
position:relative;/*此處需注意relative:對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置，如果沒有這個屬性，圖片將不可左右移動*/
}
.slideShowulli{
float:left;/*讓四張圖片左浮動，形成並排的橫著布局，方便點擊按鈕時的左移動*/
width:620px;
}
.slideShow.showNav{/*用絕對定位給數字按鈕進行布局*/
position:absolute;
right:10px;
bottom:5px;
text-align:center;
font-size:12px;
line-height:20px;
}
.slideShow.showNavspan{
cursor:pointer;
display:block;
float:left;
width:20px;
height:20px;
background:#ff5a28;
margin-left:2px;
color:#fff;
}
.slideShow.showNav.active{
background:#b63e1a;
}
js代碼規范：
<scriptsrc="../../../jQuery/js/jquery-2.1.4.js"></script><scripttype="text/javascript">
$(document).ready(function(){
varslideShow=$(".slideShow"),//獲取最外層框架的名稱
ul=slideShow.find("ul"),
showNumber=slideShow.find(".showNavspan"),//獲取按鈕
oneWidth=slideShow.find("ulli").eq(0).width();//獲取每個圖片的寬度
vartimer=null;//定時器返回值，主要用於關閉定時器
variNow=0;//iNow為正在展示的圖片索引值，當用戶打開網頁時首先顯示第一張圖，即索引值為0
showNumber.on("click",function(){//為每個按鈕綁定一個點擊事件
$(this).addClass("active").siblings().removeClass("active");//按鈕點擊時為這個按鈕添加高亮狀態，並且將其他按鈕高亮狀態去掉
varindex=$(this).index();//獲取哪個按鈕被點擊，也就是找到被點擊按鈕的索引值
iNow=index;
ul.animate({"left":-oneWidth*iNow,//注意此處用到left屬性，所以ul的樣式裡面需要設置position:relative;讓ul左移N個圖片大小的寬度，N根據被點擊的按鈕索引值iNOWx確定
})
});
functionautoplay(){
timer=setInterval(function(){//打開定時器
iNow++;//讓圖片的索引值次序加1，這樣就可以實現順序輪播圖片
if(iNow>showNumber.length-1){//當到達最後一張圖的時候，讓iNow賦值為第一張圖的索引值，輪播效果跳轉到第一張圖重新開始
iNow=0;}
showNumber.eq(iNow).trigger("click");//模擬觸發數字按鈕的click
},2000);//2000為輪播的時間
}
autoplay();
slideShow.hover(function(){clearInterval(timer);},autoplay);另外注意setInterval的用法比較關鍵。
})
</script>
主體代碼：
[html]viewplainprint?
<body>
<divclass="slideShow">
<!--圖片布局開始-->
<ul>
<li><ahref="#"><imgsrc="images/view/111.jpg"/></a></li>
<li><ahref="#"><imgsrc="images/view/112.jpg"/></a></li>
<li><ahref="#"><imgsrc="images/view/113.jpg"/></a></li>
<li><ahref="#"><imgsrc="images/view/114.jpg"/></a></li>
</ul>
<!--圖片布局結束-->
<!--按鈕布局開始-->
<divclass="showNav">
<spanclass="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<!--按鈕布局結束-->
</div>
</body>
Ⅱ 用JQuery實現一行多圖輪播，是單擊一下一張圖片輪播，不是一下一行圖片輪播，給個例子，跪求
<!doctypehtml>
<html>
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
*{padding:0;margin:0;}
ulli{list-style-type:none}
.gameTab{width:1100px;height:150px;overflow:hidden;margin:50pxauto;position:relative;}
.gameTabul{width:7680px;overflow:hidden;}
.gameTabul>li{width:220px;height:150px;float:left;text-align:center;}
.gameTabul>li:hover{opacity:0.5}
.prev,.next{position:absolute;top:50%;transform:translate(0,-50%);padding:5px;background:red;z-index:99;text-decoration:none;color:#fff;
}
.prev{left:0;}
.next{right:0;}
</style>
</head>
<body>
<div>
<ahref="javascript:;">前一張</a>
<ul>
<listyle="background:#CB2929">1111</li>
<listyle="background:#23C048">2222</li>
<listyle="background:#00ABEA">3333</li>
<listyle="background:#FF9800">4444</li>
<listyle="background:#F96B36">5555</li>
<listyle="background:#ADADAD">6666</li>
</ul>
<ahref="javascript:;">下一張</a>
</div>
<scriptsrc="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(function(){
//下一張
functionmoveLeft(){
$(".gameTabul").animate({marginLeft:"-220px"},300,function(){
$(".gameTabul").children().first().appendTo($(".gameTabul"));
$(".gameTabul").css('marginLeft','0px');
});
}
$('.next').click(moveLeft);
//前一張
$('.prev').click(function(){
$(".gameTabul").children().last().prependTo($(".gameTabul"));//把ul的最後一個子元素添加到開頭第一個
$(".gameTabul").css('marginLeft','-220px');//初始化把ul的marginleft左移220
$(".gameTabul").animate({marginLeft:"0px"},300);
})
//自動輪播
vartimer=setInterval(moveLeft,3000)
//hover時停掉定時器
$('.gameTab').mouseenter(function(){
clearTimeout(timer)
})
$('.gameTab').mouseleave(function(){
timer=setInterval(moveLeft,3000)
})
})
</script>
</body>
</html>
Ⅲ Jquery圖片輪播循環問題，求大神指教，怎麼實現循環播放
//js
varisround="";
vari=0;
$(function(){
isround=setTimeout("change()",3000);
$("div[name=ban]divimg:eq(0)").show().siblings().hide();
$(".numli:eq(0)").addClass("current").siblings().removeClass("current");
$(".numli").click(function(){
i=$(".numli").index(this);
$(this).addClass("current").siblings().removeClass("current");
$("div[name=ban]divimg").eq($(".numli").index(this)).show().siblings().hide();
isround=setTimeout("change()",3000);
}).hover(function(){
clearTimeout(isround)
},function(){
isround=setTimeout("change()",3000);
})
})
functionchange(){
if(i==$(".numli").length)i=0;
$(".numli").eq(i).addClass("current").siblings().removeClass("current");
$("div[name=ban]divimg").eq(i).show().siblings().hide();
i++;
setTimeout("change()",3000);
}
//html
<divname="ban">
<div>
<!--圖片-->
<imgsrc="/resources/images/f1.jpg"width="369px"height="114px"/>
<imgsrc="/resources/images/f2.jpg"width="369px"height="114px"/>
<imgsrc="/resources/images/f1.jpg"width="369px"height="114px"/>
<imgsrc="/resources/images/f2.jpg"width="369px"height="114px"/>
<imgsrc="/resources/images/f1.jpg"width="369px"height="114px"/>
</div>
<divclass="numbox">
<!--選項-->
<ulclass="num">
<liclass="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
不懂再問，這是我自己寫的一個輪換，裡麵包括了點擊事件，原理是控制圖片的顯示隱藏，
別的有控制高度等等之類的 。
Ⅳ jquery圖片輪播思路
使用jQuery做輪播圖是網頁特效中很常見的一個特效。
工具原料：編輯器、瀏覽器、jQuery
1、實現的總體思路：
首先是初始化部分：將除了第一張輪播圖片意外的圖片都隱藏，並且隱藏向前、向後按鈕，使第一個索引按鈕處於激活狀態。
2、實現的具體事件處理思路：
事件部分：通過jquery的hover()綁定滑鼠上懸以及離開時的事件處理， jquery的bind()方法綁定滑鼠點擊事件處理向前、向後翻動、輪播控制：pre(), next(), play(), start()開始自動輪播，stop()停止自動輪播。
3、簡單的代碼示例如下：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>jquery輪播效果圖</title>
<scripttype="text/javascript"src="scripts/jquery-1.9.1.js"></script>
<styletype="text/css">
*{
padding:0px;
margin:0px;
}
a{
text-decoration:none;
}
ul{
list-style:outsidenonenone;
}
.slider,.slider-panelimg,.slider-extra{
width:650px;
height:413px;
}
.slider{
text-align:center;
margin:30pxauto;
position:relative;
}
.slider-panel,.slider-nav,.slider-pre,.slider-next{
position:absolute;
z-index:8;
}
.slider-panel{
position:absolute;
}
.slider-panelimg{
border:none;
}
.slider-extra{
position:relative;
}
.slider-nav{
margin-left:-51px;
position:absolute;
left:50%;
bottom:4px;
}
.slider-navli{
background:#3e3e3e;
border-radius:50%;
color:#fff;
cursor:pointer;
margin:02px;
overflow:hidden;
text-align:center;
display:inline-block;
height:18px;
line-height:18px;
width:18px;
}
.slider-nav.slider-item-selected{
background:blue;
}
.slider-pagea{
background:rgba(0,0,0,0.2);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
color:#fff;
text-align:center;
display:block;
font-family:"simsun";
font-size:22px;
width:28px;
height:62px;
line-height:62px;
margin-top:-31px;
position:absolute;
top:50%;
}
.slider-pagea:HOVER{
background:rgba(0,0,0,0.4);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
}
.slider-next{
left:100%;
margin-left:-28px;
}
</style>
<scripttype="text/javascript">
$(document).ready(function(){
varlength,
currentIndex=0,
interval,
hasStarted=false,//是否已經開始輪播
t=3000;//輪播時間間隔
length=$('.slider-panel').length;
//將除了第一張圖片隱藏
$('.slider-panel:not(:first)').hide();
//將第一個slider-item設為激活狀態
$('.slider-item:first').addClass('slider-item-selected');
//隱藏向前、向後翻按鈕
$('.slider-page').hide();
//滑鼠上懸時顯示向前、向後翻按鈕,停止滑動，滑鼠離開時隱藏向前、向後翻按鈕，開始滑動
$('.slider-panel,.slider-pre,.slider-next').hover(function(){
stop();
$('.slider-page').show();
},function(){
$('.slider-page').hide();
start();
});
$('.slider-item').hover(function(e){
stop();
varpreIndex=$(".slider-item").filter(".slider-item-selected").index();
currentIndex=$(this).index();
play(preIndex,currentIndex);
},function(){
start();
});
$('.slider-pre').unbind('click');
$('.slider-pre').bind('click',function(){
pre();
});
$('.slider-next').unbind('click');
$('.slider-next').bind('click',function(){
next();
});
/**
*向前翻頁
*/
functionpre(){
varpreIndex=currentIndex;
currentIndex=(--currentIndex+length)%length;
play(preIndex,currentIndex);
}
/**
*向後翻頁
*/
functionnext(){
varpreIndex=currentIndex;
currentIndex=++currentIndex%length;
play(preIndex,currentIndex);
}
/**
*從preIndex頁翻到currentIndex頁
*preIndex整數，翻頁的起始頁
*currentIndex整數，翻到的那頁
*/
functionplay(preIndex,currentIndex){
$('.slider-panel').eq(preIndex).fadeOut(500)
.parent().children().eq(currentIndex).fadeIn(1000);
$('.slider-item').removeClass('slider-item-selected');
$('.slider-item').eq(currentIndex).addClass('slider-item-selected');
}
/**
*開始輪播
*/
functionstart(){
if(!hasStarted){
hasStarted=true;
interval=setInterval(next,t);
}
}
/**
*停止輪播
*/
functionstop(){
clearInterval(interval);
hasStarted=false;
}
//開始輪播
start();
});
</script>
</head>
<body>
<divclass="slider">
<ulclass="slider-main">
<liclass="slider-panel">
<ahref="
title="圖片1"src="images/1.jpg"></a>
</li>
<liclass="slider-panel">
<ahref="#"><imgtitle="圖片2"src="images/1.jpg"></a>
</li>
<liclass="slider-panel">
<ahref="#"><imgtitle="圖片3"src="images/1.jpg"></a>
</li>
<liclass="slider-panel">
<ahref="#"><imgtitle="圖片4"src="images/1.jpg"></a>
</li>
</ul>
<divclass="slider-extra">
<ulclass="slider-nav">
<liclass="slider-item">1</li>
<liclass="slider-item">2</li>
<liclass="slider-item">3</li>
<liclass="slider-item">4</li>
</ul>
<divclass="slider-page">
<aclass="slider-pre"href="javascript:;;"><</a>
<aclass="slider-next"href="javascript:;;">></a>
</div>
</div>
</div>
</body>
</html>
Ⅳ jquery圖片上下輪播的問題，怎麼實現自動輪播
1、html部分
<body>
<divid="banner">
<divid="banner_bg"></div><!--標題背景-->
<divid="banner_info"></div><!--標題-->
<ul>
<liclass="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<divid="banner_list">
<ahref="#"target="_blank"><imgsrc="imgs/p1.jpg"title="橡樹小屋的blog"alt="橡樹小屋的blog"/></a>
<ahref="#"target="_blank"><imgsrc="imgs/p5.jpg"title="橡樹小屋的blog"alt="橡樹小屋的blog"/></a>
<ahref="#"target="_blank"><imgsrc="imgs/p3.jpg"title="橡樹小屋的blog"alt="橡樹小屋的blog"/></a>
<ahref="#"target="_blank"><imgsrc="imgs/p4.jpg"title="橡樹小屋的blog"alt="橡樹小屋的blog"/></a>
</div>
</div>
</body>
2、css樣式部分
<styletype="text/css">
#banner{position:relative;width:478px;height:286px;border:1pxsolid#666;overflow:hidden;}
#banner_listimg{border:0px;}
#banner_bg{position:absolute;bottom:0;background-color:#000;height:30px;filter:Alpha(Opacity=30);opacity:0.3;z-index:1000;
cursor:pointer;width:478px;}
#banner_info{position:absolute;bottom:0;left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}
#banner_text{position:absolute;width:120px;z-index:1002;right:3px;bottom:3px;}
#bannerul{position:absolute;list-style-type:none;filter:Alpha(Opacity=80);opacity:0.8;border:1pxsolid#fff;z-index:1002;
margin:0;padding:0;bottom:3px;right:5px;}
#bannerulli{padding:0px8px;float:left;display:block;color:#FFF;border:#e5eaff1pxsolid;background:#6f4f67;cursor:pointer}
#bannerulli.on{background:#900}
#banner_lista{position:absolute;}<!--讓四張圖片都可以重疊在一起-->
</style>
3、jQuery部分
<scripttype="text/javascript">
vart=n=0,count;
$(document).ready(function(){
count=$("#banner_lista").length;
$("#banner_lista:not(:first-child)").hide();
$("#banner_info").html($("#banner_lista:first-child").find("img").attr('alt'));
$("#banner_info").click(function(){window.open($("#banner_lista:first-child").attr('href'),"_blank")});
$("#bannerli").click(function(){
vari=$(this).text()-1;//獲取Li元素內的值，即1，2，3，4
n=i;
if(i>=count)return;
$("#banner_info").html($("#banner_lista").eq(i).find("img").attr('alt'));
$("#banner_info").unbind().click(function(){window.open($("#banner_lista").eq(i).attr('href'),"_blank")})
$("#banner_lista").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
document.getElementById("banner").style.background="";
$(this).toggleClass("on");
$(this).siblings().removeAttr("class");
});
t=setInterval("showAuto()",4000);
$("#banner").hover(function(){clearInterval(t)},function(){t=setInterval("showAuto()",4000);});
})
functionshowAuto()
{
n=n>=(count-1)?0:++n;
$("#bannerli").eq(n).trigger('click');
}
</script>