Posted in Javascript onJuly 14, 2015
BoxScroll
常见图片轮播效果的简单实现。可以数字列表控制或者左右按键控制。逻辑很简单，到了尽头得往回跑，看看注释就知道了。
代码如下:
HTML
<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="" name="keywords" />
<meta content="" name="description" />
<meta name="author" content="codetker" />
<head>
<title>简易图片轮播插件</title>
<link href="style/reset.css" rel="stylesheet" type="text/css">
<link href="style/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.codetker.boxScroll.js"></script>
</head>
<body>
<div class="wrap">
<div class="scrollBox">
<div class="picOuterBox boxStyle">
<div class="arrow arrowLeft">ToLeft</div>
<div class="arrow arrowRight">ToRight</div>
<ul class="picInnerBox boxStyle">
<li>
<a href="" title="">
<img src="images/test.jpg" alt="">
</a>
</li>
<li>
<a href="" title="">
<img src="images/test.jpg" alt="">
</a>
</li>
<li>
<a href="" title="">
<img src="images/test.jpg" alt="">
</a>
</li>
<li>
<a href="" title="">
<img src="images/test.jpg" alt="">
</a>
</li>
<li>
<a href="" title="">
<img src="images/test.jpg" alt="">
</a>
</li>
</ul>
</div>
<div class="picControl">
<ul>
<li class="liSelected">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".scrollBox").boxScroll();
});
</script>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
body{
margin:0 0;
padding:0 0;
height:100%;
width:100%;
}
.wrap{
font-family:"微软雅黑","宋体", Times, "Times New Roman", serif;
font-size:14px;
margin:0 0;
padding:0 0;
height:100%;
width:100%;
overflow:hidden;
}
.boxStyle{/*照片大小*/
width: 500px;
height: 256px;
}
.scrollBox{
position: relative;
width: 500px;
margin: 0 auto;
}
.picInnerBox{
width: 10000px;/*足够大能放下即可,如果需要上下滚动，改height*/
overflow: hidden;
}
.picInnerBox li{
cursor: pointer;
float: left;
}
.picOuterBox{
overflow: hidden;
}
.arrow{
position: absolute;
top: 45%;
height: 40px;
cursor: pointer;
z-index: 99;
}
.arrow:hover{
color: #fff;
}
.arrowLeft{
float: left;
left: 5%;
}
.arrowRight{
float: right;
right: 5%;
}
.picControl{
overflow: auto;
width: 100px;
margin: 0 auto;
}
.picControl ul li{
cursor: pointer;
float: left;
width: 20px;
height: 20px;
text-align: center;
}
.picControl ul li:hover{
color:red;
}
.liSelected{
color: red;
}
JavaScript
/*
* boxScroll 0.1
* 兼容等常见浏览器
*/
;(function($,window,document,undefined){
//定义构造函数
var BoxObj=function(ele,opt){
this.$element=ele; //最外层对象
this.defaults={
'style': 0 ,//滚动样式选择,默认为普通效果
'speed': 1 ,//默认为1s
'direction': 'left',//默认为向左边滚动
'toLeft':$(ele).children('.picOuterBox').children('.arrowLeft'),//默认格式下重要位置
'toRight':$(ele).children('.picOuterBox').children('.arrowRight'),
'ControlUl':$(ele).children('.picControl').children('ul')
},
this.options=$.extend({},this.defaults,opt );
//这里可以添加一些通用方法
}
//给构造函数添加方法
BoxObj.prototype={
commonScroll:function(){
//接收对象属性
var boxWindow=$(this.$element).children('.picOuterBox').children('.picInnerBox');
var speed=this.defaults.speed;
var style=this.defaults.style;
var direction=(this.defaults.direction=='left')? 1 : -1;
var toLeft=this.defaults.toLeft;
var toRight=this.defaults.toRight;
var Control=this.defaults.ControlUl;
var boxWidth=$(boxWindow).children('li').width();
var imgIndexMax=$(boxWindow).children('li').length;
var imgIndex;
function getImgIndex(){//判断当前图片的位置
imgIndex=Math.round(parseInt($(boxWindow).css("margin-left"))*(-1)/boxWidth);
}
var timer;//必须在外面定义保证全局针对这一功能只有这一个计时器
timer=setInterval(function(){
boxScroll(imgIndex,direction);
},5000);
function rest(){
clearInterval(timer);
timer=setInterval(function(){
boxScroll(imgIndex,direction);
},5000);
}
//绑定点击按钮
$(Control).delegate('li', 'click', function() {
boxScroll($(this).index(),0);
rest();
});
//绑定左右按钮
$(toLeft).click(function() {
boxScroll(0,-1);
rest();
});
$(toRight).click(function() {
boxScroll(0,1);
rest();
});
function boxScroll(index,dir){
if (!$(boxWindow).is(':animated')) {//当ul窗口没有在动时
if(!dir){//响应ul li control操作
//此时dir=0，则依靠传入的imgIndex
imgIndex=index;
//其它时候dir!=0,则依靠dir
}else{//响应toLeft和toRight
if(dir==1){//向右动
getImgIndex();
if (imgIndex==(imgIndexMax-1)) {
imgIndex=0;
}else{
imgIndex+=1;
}
}else{//向左动
getImgIndex();
if (imgIndex==0) {
imgIndex=(imgIndexMax-1);
}else{
imgIndex-=1;
}
}
}
$(Control).children('li').eq(imgIndex).addClass('liSelected');
$(Control).children('li').eq(imgIndex).siblings().removeClass('liSelected');
$(boxWindow).animate({
"margin-left":imgIndex*boxWidth*(-1)+'px'
}, 1000*speed);
}
}
}
}
//在插件中使用windowObj对象的方法，0为vertical，1为horizontal
$.fn.boxScroll=function(options){
//创建实体
var boxObj=new BoxObj(this,options);
//用尾调的形式调用对象方法
return boxObj.commonScroll();
}
})(jQuery,window,document);
详细下载参见https://github.com/codetker/myBoxScroll。
以上所述就是本文的全部内容了，希望大家能够喜欢。
jQuery插件boxScroll实现图片轮播特效
- Author -
hebedich声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@