相思资源网 Design By www.200059.com
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="/UploadFiles/2021-04-02/jquery-1.9.1.min.js">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')"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。
以上所述就是本文的全部内容了，希望大家能够喜欢。
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无jQuery插件boxScroll实现图片轮播特效的评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。