CSS+jQuery实现轮播
CSS+jQuery实现轮播
实现功能：
- 自动轮播；
- 鼠标放在上面停止轮播；
- 鼠标放在上面显示左右切换的按钮；
- 鼠标放在小圆圈上显示对应的图片；
style.css
.outer{
width: 790px;
height: 340px;
margin: 80px auto;
position: relative;
}
.img li{
position: absolute;
list-style: none;
top:0;
left: 0;
}
.num{
position: absolute;
bottom: 18px;
left: 270px;
list-style: none;
}
.num li{
display: inline-block;
width: 18px;
height: 18px;
background-color: white;
border-radius: 50%;
text-align: center;
line-height: 18px;
margin-left: 4px;
}
.btn{
position: absolute;
top:50%;
width: 30px;
height: 60px;
background-color: lightgray;
color: white;
text-align: center;
line-height: 60px;
font-size: 30px;
opacity: 0.7;
margin-top: -30px;
display: none;
}
.left{
left:0;
}
.right{
right: 0;
}
.outer:hover .btn{
display: block;
}
.num .active{
background-color: red;
}
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<div class="outer">
<ul class="img">
<li><a href=""><img src="img/1.jpg" alt=""></a></li>
<li><a href=""><img src="img/2.jpg" alt=""></a></li>
<li><a href=""><img src="img/3.jpg" alt=""></a></li>
<li><a href=""><img src="img/4.jpg" alt=""></a></li>
<li><a href=""><img src="img/5.jpg" alt=""></a></li>
<li><a href=""><img src="img/6.jpg" alt=""></a></li>
</ul>
<ul class="num">
<!--<li class="active"></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
</ul>
<div class="left btn"> < </div>
<div class="right btn"> > </div>
</div>
<script>
// 通过jQuery自动创建按钮
var img_num = $(".img li").length;
for (var i=0;i<img_num;i++){
$(".num").append("<li></li>")
}
$(".num li:first").addClass("active");
// 手动轮播
$(".num li").mouseover(function () {
var index = $(this).index();
$(this).addClass("active").siblings().removeClass("active");
$(".img li").eq(index).stop().fadeIn(500).siblings().stop().fadeOut(500);
});
//自动轮播
var c = setInterval(GO_R,1500);
var i = 0;
function GO_R() {
if(i == img_num-1){
i = -1
}
i ++;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500);
}
function GO_L() {
if(i == 0){
i = img_num-1;
}
i --;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500);
}
$(".outer").hover(function () {
clearInterval(c);
}, function () {
c = setInterval(GO_R, 1500);
});
// button
$(".right").click(GO_R);
$(".left").click(GO_L);
</script>
</body>
</html>
以上代码基本实现了所要功能，但存在一个问题，就是当鼠标放在下方小圆圈的时候会显示对应图片，而鼠标移开后不是从当前图片开始轮播，反而是从上次轮播后的地方开始。
解决方法很简单，将全局变量i放在代码的最前端，代码当中的index变量换成变量i，此时应注意用于循环的i应该变成j。
以下为完整版本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<div class="outer">
<ul class="img">
<li><a href=""><img src="img/1.jpg" alt=""></a></li>
<li><a href=""><img src="img/2.jpg" alt=""></a></li>
<li><a href=""><img src="img/3.jpg" alt=""></a></li>
<li><a href=""><img src="img/4.jpg" alt=""></a></li>
<li><a href=""><img src="img/5.jpg" alt=""></a></li>
<li><a href=""><img src="img/6.jpg" alt=""></a></li>
</ul>
<ul class="num">
<!--<li class="active"></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
</ul>
<div class="left btn"> < </div>
<div class="right btn"> > </div>
</div>
<script>
var i = 0;
// 通过jQuery自动创建按钮
var img_num = $(".img li").length;
for (var j=0;j<img_num;j++){
$(".num").append("<li></li>")
}
$(".num li:first").addClass("active");
// 手动轮播
$(".num li").mouseover(function () {
i = $(this).index();
$(this).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500);
});
//自动轮播
var c = setInterval(GO_R,1500);
function GO_R() {
if(i == img_num-1){
i = -1
}
i ++;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500);
}
function GO_L() {
if(i == 0){
i = img_num-1;
}
i --;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500);
}
$(".outer").hover(function () {
clearInterval(c);
}, function () {
c = setInterval(GO_R, 1500);
});
// button
$(".right").click(GO_R);
$(".left").click(GO_L);
</script>
</body>
</html>
CSS+jQuery实现轮播的更多相关文章
- css jquery 实现轮播效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- 纯CSS 多图片轮播
今天做东西的时候,遇到一个问题关于图片轮播的问题,以前也接触过(百度 人家的demo改改..),再次遇到这个问题的时候,根据以前的印象找到了demo正信心满满的准备改一下嵌进去,发现 jquery.m ...
- Jquery 图片轮播实现原理总结
Jquery 图片轮播实现原理总结 以前要做图片轮播效果的时候,总是在网上找一段jquery的复制粘贴进去,只索取不奉献,今个就把我对这个的实现原理讲解一下. 首先说下,我在网上找的例子全是用的UL ...
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- Nivo Slider - 世界上最棒的 jQuery 图片轮播插件
Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...
- jquery图片轮播插件slideBox
效果预览: 源代码下载: jQuery图片轮播(焦点图)插件jquery.slideBox 特点:兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定 ...
- 第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计
html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...
随机推荐
- js将数组中一个或多个字段相同的子元素中合并
最近js中遇到js将数组中一个或多个字段相同的子元素中合并,相信很多朋友也有遇到,大家可能有多种方法,我在这里记录一个相对简单的方法,当然大家如有其它更好的方法,请提出来大家共同学习. //将经济事项 ...
- DAY20-Django之FileField与ImageField
ImageField 和 FileField 可以分别对图片和文件进行上传到指定的文件夹中. 1. 在下面的 models.py 中 : picture = models.ImageField(upl ...
- Maven核心概念(转)
转自 https://www.cnblogs.com/xdp-gacl/p/4051819.html 一.Maven坐标 1.1.什么是坐标? 在平面几何中坐标(x,y)可以标识平面中唯一的一点. 1 ...
- 4-5 父节点watcher事件
三种方式设置watcher:ls.stat.get
- node Util 模块
该util模块主要设计用于支持Node.js自己的内部API的需求.但是,许多实用程序对于应用程序和模块开发人员也很有用.它可以通过以下方式访问: const util = require('util ...
- SQL server2008无法收缩日志
SQL server2008无法收缩日志,错误信息为: 1:由于最小日志空间要求,无法收缩日志文件 2:无法收缩日志文件 2 (XXX_log),因为该文件结尾的逻辑日志文件正在使用 描述: 用的是网 ...
- 单引号和0的ASCII码
单引号的ASCII码为0xfe. 那么0xfefe,就表示''. 0的ACSII码为0x30.
- bzoj2134 错选单位
传送门 题目 Input n很大,为了避免读入耗时太多, 输入文件只有5个整数参数n, A, B, C, a1, 由上交的程序产生数列a. 下面给出pascal/C/C++的读入语句和产生序列的语句( ...
- Windows7 安装TensorFlow（本人试了好多方法后的成果）
本人机器为64位win7 首先安装python,版本一定要注意,TennsorFlow要使用 Python3.0 系列版本不能使用2.0系列版本,但是TensorFlow 的安装包目前windows版 ...
- java打成jar包后,class,getResource()出现null指针异常
1.SqlHelper.java有包路径没?如果有,是不是类似于com.db.jdbc? 不管怎么办,你SqlHelper.class.getResourceAsStream("/mysql ...