jquery实现简单自动轮播图效果
本文实例为大家分享了jquery实现简单自动轮播图的具体代码，供大家参考，具体内容如下
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="author" content="Jxz">
<title></title>
<script src="../jquery-3.1.1.js"></script>
<style>
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
#box{
width: 520px;
height: 280px;
margin: 100px auto;
position: relative;
}
#box .list li{
position: absolute;
top: 0;
left: 0;
display: none;
}
#box .list li.current{
display: block;
}
#box .count{
position: absolute;
left: 10px;
bottom: 10px;
}
#box .count li{
float: left;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fa0;
text-align: center;
line-height: 20px;
margin-left: 10px;
color: #fff;
opacity: 0.8;
cursor: pointer;
}
#box .count li.current{
background-color: #f60;
opacity: 1;
}
#box .btn{
position: absolute;
bottom:10px;
right: 15px;
}
#box .btn li{
width: 50px;
height: 50px;
background-color: #ccc;
float: right;
margin-left: 15px;
opacity: 0.8;
cursor: pointer;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div id="box">
<ul class="list">
<li class="current"><img src="img/01.jpg" alt=""></li>
<li><img src="img/02.jpg" alt=""></li>
<li><img src="img/03.jpg" alt=""></li>
<li><img src="img/04.jpg" alt=""></li>
<li><img src="img/05.jpg" alt=""></li>
</ul>
<ul class="count">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="btn">
<li class="right">></li>
<li class="left"><</li>
</ul>
</div>
</body>
</html>
<script>
// var aLi=$('.list li');
// var aNum=$('.count li');
// 记录当前显示的图片的索引
var current=0;
// 保存定时器
var timer=null;
timer=setInterval(autoPlay,1000)
// 自动播放
function autoPlay(){
current<$('.count li').length-1?current++:current=0;
show()
}
function show(){
// aLi.hide()
$('.list li').hide()
.eq(current).show();
// aNum.removeClass()
// .eq(current).addClass('current')
$('.count li').eq(current).toggleClass('current').siblings().removeClass('current');
}
// 手动
$('.count li').mouseenter(function(){
current=$(this).index()
show()
})
// 按钮控制选图
$('#box .left').click(function(){
current>0?current--:current=4;
show()
})
$('#box .right').click(function(){
current<$('.count li').length-1?current++:current=0;
show()
})
// 鼠标进图自动暂停
$('#box').hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(autoPlay,1000);
})
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jQuery插件slides实现无缝轮播图特效
初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 $(".slideInner").slide({ slideContainer: $('.slideInner a'), effect: 'easeOutCirc',//动画类型 autoRunTime: 5000,//自动轮播时间 slideSpeed: 1000,//速度 nav: true,//是否显示左右导航 autoRun: true,//是否自动滚动 prevBtn: $(
-
原生Javascript和jQuery做轮播图简单例子
接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较. jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮
-
jquery实现左右无缝轮播图
本文实例为大家分享了jquery无缝轮播图的实现代码,供大家参考,具体内容如下 <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{p
-
jquery实现左右轮播图效果
我们经常看到购物网站上首页有轮播图,比如某东某京 如图我们打开网页就看到京东的轮播图 接下来,这个小案例就是要介绍如何实现这种效果,即这张轮播图上所有的事件. 首先 我们看到轮播图上的有1.左右的小按钮(图片会随着左右的点击移动) 2**重点内容.还有位于中间的小圆点(点击小圆点会跳转到那个图片) 3重点内容**轮播图会自己向左滑动(里面有一个定时器自动播放) 分析完之后就是我们写代码(这个是仿京东的轮播图) HTML的内容 代码片 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多
-
基于jQuery实现淡入淡出效果轮播图
用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: <div id="container"> <ul class="pic"> <li><a href="javascript:;"><img src="DSC01627.jpg"
-
jQuery实现简洁的轮播图效果实例
本文实例讲述了jQuery实现简洁的轮播图效果.分享给大家供大家参考,具体如下: HTML: <div class="ppt"> <a href="###"><img src="ppt/ppt1.jpg" /></a> <a href="###" style="display:none;"><img src="ppt/ppt2.jp
-
jQuery无缝轮播图代码
本文实例为大家分享了jQuery无缝轮播图的具体代码,供大家参考,具体内容如下 html 代码 <div class="banner"> <ul class="img"> <li><a href="#"><img src="image/1.jpg"></a></li> <li><a href="#">
-
jQuery实现轮播图源码
本文实例为大家分享了jQuery实现轮播图展示的具体代码,供大家参考,具体内容如下 设计: 根据上图可以看出,轮播图需要以下元素:外面的盒子div.放置图片集合的盒子ul.放置两侧按钮的盒子div.下侧顺序按钮div 源代码如下: 一.html源码如下: <div class="outer"> <ul class="img"> <li><a><img src="../static/img/1.jpg&q
-
jquery实现左右滑动式轮播图
本文实例为大家分享了jquery左右滑动轮播图的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery-1.10.2.min.js"><
-
jQuery实现一个简单的轮播图
html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>轮播图练习</title> <link rel="stylesheet" href="css/css.css" rel="external nofollow" type=&