当前位置：首页 » 网站代码 » 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轮播图代码相关的阅读推荐