jQuery图片轮播功能实例代码

首页 > 网络编程 > JavaScript > javascript类库 > jquery 更新日期: 2017-02-12
这篇文章给大家介绍了jquery 图片轮播代码,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧

jquery 轮播图代码如下所示:

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片轮播</title>
<style>
*{margin:0px;padding:0px;}
.one{
float:left;
position:relative;
left:0px;
top:0px;
margin-left:10px;
width:790px;
height:340px;
overflow:hidden;
}
.one ul li{
list-style:none;
}
.photo ul{
float:left;
position:absolute;
height:490px;
left:0px;
top:0px;
}
.photo ul li{
float:left;
padding:0px;
margin:0px;
}
.arrow span{
display:block;
position:absolute;
width:30px;
height:60px;
line-height:60px;
text-align:center;
background:rgba(0,0,0,0.2);
z-index:1;
font-size:20px;
color:#fff;
top:40%;
cursor:pointer;
display:none;
}
.arrow span:hover{
background:rgba(0,0,0,0.7);
}
.arrow .right{
right:0px;
}
.dot{
position:absolute;
z-index:!;
background:rgba(255,255,255,0.2);
font-size:26px;
bottom:15px;
left:300px;
border-radius:22px;
}
.dot ul{
margin:0px;
padding:0px;
}
.dot ul li{
float:left;
padding:0px;
margin:0px;
margin:0 5px;
cursor:pointer;
}
</style>
</head>
<body>
<div class="one">
<div>
<div class="photo">
<ul>
<li><img src="image/1.png" alt="1" /></li>
<li><img src="image/2.png" alt="2" /></li>
<li><img src="image/3.png" alt="3" /></li>
<li><img src="image/4.png" alt="4" /></li>
<li><img src="image/5.png" alt="5" /></li>
<li><img src="image/6.png" alt="6" /></li>
</ul>
</div>
<div class="arrow"><span class="iconfont left"></span> <span class="iconfont right"></span></div>
<div class="dot">
<ul>
<li>●</li>
<li>●</li>
<li>●</li>
<li>●</li>
<li>●</li>
<li>●</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" ></script>
<script>
$(document).ready(function(){
var ulWidth=$('.photo ul li').length*$('.photo ul li').eq(1).width();
$('.dot ul li').first().css('color','#db192a');
$('.photo ul').width(ulWidth);
$('.photo,.arrow span').hover(function(){$('.arrow span').toggle()})
function jdshow(){
var index=-$('.photo ul').position().left/$('.photo ul li').eq(1).width();
$('.dot ul li').css('color','#fff');
if(index==$('.photo ul li').length-1){index=-1}
$('.dot ul li').eq(index+1).css('color','#db192a');
if($('.photo ul').position().left==-(ulWidth-790)){
$('.photo ul').css('left','790px');//图片宽度
$('.photo ul').clone().appendTo('.photo');
$('.photo ul:first').remove(); 
}
$('.photo ul').animate({
left:'-=790px', 
},10);
}
setInterval(jdshow,2000);
$('.arrow .right').click(function(){
jdshow();
});
$('.arrow .left').click(function(){
/*alert($('.jd-photo ul').position().left);*/
var index=-$('.photo ul').position().left/$('.photo ul li').eq(1).width();
$('.dot ul li').css('color','#fff');
$('.dot ul li').eq(index-1).css('color','#db192a');
if($('.photo ul').position().left==0){
$('.photo ul').css('left',-ulWidth);
$('.photo ul').clone().appendTo('.photo');
$('.photo ul:first').remove(); 
}
$('.photo ul').animate({
left:'+=790px', 
},10);
});
$('.dot ul li').click(function(){
var index=$('.dot ul li').index(this); 
$('.photo ul').animate({
left:-index*790, 
},10);
$('.dot ul li').css('color','#fff');
$(this).css('color','#db192a');
});
})
</script>
</body>
</html>

以上所述是小编给大家介绍的jQuery图片轮播功能实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • jQuery图片轮播滚动切换代码分享
    jQuery图片轮播滚动切换代码分享
    这篇文章主要介绍了jQuery图片轮播滚动切换特效,图片轮播效果特别适合做产品展示,感兴趣的小伙伴可以参考下.本文实例讲述了jQuery图片轮播滚动切换特效.分享给大家供大家参考.具体如下:jQuery图片轮播滚动切换代码是一款简单的jquery四张图片轮播滚动切换效果代码,实现过程很简单.运行效果图:-------------------查看效果 下载源码 ...
  • jQuery超精致图片轮播幻灯片特效代码分享
    jQuery超精致图片轮播幻灯片特效代码分享
    这篇文章主要介绍了jQuery超精致图片轮播幻灯片特效,图片轮播效果特别适合做产品展示,感兴趣的小伙伴可以参考下.本文实例讲述了jQuery超精致图片轮播幻灯片特效.分享给大家供大家参考.具体如下:这是一款基于jQuery实现超精致图片轮播幻灯片特效代码,实现过程很简单.运行效果图:                               ------- ...
  • 超漂亮的jQuery图片轮播特效
    超漂亮的jQuery图片轮播特效
    这篇文章为大家分享了超漂亮的jQuery图片轮播特效,支持Ajax加载数据,响应式布局,支持移动端触屏,功能强大,感兴趣的小伙伴们可以参考一下超漂亮的jQuery图片轮播特效,使用了插件jCarousel,很棒的jQuery插件,支持带缩略图左右切换,支持Ajax加载数据,响应式布局,支持移动端触屏,强大的API参数配置功能以及函数回调功能,支持自定义动画速 ...
  • js带点自动图片轮播幻灯片特效代码分享
    js带点自动图片轮播幻灯片特效代码分享
    这篇文章主要介绍了js带点自动图片轮播幻灯片特效,图片轮播效果特别适合做产品展示,感兴趣的小伙伴可以参考下.本文实例讲述了javascript带点自动图片轮播幻灯片特效.分享给大家供大家参考.具体如下:这是一款基于javascript实现带点自动图片轮播幻灯片特效代码,实现过程很简单.运行效果图:-------------------查看效果 下载源码--- ...
  • 非常棒的jQuery图片轮播效果
    非常棒的jQuery图片轮播效果
    这篇文章主要为大家介绍了一款非常棒的jQuery图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了jQuery图片轮播效果,很个性,具体内容如下 购物产品展示:图片轮播器,效果如下所示: 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果 两个区域:    最外层容器区域,红色线框矩形    选项卡区域 两个事件: ...
  • js图片轮播效果实现代码
    js图片轮播效果实现代码
    这篇文章主要介绍了js图片轮播效果实现代码,文章对每一步进行了详细阐述,标注注意事项,为顺利实现js图片轮播效果做好铺垫,对轮播效果感兴趣的朋友可以参考一下首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index二.添加定时器,每隔2秒钟inde ...
猜你喜欢