|
jQuery实现图片向左向右切换效果的简单实例
1
2
3
4
5
6
//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
以上这篇jQuery实现图片向左向右切换效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
|