1. 用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>
2. 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>
3. jquery圖片自動輪播怎麼設置求高手
<!DOCTYPEHTML>
<html>
<head>
<title>yugi</title>
<metacharset=UTF-8/>
<styletype="text/css">
#pic{
width:410px;
height:200px;
margin:0auto;
margin-top:150px;
}
#pic#po{
width:370px;
overflow:hidden;
height:170px;
left:20px;;
top:10;
position:relative;
}
#pic#pol{
width:2370px;
height:165px;
position:absolute;
}
#pic#num{
width:120px;
height:25px;
position:absolute;
z-index:2;
left:247px;
top:140px;
}
#pic#numspan{
width:10px;
margin-left:10px;
cursor:pointer;
font-size:12px;
height:20px;
float:left;
color:#000000;
text-align:center;
}
#pic#numspan.cut{
background:#000000;
color:#FFFFFF;
}
img{
width:370px;
height:165px;
float:left
}
</style>
<scripttype="text/javascript"src="jquery-1.8.0.min.js"></script>
<scripttype="text/javascript">
jQuery(function($)
{
varCRT=0;
varw=$("img").width(),pol=$("#pol"),spans=$("#numspan");
spans.hover(function()
{
varme=$(this);
me.addClass("cut").siblings(".cut").removeClass("cut");
spans.eq(CRT).clearQueue();
pol.stop().animate(
{
left:"-"+w*(CRT=me.index())+"px"
},"slow");
},function()
{
anony();
});
varanony=function()
{
CRT++;
CRT=CRT>spans.length-1?0:CRT;
spans.eq(CRT).clearQueue().delay(1000).queue(function()
{
spans.eq(CRT).triggerHandler("mouseover");
anony();
});
};
anony();
});
</script>
</head>
<body>
<divid="pic">
<divid="po">
<divid="pol">
<imgsrc="../../圖片/素材/.jpg"/>
<imgsrc="../../圖片/素材/.jpg"/>
<imgsrc="../../圖片/素材/.jpg"/>
<imgsrc="../../圖片/素材/.jpg"/>
<imgsrc="../../圖片/素材/.jpg"/>
</div>
<divid="num">
<spanclass="cut">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
</div>
</body>
</html>
4. 求JQUERY的圖片左右輪播的代碼，要簡單一點的謝謝
首先要定義一個索引來表示你當前輪播到第幾張圖片了
然後獲得你總共有幾張圖片 當索引跳到最後一張的時候 將其值改為0 即可
對於上一頁下一頁 邏輯與上面相同
如果當前索引為0 或者為最後一個隱藏掉這個按鈕或者賦值另一端的極值
輪播的話 寫一個定時器 第一個參數就是這個函數啦 第二個參數給1000（ms）
函數裡面就對這個index按上面的邏輯操作即可了
思路給你了 自己寫吧。。邊查邊寫 收獲會很大
5. jquery簡單自動輪播圖代碼怎麼寫
html部分 this is the page一 this is the page二 this is the page三 this is the page四 css部分 *{ padding: 0; margin: 0; } html,body{ height: 一00%; } #container { width: 一00%; height: 500px; overflow: hidden; } .sections,.section { height:一00%; } #container,.sections { position: relative; } .section { background-color: #000; background-size: cover; background-position: 50% 50%; text-align: center; color: white; } #section0 { background-image: url('images/一.jpg'); } #section一 { background-image: url('images/二.jpg'); } #section二 { background-image: url('images/三.jpg'); } #section三 { background-image: url('images/四.jpg'); } .pages li{list-style-type:none;width:一0px;height:一0px;border-radius:一0px;background-color:white}.pages li:hover{box-shadow:0 0 5px 二px white}.pages li.active{background-color:orange;box-shadow:0 0 5px 二px orange}.pages{position:absolute;z-index:999}.pages.horizontal{left:50%;transform:translateX(-50%);bottom:5px}.pages.horizontal li{display:inline-block;margin-right:一0px}.pages.horizontal li:last-child{margin-right:0}.pages.vertical{right:5px;top:50%;transform:translateY(-50%)}.pages.vertical li{margin-bottom:一0px}.pages.vertical li:last-child{margin-bottom:0} JS部分 jquery-一.一一.0.min.js" type="text/javascript"> //引入pageSwitch.min.js 如
6. 用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>