當前位置：首頁 » 網站代碼 » jq輪播圖代碼

jq輪播圖代碼

發布時間: 2021-03-04 22:24:23

Ⅰ 用jquery實現圖片輪播怎麼寫呢求指教

html">*{
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>

Ⅱ 輪播圖代碼

<!>
<html>
<head>
<title>左右移動的焦點圖</title>
<link href='css/style.css' rel='stylesheet' />
<script type='text/javascript' src='js/jquery-1.8.1.min.js'></script>
<script type='text/javascript' src='js/script.js'></script>
</head>
<body>
<div class='main'>

<ul class='pics'>
<li><img src='images/01.jpg' /><>
<li><img src='images/02.jpg' /><>
<li><img src='images/03.jpg' /><>
<li><img src='images/04.jpg' /><>
<li><img src='images/05.jpg' /><>
</ul>
<p class='prev'></p>
<p class='next'></p>
</div>
</body>
<ml>

css
*{margin:0;
padding:0;
list-style:none;
font-size:12px;}

.main{width:800px;
height:280px;
margin:50px auto;
position:relative;
overflow:hidden;}

.pics{position:absolute;
top:0;
left:0;}

/* .pics li{width:800px;
height:280px;}
*/
.lists{height:30px;
width:800px;
opacity:0.5;
background:#333;
position:absolute;
bottom:0;
left:0;}

.list{position:absolute;
bottom:10px;
right:20px;}

.list li{width:25px;
height:10px;
background:#fff;
font-size:0;
filter:alpha(opacity=50);
opacity:0.5;
float:left;
margin-right:5px;}

.list .on{opacity:1;}

p{background:url(../images/sprite.png) no-repeat;
width:50px;
height:100px;
position:absolute;
top:80px;}

.prev{background-position:0 0;
left:0;
fiter:alpha(opacity=50);
opacity:0.5;}

.next{background-position:right;
right:0;
filter:alpha(opacity=50);
opacity:0.5;}

js 需要引用jq
$(function(){
var len=$('.pics li').length,
w=$('.pics li:first').outerWidth(),
repeat=null,
indexs=0;
index=0;
$('<div></div>').addClass('lists').appendTo($('.main'));
$('<ul></ul>').addClass('list').appendTo($('.lists'));
$('.pics').css({'width':len*w+'px'});
$('.pics li').css({'float':'left'})
for(var i=0;i<len;i++){
$('<li><>').appendTo($('.list'))
}
$('.list li:first').addClass('on');
$('.main').hover(function(){
clearInterval(repeat)
},function(){
//console.log(w)
repeat=setInterval(function(){
index++;
if(index==len){
index=0;
}
changeImg(index)
},2000)
}).mouseleave();
$('.list li').mouseover(function(){
index=$(this).index();
changeImg(index)
})

$('p').hover(function(){
$(this).fadeTo('normal',0.8)
},function(){
$(this).fadeTo('normal',0.5)
})
$('.prev').click(function(){

if(indexs==0){
indexs=len;
}
indexs--;
changeImg(indexs)
console.log(indexs)
})
$('.next').click(function(){
indexs++;
if(indexs==len){
indexs=0;
}
changeImg(indexs)

console.log(index)
})

function changeImg(index){
$('.pics').animate({'left':-index*w})
$('.list li').eq(index).addClass('on').siblings().removeClass();
indexs=index;
}

})

Ⅲ 怎麼用jquery做輪播圖效果

