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 相关文章推荐
javascript函数定义的几种区别小结
Jan 06 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
13个PHP函数超实用
Oct 21 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 Javascript
vue实现表格过滤功能
Sep 27 Javascript
vue.config.js常用配置详解
Nov 14 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 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 随机生成10位字符代码
2009/03/26 PHP
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
php获取远程文件大小
2015/10/20 PHP
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
js模糊查询实例分享
2016/12/26 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
浅谈MySQL中的触发器
2015/05/05 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
复核员上岗演讲稿
2014/01/05 职场文书
幼儿园校车司机的岗位职责
2014/01/30 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
幼儿园教师求职信
2015/03/20 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang
CPU不支持Windows11系统怎么办
2021/11/21 数码科技