jQuery图片轮播功能实例代码


Posted in Javascript onJanuary 29, 2017

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图片轮播功能实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JS高级笔记
Jul 13 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
JS实现转动随机数抽奖特效代码
Apr 16 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
js数据类型检测总结
Aug 05 Javascript
vue+eslint+vscode配置教程
Aug 09 Javascript
angular8和ngrx8结合使用的步骤介绍
Dec 01 Javascript
js实现适配移动端的拖动效果
Jan 13 Javascript
jQuery代码实现实时获取时间
Jan 29 #Javascript
用director.js实现前端路由使用实例
Jan 27 #Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 #Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 #Javascript
js监听input输入框值的实时变化实例
Jan 26 #Javascript
jquery实现input框获取焦点的简单实例
Jan 26 #Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 #Javascript
You might like
PHP伪静态写法附代码
2008/06/20 PHP
php 转换字符串编码 iconv与mb_convert_encoding的区别说明
2011/11/10 PHP
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
layer弹出层显示在top顶层的方法
2019/09/11 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
详解Python中的from..import绝对导入语句
2016/06/21 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
python多线程之事件Event的使用详解
2018/04/27 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
产品促销活动策划书
2014/01/15 职场文书
作文评语集锦大全
2014/04/23 职场文书
片区教研活动总结
2014/07/02 职场文书
JavaScript 防篡改对象的用法示例
2021/04/24 Javascript
Python竟然能剪辑视频
2021/05/25 Python
MySQL分库分表详情
2021/09/25 MySQL
详解Vue的列表渲染
2021/11/20 Vue.js