>
<span>5</span>
</div>
</div>
在網頁的<head></head>代碼間加入jQuery框架鏈接<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
編寫JS代碼如下
<script type="text/javascript" language="javascript">
var PicTotal = 5;// 當前圖片總數
var CurrentIndex;// 當前滑鼠點擊圖片索引
var ToDisplayPicNumber = 0;// 自動播放時的圖片索引
$("div.LunBo div.LunBoNum span").click(DisplayPic);
function DisplayPic() {
// 測試是父親的第幾個兒子
CurrentIndex = $(this).index();
// 刪除所有同級兄弟的類屬性
$(this).parent().children().removeClass("CurrentNum")
// 為當前元素添加類
$(this).addClass("CurrentNum");
// 隱藏全部圖片
var Pic = $(this).parent().parent().children("ul");
$(Pic).children().hide();
// 顯示指定圖片
$(Pic).children("li").eq(CurrentIndex).show();
}
function PicNumClick() {
$("div.LunBo div.LunBoNum span").eq(ToDisplayPicNumber).trigger("click");
ToDisplayPicNumber = (ToDisplayPicNumber + 1) % PicTotal;
setTimeout("PicNumClick()",1000);
}
setTimeout("PicNumClick()",1000);
</script>
鏈接CSS文件，文件內容如下
* {
margin: 0px;
padding: 0px;
font-size: 14px;
}
div.LunBo {
position: relative;
list-style-type: none;
height: 170px;
width: 490px;
}
div.LunBo ul li {
position: absolute;
height: 170px;
width: 490px;
left: 0px;
top: 0px;
display: none;
}
div.LunBo ul li.CurrentPic {
display: block;
}
div.LunBo div.LunBoNum {
position: absolute;
left: 374px;
bottom: 11px;
width: 83px;
text-align: right;
background-color: #999;
padding-left: 10px;
}
div.LunBo div.LunBoNum span {
height: 20px;
width: 15px;
display: block;
line-height: 20px;
text-align: center;
margin-top: 5px;
margin-bottom: 5px;
float: left;
cursor: pointer;
}
div.LunBo div.LunBoNum span.CurrentNum {
background-color: #3F6;
}
製作完成，保存瀏覽效果如下

最後附上全部代碼
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>圖片輪播演示</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
font-size: 14px;
}
div.LunBo {
position: relative;
list-style-type: none;
height: 170px;
width: 490px;
}
div.LunBo ul li {
position: absolute;
height: 170px;
width: 490px;
left: 0px;
top: 0px;
display: none;
}
div.LunBo ul li.CurrentPic {
display: block;
}
div.LunBo div.LunBoNum {
position: absolute;
left: 374px;
bottom: 11px;
width: 83px;
text-align: right;
background-color: #999;
padding-left: 10px;
}
div.LunBo div.LunBoNum span {
height: 20px;
width: 15px;
display: block;
line-height: 20px;
text-align: center;
margin-top: 5px;
margin-bottom: 5px;
float: left;
cursor: pointer;
}
div.LunBo div.LunBoNum span.CurrentNum {
background-color: #3F6;
}
</style>
</head>

<body>
<div class="LunBo">
<ul>
<li class="CurrentPic"><img src="images/1.png" width="490" height="170"></li>
<li><img src="images/2.jpg" width="490" height="170"></li>
<li><img src="images/3.jpg" width="490" height="170"></li>
<li><img src="images/4.jpg" width="490" height="170"></li>
<li><img src="images/5.png" width="490" height="170"></li>
</ul>
<div class="LunBoNum">
<span class="CurrentNum">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
<script type="text/javascript" language="javascript">
var PicTotal = 5;
var CurrentIndex;
var ToDisplayPicNumber = 0;
$("div.LunBo div.LunBoNum span").click(DisplayPic);
function DisplayPic() {
// 測試是父親的第幾個兒子
CurrentIndex = $(this).index();
// 刪除所有同級兄弟的類屬性
$(this).parent().children().removeClass("CurrentNum")
// 為當前元素添加類
$(this).addClass("CurrentNum");
// 隱藏全部圖片
var Pic = $(this).parent().parent().children("ul");
$(Pic).children().hide();
// 顯示指定圖片
$(Pic).children("li").eq(CurrentIndex).show();
}
function PicNumClick() {
$("div.LunBo div.LunBoNum span").eq(ToDisplayPicNumber).trigger("click");
ToDisplayPicNumber = (ToDisplayPicNumber + 1) % PicTotal;
setTimeout("PicNumClick()",1000);
}
setTimeout("PicNumClick()",1000);
</script>
</body>
</html>
以上代碼保存為html文件後可直接運行。

Ⅳ 左右按鈕控制輪播圖切換，用jquery怎麼寫，不用框架，代碼如下

<!doctypehtml>
<htmllang="en">

<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
#box{
width:796px;
margin:50pxauto;
position:relative;
height:296px;
}
#img-boximg{
position:absolute;
width:796px;
height:305px;
}
#uls{
position:absolute;
width:100%;
text-align:center;
bottom:0px;
list-style:none;
margin:0;
padding:0;
}
#ulsli{
width:30px;
height:30px;
line-height:30px;
background:white;
border-radius:10px;
display:inline-block;
}
#ulsli:first-child{
background:red;
}
button{
position:absolute;
top:50%;
display:none;
}
button#prev{
left:10px;
}
button#next{
right:10px;
}
</style>
</head>

