直接可以用,网上摘下来的!

<!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图片轮播[左右轮播的更多相关文章

  1. JS图片自动和可控的轮播切换特效

    点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...

  2. 分别用css3、JS实现图片简单的无缝轮播功效

    本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...

  3. js图片轮播效果实现代码

    首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...

  4. js 图片轮播简单版

    <html> <head> <meta charset="utf-8" /> <title></title> <s ...

  5. JS封装动画框架,网易轮播图,旋转轮播图

    JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...

  6. js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

  7. 原生js面向对象编程-选项卡(自动轮播)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. JS图片Switchable切换大集合

    JS图片切换大集合 利用周末2天把JS图片切换常见效果封装了下,比如:轮播,显示隐藏,淡入淡出等.废话不多说,直接看效果吧!JSFiddler链接如下: 想看JS轮播切换效果请点击我! 当然由于上传图 ...

  9. 支持无限加载的js图片画廊插件

    natural-gallery-js是一款支持无限加载的js图片画廊插件.该js图片画廊支持图片的懒加载,可以对图片进行搜索,分类,还可以以轮播图的方式来展示和切换图片. 使用方法 在页面中引入下面的 ...

随机推荐

  1. 开源！js实现微信/QQ直接跳转到支付宝APP打开口令领红包！附：demo

    最近支付宝的领红包可真是刷爆了各个微信群啊,满群都是支付宝口令. 可是这样推广可不是办法,又要复制又要打开支付宝又要点领取,太麻烦了. 于是乎,提出了一个疑问!是否可以在微信里面点一个链接然后直接打开 ...

  2. idea 远程代码调试

    声明一点:重要的事情说3遍 本地代码和服务器代码必须一致 本地代码和服务器代码必须一致 本地代码和服务器代码必须一致 第一步,创建remote 第二步.填写服务器信息 第三部.tomcat/bin/s ...

  3. TCP层shutdown系统调用的实现分析

    概述 shutdown系统调用在tcp层会调用两个函数,对于ESTABLISHED状态需要调用tcp_shutdown关闭连接,对于LISTEN和SYN_SENT状态则需要以非阻塞模式调用tcp_di ...

  4. SpringMVC @ResponseBody返回中文乱码

    SpringMVC的@ResponseBody返回中文乱码的原因是SpringMVC默认处理的字符集是ISO-8859-1, 在Spring的org.springframework.http.conv ...

  5. ccf 201612-3 权限查询

     ccf 201612-3 权限查询 解题思路: 建立一个二维矩阵存储权限和角色 还差30分emmm #include<iostream> #include<cstring> ...

  6. jxbrowser java代码直接调用js代码

    https://blog.csdn.net/shuaizai88/article/details/73743669 final Browser browser = new Browser(); Bro ...

  7. [Hibernate]知识点

    本笔记只介绍注解的方法 一.准备工作: a.添加三个pojo类: Product: package pojo; import javax.persistence.*; import java.util ...

  8. Docker，用任何工具链和任何语言来构建任何应用

    在看过Docker的两个Hello World的程序后,我们对Docker有了一个大概的感性的认识,那么Docker是到底是什么呢?Docker是一个面向开发者和系统管理员编译,装载,和运行分布式应用 ...

  9. SAP EXCEL OLE常用方法和属性

    1.创建application: CREATE OBJECT excel 'EXCEL.APPLICATION'. 2.设置显示模式,为1前台运行,为0时表示为后台运行. . 3.设置为不弹消息框(在 ...

  10. Django-ORM之ForeignKey的使用-多对一关系

    ForeignKey使用俩表示两张表多对一关系的外键,外键字段要定义在多属性的表中. 定义外键时,to的表可以直接写类名,但是需要注意类的定义顺序:也可以写字符串式的类名,这样就可以忽略class类的 ...