jQuery实现图片向左向右切换效果的简单实例


Posted in Javascript onMay 18, 2016

jQuery实现图片向左向右切换效果的简单实例

<div class="imageRotation container">
<div class="imageBox">


<img src="images/chugui.jpg">


<img src="images/ad_auto.jpg">


<img src="images/ad_home.jpg">


<img src="images/ad_nba.jpg">


<img src="images/ad_stock.jpg">


<img src="images/ad_yuetu.jpg">

</div>

<div class="iconBox">


<span rel="1" class="active">1</span>


<span rel="2">2</span>


<span rel="3">3</span>


<span rel="4">4</span>


<span rel="5">5</span>


<span rel="6">6</span>

</div>
</div>

 

//CSS样式

.container {

width: 1000px;

margin: 0 auto;
}


.imageRotation {

width: 1000px;

height: 480px;

position: relative;

overflow: hidden;

margin-top: 8px;
}


.imageBox {

position: absolute;

overflow: hidden;

display: block;

height: 480px;
}


.imageBox img {

width: 1000px;

height: 480px;

float: left;

border: none;

display: block;
}


.iconBox {

position: absolute;

width: 120px;

height: 12px;

line-height: 12px;

top: 444px;

right: 20px;

text-align: center;
}


.iconBox span {

width: 6px;

height: 6px;

border-radius: 10px;

text-align: center;

background: #555;

border: 2px solid #f5f5f5;

float: left;

text-indent: -999em;

margin-left: 5px;

cursor: pointer;
}


.iconBox span.active {

width: 6px;

height: 6px;

background: #820000;

border-radius: 10px;

text-align: center;

text-indent: -999em;
}

 

//js逻辑

$(function() {

$(".imageRotation").each(function() {


var imageRotation = this,


imageBox = $(imageRotation).children(".imageBox"), 


iconBox = $(imageRotation).children(".iconBox"), 


iconArr = $(iconBox).children(), 


imageWidth = $(imageRotation).width(), 



imageNum = $(imageBox).children().size(), 


imageRollWidth = imageWidth * imageNum,



activeID = parseInt($($(iconBox).children(".active")).attr("rel")),



nextID = 0; 


var setIntervalID,


setIntervalTime = 3000,


speed = 500;




//设置 图片容器 的宽度

$(imageBox).css({


'width': imageRollWidth + "px"


});


//图片切换函数

function imageRoll(clickID) {


if (clickID) {


nextID = clickID;


} else {



if (activeID <= 5) {




nextID = activeID + 1



} else {


nextID = 1;



}


}



//图标添加样式、删除样式


$(iconArr[activeID - 1]).removeClass("active");


$(iconArr[nextID - 1]).addClass("active");



$(imageBox).animate({



left: "-" + (nextID - 1) * imageWidth + "px"



}, speed);


activeID = nextID;

}


setIntervalID = setInterval(imageRoll, setIntervalTime);


//鼠标移动事件

$(imageBox).hover(function() {


clearInterval(setIntervalID);

}, function() {

setIntervalID = setInterval(imageRoll, setIntervalTime);
});



//鼠标点击事件


$(iconArr).click(function() {



clearInterval(setIntervalID);



var clickID = parseInt($(this).attr("rel")); //获取当前点击图片的id



imageRoll(clickID);



setIntervalID = setInterval(imageRoll, setIntervalTime);



});

 });
});

以上这篇jQuery实现图片向左向右切换效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
利用JQuery为搜索栏增加tag提示
Jun 22 Javascript
javascript入门基础之私有变量
Feb 23 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
vuejs简单验证码功能完整示例
Jan 08 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
JavaScript 基础函数_深入剖析变量和作用域
May 18 #Javascript
实现JavaScript的组成----BOM和DOM详解
May 18 #Javascript
深入理解JQuery中的事件与动画
May 18 #Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 #Javascript
jQuery添加options点击事件并传值实例代码
May 18 #Javascript
详解JavaScript实现设计模式中的适配器模式的方法
May 18 #Javascript
深入剖析javascript中的exec与match方法
May 18 #Javascript
You might like
php zend解密软件绿色版测试可用
2008/04/14 PHP
php中用foreach来操作数组的代码
2011/07/17 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
微信自定义分享php代码分析
2016/11/24 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
electron踩坑之dialog中的callback解决
2020/10/06 Javascript
[01:04:22]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 IG vs EG
2018/04/01 DOTA
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
python爬取youtube视频的示例代码
2021/03/03 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
年度考核自我鉴定
2013/11/09 职场文书