<body>
<divid="box">
<divid="img-box">
<imgsrc="https://imgsa..com/news/q%3D100/sign=/.jpg"alt="">
<imgsrc="https://imgsa..com/news/q%3D100/sign=/.jpg"alt="">
<imgsrc="https://imgsa..com/news/q%3D100/sign=/.jpg"alt="">
<imgsrc="https://imgsa..com/news/q%3D100/sign=/.jpg"alt="">
<imgsrc="https://imgsa..com/news/q%3D100/sign=/.jpg"alt="">
</div>
<ulid="uls">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<buttonid="prev"><</button>
<buttonid="next">></button>
</div>

<scriptsrc="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

<script>
vartime,len;
varindex=0
len=$('#ulsli').length;
time=setInterval(slide,1000);
$('#box').hover(function(){
clearInterval(time);
$('#prev,#next').css('display','block');
},function(){
time=setInterval(slide,1000);
$('#prev,#next').css('display','none');
});
$('#prev').click(function(){
clearInterval(time);
varlen=$('#ulsli').length-1;
varimgshowindex=$("#img-boximg:visible").index();
if(imgshowindex<=0){
index=len;
}else{
index=--imgshowindex;
}
showindeximg(index);
});
$('#next').click(function(){
clearInterval(time);
varimgshowindex=$("#img-boximg:visible").index();
index=++imgshowindex;
if(index==len)index=0;
showindeximg(index);
});

functionslide(){
index++;
if(index==len)index=0;
$('#ulsli').css('background','white').eq(index).css('background','red');
$('#img-boximg').fadeOut();
$('#img-boximg').eq(index).fadeIn();
}

functionshowindeximg(index){
$("#img-boximg").hide().eq(index).show();
$("#ulsli").css("background","white").eq(index).css("background","red");
}
</script>

</body>

</html>

具體實現，你可以復制下來運行下。

Ⅳ jquery輪播圖最後一張圖片如何無縫輪播到第一張圖片（輪播順序應和前面一樣，即從左往右）,代碼如下：

$(document).ready(function(){
vartimer=null;
varpic=$(".pic");
varoUl=pic.children("ul");
varaImg=pic.find("img");
varimgWidth=parseFloat(pic.css("width"))||.prop("offsetWidth");
oUl.css("width",imgWidth*aImg.length+'px');
vari=0;
timer=setInterval(function(){
oUl.animate({
"left":"-"+imgWidth+'px'
},500,function(){
	oUl.children("li:first").insertAfter(oUl.children("li:last"));
	oUl.css("left",0);
});
},1000);
});

Ⅵ 圖片自動播放輪播JQ，js代碼。

//輪播器
var crs_num=1

function interval(){
carousel=setInterval(function(){

num2=crs_num*-800
$('.crs_img').animate({
attr:'x',
target:num2,
time:50,
speed:10,

})
$('.crs_words p').html($('.crs_img img').getnum(crs_num).attr('alt'))
$('#carousel li').css('color','#999')
$('#carousel li').getnum(crs_num).css('color','#333')
crs_num++;
if(crs_num==3)crs_num=0;
},3000)
}
interval();
$('#carousel li').hover(function(){
var num=$(this).childNum()*-800
clearInterval(carousel)
$('.crs_img').animate({
attr:'x',
target:num,
time:50,
speed:5,

})

$('.crs_words p').html($('.crs_img img').getnum($(this).childNum()).attr('alt'))
$('#carousel li').css('color','#999')
$(this).css('color','#333')

},function(){
interval()
})
animate是自己封裝的，可能和jq不兼容

Ⅶ 用jquery實現圖片向左輪播代碼

看看裡面有幾個炫酷實例。

Ⅷ 求JQUERY的圖片左右輪播的代碼，要簡單一點的謝謝

首先要定義一個索引來表示你當前輪播到第幾張圖片了
然後獲得你總共有幾張圖片當索引跳到最後一張的時候將其值改為0 即可
對於上一頁下一頁邏輯與上面相同
如果當前索引為0 或者為最後一個隱藏掉這個按鈕或者賦值另一端的極值
輪播的話寫一個定時器第一個參數就是這個函數啦第二個參數給1000（ms）
函數裡面就對這個index按上面的邏輯操作即可了
思路給你了自己寫吧。。邊查邊寫收獲會很大

閱讀全文

jq輪播圖代碼

與jq輪播圖代碼相關的閱讀推薦