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 相关文章推荐
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
jQuery实现的简单百分比进度条效果示例
Aug 01 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
手动初始化Angular的模块与控制器
Dec 26 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 Javascript
Js类的构建与继承案例详解
Sep 15 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 Javascript
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编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
jQuery让控件左右移动的三种实现方法
2013/09/08 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python字符串的常用操作方法小结
2016/05/21 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
python按照多个条件排序的方法
2019/02/08 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
python包的导入方式总结
2021/03/02 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
资料员的岗位职责
2013/11/20 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
2016年党建工作简报
2015/11/26 职场文书
教师学习心得体会范文
2016/01/21 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
学校团代会开幕词
2016/03/04 职场文书