JS图片轮播[左右轮播
直接可以用,网上摘下来的!
<!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>JS图片轮播特效-左右切换</title> <style type="text/css">
.imageRotation{
height:270px;
width:570px;
overflow:hidden; /*--超出容器的所有元素都不可见--*/
position:relative; /*--相对定位--*/
border:10px solid #eee;
bodrer-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
/*-------------图片容器---------------*/
.imageBox{
position:absolute; /*--固定定位--*/
height:270px;
top:0px;
left:0px;
overflow:hidden;
}
.imageBox img {
display:block;
height:270px;
width:570px;
float:left;
border:none;
}
/*-------------标题容器---------------*/
.titleBox{
position:absolute;
bottom:0px;
width:570px;
height:40px;
overflow:hidden;
}
.titleBox p{
position:absolute;
bottom:-40px;
width:550px;
height:40px;
margin:0px;
padding:0px 10px;
line-height:40px;
z-index:1;
border-top:1px solid #000;
background-color:#000;
color:#fff;
font-family:"微软雅黑","yahei";
opacity:0.5;
-moz-opacity:0.5;
-webkit-opacity:0.5;
filter:alpha(opacity=50);
}
.titleBox p span{
opacity:1;
-moz-opacity:1;
-webkit-opacity:1;
filter:alpha(opacity=100);
}
.titleBox p.active{
bottom:0px;
}
/*-------------图标容器---------------*/
.icoBox{
position:absolute; /*--固定定位--*/
bottom:14px;
right:15px;
width:76px;
height:12px;
text-align:center;
line-height:40px;
z-index:2;
}
.icoBox span{
display:block;
float:left;
height:12px;
width:12px;
margin-left:3px;
overflow:hidden;
background:url("images/ico.png") 0px 0px no-repeat;
cursor:pointer;
}
.icoBox span.active {
background-position:0px -12px;
cursor:default;
}
</style>
</head>
<body>
<div class="imageRotation">
<div class="imageBox">
<a href="http://www.itxueyuan.org" target="_blank"><img src="data:images/1.jpg" /></a>
<a href="http://www.itxueyuan.org" target="_blank"><img src="data:images/2.jpg" /></a>
<a href="http://www.itxueyuan.org" target="_blank"><img src="data:images/3.jpg" /></a>
<a href="http://www.itxueyuan.org" target="_blank"><img src="data:images/4.jpg" /></a>
<a href="http://www.itxueyuan.org" target="_blank"><img src="data:images/5.jpg" /></a>
</div>
<div class="titleBox">
<p class="active"><span>第一张图片标题</span></p>
<p>第二张图片标题</p>
<p>第三张图片标</p>
<p>第四张图片标题</p>
<p>第五张图片标题</p>
</div>
<div class="icoBox">
<span class="active" rel="1">1</span>
<span rel="2">2</span>
<span rel="3">3</span>
<span rel="4">4</span>
<span rel="5">5</span>
</div>
</div> <script type="text/javascript" src="http://www.itxueyuan.org/uploads/javascript/jquery.js"></script>
<script type="text/javascript"> $(document).ready(function() {
$(".imageRotation").each(function(){
// 获取有关参数
var imageRotation = this, // 图片轮换容器
imageBox = $(imageRotation).children(".imageBox")[0], // 图片容器
titleBox = $(imageRotation).children(".titleBox")[0], // 标题容器
titleArr = $(titleBox).children(), // 所有标题(数组)
icoBox = $(imageRotation).children(".icoBox")[0], // 图标容器
icoArr = $(icoBox).children(), // 所有图标(数组)
imageWidth = $(imageRotation).width(), // 图片宽度
imageNum = $(imageBox).children().size(), // 图片数量
imageReelWidth = imageWidth*imageNum, // 图片容器宽度
activeID = parseInt($($(icoBox).children(".active")[0]).attr("rel")), // 当前图片ID
nextID = 0, // 下张图片ID
setIntervalID, // setInterval() 函数ID
intervalTime = 4000, // 间隔时间
imageSpeed =500, // 图片动画执行速度
titleSpeed =250; // 标题动画执行速度
// 设置 图片容器 的宽度
$(imageBox).css({'width' : imageReelWidth + "px"});
// 图片轮换函数
var rotate=function(clickID){
if(clickID){ nextID = clickID; }
else{ nextID=activeID<=4 ? activeID+1 : 1; }
// 交换图标
$(icoArr[activeID-1]).removeClass("active");
$(icoArr[nextID-1]).addClass("active");
// 交换标题
$(titleArr[activeID-1]).animate(
{bottom:"-40px"},
titleSpeed,
function(){
$(titleArr[nextID-1]).animate({bottom:"0px"} , titleSpeed);
}
);
// 交换图片
$(imageBox).animate({left:"-"+(nextID-1)*imageWidth+"px"} , imageSpeed);
// 交换IP
activeID = nextID;
}
setIntervalID=setInterval(rotate,intervalTime);
$(imageBox).hover(
function(){ clearInterval(setIntervalID); },
function(){ setIntervalID=setInterval(rotate,intervalTime); }
);
$(icoArr).click(function(){
clearInterval(setIntervalID);
var clickID = parseInt($(this).attr("rel"));
rotate(clickID);
setIntervalID=setInterval(rotate,intervalTime);
});
});
});
</script> </body>
</html>
JS图片轮播[左右轮播的更多相关文章
- JS图片自动和可控的轮播切换特效
点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...
- 分别用css3、JS实现图片简单的无缝轮播功效
本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...
- js图片轮播效果实现代码
首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...
- js 图片轮播简单版
<html> <head> <meta charset="utf-8" /> <title></title> <s ...
- JS封装动画框架,网易轮播图,旋转轮播图
JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...
- js 实现淘宝无缝轮播图效果,可更改配置参数 带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...
- 原生js面向对象编程-选项卡(自动轮播)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- JS图片Switchable切换大集合
JS图片切换大集合 利用周末2天把JS图片切换常见效果封装了下,比如:轮播,显示隐藏,淡入淡出等.废话不多说,直接看效果吧!JSFiddler链接如下: 想看JS轮播切换效果请点击我! 当然由于上传图 ...
- 支持无限加载的js图片画廊插件
natural-gallery-js是一款支持无限加载的js图片画廊插件.该js图片画廊支持图片的懒加载,可以对图片进行搜索,分类,还可以以轮播图的方式来展示和切换图片. 使用方法 在页面中引入下面的 ...
随机推荐
- springboot拦截异常信息发送邮件提醒
-- private JavaMailSender sender; 可能会出现注入错误,请注意yam配置文件中格式是否一致:否则会找不到注入的bean 一 发送邮件 在Springboot中发送邮件非 ...
- PL/SQL的命令行窗口中执行脚本
注意脚本路径中不能有空格, 格式如下:SQL>@D:\1211_Export\all.sql 备注: @后面接本地sql文件的路径及执行文件
- 【.net core 0基础】创建你的第一个.net core应用
1.下载.NET core相应的SDK,https://dotnet.microsoft.com/download 2.安装完成后,打开命令提示符,输入命令 dotnet,检查是否正确安装,如果命令能 ...
- [论文理解] An Analysis of Scale Invariance in Object Detection – SNIP
An Analysis of Scale Invariance in Object Detection – SNIP 简介 小目标问题一直是目标检测领域一个比较难解决的问题,因为小目标提供的信息比较少 ...
- leetcode探索中级算法
leetcode探索中级答案汇总: https://leetcode-cn.com/explore/interview/card/top-interview-questions-medium/ 1)数 ...
- 从GoogleClusterData统计每个用户的使用率、平均每次出价
之前将google cluster data导入了Azure上的MySQL数据库,下一步就是对这些数据进行分析, 挖掘用户的使用规律了. 首先,为了加快执行速度,对user,time等加入索引. 然后 ...
- SqlServer索引的原理与应用(转载)
SqlServer索引的原理与应用 索引的概念 索引的用途:我们对数据查询及处理速度已成为衡量应用系统成败的标准,而采用索引来加快数据处理速度通常是最普遍采用的优化方法. 索引是什么:数据库中的索引类 ...
- 解决 Elasticsearch 超过 10000 条无法查询的问题
解决 Elasticsearch 超过 10000 条无法查询的问题 问题描述 分页查询场景,当查询记录数超过 10000 条时,会报错. 使用 Kibana 的 Dev Tools 工具查询 从第 ...
- Idea Debug多线程不进断点问题处理
Idea也会使我狼狈不堪,Eclipse下约定成俗,却非Idea的默认规则. 比如 DEBUG多个线程时,Idea的默认设定就会遇到断点不能进入的问题. 解决的方法: 点击DEBUF框下的双红点(Vi ...
- 通过TCODE查找SPRO路径
1.SE11:CUS_ACTOBJ,根据OBJECTNAME(对象名称),即视图名称,获取Customizing activity(ACT_ID) 2.根据ACT_ID在表CUS_IMGACT获取说明 ...