jQuery制作焦点图(轮播图)
焦点图(轮播图)
案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>京东轮播效果</title>
<style>
*{padding:0; margin:0;}
ul{ list-style:none;}
.out{ width:730px; height:454px; margin:50px auto; position:relative;}
.out .img li{ position:absolute; top:0;left:0; display:none;}
.out .num{ position:absolute; bottom:20px;left:0; font-size:0px; text-align:center; width:100%;}
.out .num li{ width:20px; height:20px; background:#666; color:#fff; text-align:center; line-height:20px; border-radius:50%; display:inline-block; font-size:16px; margin:0 3px; cursor:pointer;}
.out .num li.active{ background:#a00}
.out .btn{ position:absolute; top:50%; margin-top:-30px;width:30px; height:60px; background:rgba(0,0,0,0.5); color:#fff; text-align:center; line-height:60px; font-size:40px; display:none; cursor:pointer;}
.out:hover .btn{ display:block;}
.out .left{ left:0}
.out .right{ right:0;}
</style>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
//代码初始化
var size=$(".img li").size();
for(var i=1; i<=size; i++){
var li="<li>"+i+"</li>";
$(".num").append(li);
}
//手动控制轮播图
$(".img li").eq(0).show();
$(".num li").eq(0).addClass("active");
$(".num li").mouseover(function(){
$(this).addClass("active").siblings().removeClass("active");
var index=$(this).index();
i=index;
$(".img li").eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300);
})
//自动轮播
var i=0;
var t=setInterval(move,1500);
//核心向左运动函数
function moveL(){
i--;
if(i==-1){
i=size-1;
}
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);
}
//核心向右运动函数
function move(){
i++;
if(i==size){
i=0;
}
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);
}
//左边按钮点击事件
$(".out .left").click(function(){
moveL();
})
//右边按钮点击事件
$(".out .right").click(function(){
move()
})
//定时器的开始于结束
$(".out").hover(function(){
clearInterval(t)
},function(){
t=setInterval(move,1500);
})
})
</script>
</head>
<body>
<div class="out">
<ul class="img">
<li><a href="#"><img src="images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="images/5.jpg" alt=""></a></li>
<li><a href="#"><img src="images/6.jpg" alt=""></a></li>
</ul>
<ul class="num">
</ul>
<div class="left btn"><</div>
<div class="right btn">></div>
</div>
</body>
</html>
模仿
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<script type="text/javascript" src="packages/jquery-2.1.1.js"></script>
<style type="text/css">
* {
padding: 0;margin: 0;
}
ul {
list-style:none;
}
.out {
width:730px;
height: 454px;
border:5px solid #000;
margin:50px auto;
position: relative;
}
.out .img li {
position:absolute;
top:0;
left:0;
display:none;
}
.out .num {
position: absolute;
bottom:20px;
left:0;
font-size:0;
text-align: center;
width:100%;
}
.out .num li{
width:20px;
height: 20px;
background: #666;
color:#fff;
text-align: center;
line-height: 20px;
border-radius: 50%;
display:inline-block;
font-size:16px;
margin:0 3px;
cursor:pointer;
}
.out .num li.active {
background: #a00;
}
.out .btn {
position: absolute;
top: 50%;
margin-top:-30px;
width:30px;
height: 60px;
background:rgba(0,0,0,0.5);
color:#fff;
text-align: center;
line-height: 60px;
font-size:40px;
display: none;
cursor:pointer;
}
.out:hover .btn {
display: block;
}
.out .left {
left:0;
}
.out .right {
right:0;
}
</style>
<script type="text/javascript">
$(function(){
//代码初始化
var size = $(".img li").size();
for(var i=1;i<=size;i++){
var li = "<li>"+i+"</li>";
$(".num").append(li);
}
//手动控制轮播
$(".img li").eq(0).show();
$(".num li").eq(0).addClass("active");
$(".num li").mouseover(function(){
$(this).addClass("active").siblings().removeClass("active");
var index = $(this).index();
i=index;
// alert(index);
$(".img li").eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300);
})
//自动控制轮播
var i=0;
var t = setInterval(move,1500);
//核心向左运动函数
function moveL(){
i--;
if(i==-1){
i=size-1;
}
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).fadeIn(300).siblings().fadeOut(300)
}
//核心向右运动函数
function move(){
i++;
if(i==size){
i=0;
}
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);
}
//左边按钮点击事件
$(".out .left").click(function(){
moveL();
})
//右边按钮点击事件
$(".out .right").click(function(){
move();
})
//定时器的开始于结束
$(".out").hover(function(){
clearInterval(t);
},function(){
t = setInterval(move,1500);
})
})
</script>
</head>
<body>
<div class="out">
<ul class="img">
<li><a href="#"><img src="使用 jQuery 制作京东网的焦点图/源码/jQuery焦点图轮播/images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="使用 jQuery 制作京东网的焦点图/源码/jQuery焦点图轮播/images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="使用 jQuery 制作京东网的焦点图/源码/jQuery焦点图轮播/images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="使用 jQuery 制作京东网的焦点图/源码/jQuery焦点图轮播/images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="使用 jQuery 制作京东网的焦点图/源码/jQuery焦点图轮播/images/5.jpg" alt=""></a></li>
<li><a href="#"><img src="使用 jQuery 制作京东网的焦点图/源码/jQuery焦点图轮播/images/6.jpg" alt=""></a></li>
</ul>
<ul class="num">
</ul>
<!-- <ul class="num">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul> -->
<div class="left btn"><</div>
<div class="right btn">></div>
</div>
</body>
</html>
jQuery制作焦点图(轮播图)的更多相关文章
- 用jquery制作的简单轮播图
我也是进入H5前端的小菜鸟一枚,最近才进入jquery的学习,所以打算对自己的学习进行记录. 今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相 ...
- jQuery之制作简单的轮播图效果
[源代码] 链接:https://pan.baidu.com/s/1XpZ66D9fmSwWX3pCnGBqjA 密码:w104 [整体构思] 这个轮播图使用的是jQuery,所以Js的整体代量比较少 ...
- jQuery淡入淡出效果轮播图
用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...
- 【前端】javascript+jQuery实现旋转木马效果轮播图slider
实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...
- jQuery实现todo及轮播图
内容: 1.todo程序 2.轮播图 1.todo程序 需求: 实现一个todo程序,可以添加数据,可以删除数据,可以修改数据,可以查看所有数据 另外实现自己的一系列弹窗:用于提示用户的提示框.用于警 ...
- jquery tab选项卡、轮播图、无缝滚动
最近做一个页写了一个星期,觉得自己对jquery还是很不熟悉 自己查了一下资料写了几个封装好的tab选项卡.轮播图.无缝滚动 $(function(){ //tab选项卡 jQuery.tab=fun ...
- 前端框架之jQuery（二）----轮播图,放大镜
事件 页面载入 ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. $(document).ready(function(){}) -----------> ...
- 【jQuery】全功能轮播图的实现（本文结尾也有javascript版）
轮播图 图片自动切换(定时器): 鼠标悬停在图片上图片不切换(清除定时器) 鼠标悬停在按钮上时显示对应的图片(鼠标悬停事件) 鼠标悬停在图片上是现实左右箭头 点击左键切换到上一张图片,但图片为第一张时 ...
- jquery实现漂亮的轮播图
今天工作中要用到一个轮播功能,在网上找了一些,觉得有些过于繁琐,于是自己动手写了一个,效果如图: 代码如下: <!DOCTYPE html> <html lang="en& ...
随机推荐
- Intent 意图 结构 简介
Intent简介 官方解释: An intent is an abstract description of an operation操作 to be performed展示.表演. It can b ...
- FreeMarker辅助
/** * FreeMarker 辅助类 * @author Rubekid * */ public class FreeMarkerHelper { /** * 模板文件存放目录 */ privat ...
- flv网页播放器播放失败
在IIS6.0上发布网站时,在路径正确的情况下,网页flv播放器还是无法播放flv视频的解决方法. 1.打开IIS6.0管理器,打开发布的网站,点击打开属性窗口. 2.在HTTP头选项里找到MIME类 ...
- linux分区和系统文件和挂载
要以root用户进入 .查看磁盘情况 lsblk .进行分区 sudo cfdisk /dev/sda 在空闲资源的地方新建分区,然后一步步的走下来就行了,最后选择write,然后quit 重启 .创 ...
- C3P0连接池配置方式
c3p0的配置方式分为三种,分别是 1.setters一个个地设置各个配置项 2.类路径下提供一个c3p0.properties文件 3.类路径下提供一个c3p0-config.xml文件 1.set ...
- C#_Stopwatch 类
命名空间:System.Diagnostics Stopwatch 实例可以测量一个时间间隔的运行时间,也可以测量多个时间间隔的总运行时间.在典型的 Stopwatch 方案中,先调用 Start 方 ...
- C#string与char互转
string s = "asdf"; //字符转char char[] c = s.ToCharArray(); Console.WriteLine(s[]); //char转st ...
- PHP 汉字转拼音(首拼音,所有拼音)
<?php /** +------------------------------------------------------ * PHP 汉字转拼音 +------------------ ...
- C#实现窗体间的通信
以下将窗体间的几种通信实现方式做一下罗列:首先新建一个窗体Form1,在其中放置一个Textbox.Button控件.再新建一个窗体Form2,其上放置一个Button控件.具体代码示例如下: //F ...
- Codeforces 449D Jzzhu and Numbers
http://codeforces.com/problemset/problem/449/D 题意:给n个数,求and起来最后为0的集合方案数有多少 思路:考虑容斥,ans=(-1)^k*num(k) ...