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"; /*通用样式*/ /*去 ...
随机推荐
- java在Win7 64位 获取客户端的IP,MAC,计算机名
package com.javaweb.util; import java.io.IOException; import java.io.InputStreamReader; import java. ...
- 【260】centos设置root密码
怎么进Linux单用户模式 http://tieba.baidu.com/p/2216642385 http://jingyan.baidu.com/article/c1a3101ea68dafde6 ...
- PL/SQL批处理语句（二）FORALL
PL/SQL批处理语句(二)FORALL 我们知道PL/SQL程序中运行SQL语句是存在开销的,因为SQL语句是要提交给SQL引擎处理,这种在PL/SQL引擎和SQL引擎之间的控制转移叫做上下文却换, ...
- Maven学习笔记1-牛逼的POM文件
IDE:integrated development enterprise 集成开发环境: 一.pom文件 POM是项目对象模型(Project Object Model)的简称:maven世界中必须 ...
- 什么是FastCGI, PHP-FPM
CGI,FastCGI都是一套接口标准:是编程语言(比如php,python; python里面也有wsgi)与web服务器(比如Nginx)的通信标准(比如你跟老外交流,那么FastCGI就相当于是 ...
- 安装了多个php版本,如何编译扩展
cd /data/php-5.5.35/ext/mysqli 找到安装包目录下面的ext目录 ./configure --with-php-config=/usr/local/php5/bin/ph ...
- Windows系统 安装 CMake
Windows系统 安装 CMake 我们的电脑系统:Windows 10 64位 安装的CMake 版本:cmake-3.6.1-win64-x64(目前最新) 下载 在CMake官网下载:cmak ...
- Spark 1.4.1中Beeline使用的gc overhead limit exceeded
最近使用SparkSQL做数据的打平操作,就是把多个表的数据经过关联操作导入到一个表中,这样数据查询的过程中就不需要在多个表中查询了,在数据量大的情况下,这样大大提高了查询效率. 我启动了thri ...
- 关于用Date类计算活了多少天和用Calendar类计算闰年的demo
在javaSE阶段,Date类和Calendar类以后会经常用到 这两个类当中的一些常用方法 通过两个demo 进行学习和练习 第一个要求如下:让用户自己输入yyyy-MM-dd 格式的年月日 然后得 ...
- 《Head First Servlets & JSP》-3-1st servlet MVC demo
项目结构 用户首页 form.html <html> <body> <h1 align='center'>Beer Selection Page</h1> ...