一个存在bug 的banner效果 ， 希望大神们帮忙解决一下 ， 先谢谢各位了 ! 或者大家有什么建议可以随时反馈。
html 代码效果预览&!doctype html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&关于自己基于jquery插件的测试页面&/title&
&style type=&text/css&&
html,body{
padding: 0;
margin: 0;
list-style:
margin: 0;
padding: 0;
&div class=&banner&&
&ul id=&banner-wrap&&
&img src=&http://img1./it/u=,&fm=21&gp=0.jpg&&
&img src=&http://img5./it/u=,&fm=21&gp=0.jpg&&
&img src=&/15_2.jpg&&
&img src=&.cn//Mypsd_B.jpg&&
&img src=&/back_pic/qk/back_origin_pic/00/04/42/eadb401dd4cf4372dcf7e2.jpg&&
&script src=&/jquery/1.9.1/jquery.min.js&&&/script&
(function($){
*实现简单的banner 效果
*BannerSwiper.creat({
width:null,
height:null,
boxWrap:null,//必填
nextBtn:false,//是否展示向右点击按钮
prevBtn:false,//是否展示想左点击按钮
autoPlay:true,//是否启动自动播放
times:3000,//自动轮播的时间间隔,
speed:600,//点击按钮是切换的速度
circle:false,//是否启动小圆点
circleAlign:&center&,//小圆点的对其方式
circleClick:false,//小圆点是否可以点击
circlewrapsty:{}, //小圆点外边盒子的样式
dotsty:{},
//小圆点的样式
//当前小圆点的样式
prevbtnsty:{},
//向左点击按钮的样式
nextbtnsty:{}
//向右点击按钮的样式V
function BannerSwiper(option){
// 默认属性设置
this.options = {
width:null,
height:null,
boxWrap:null,//必填
nextBtn:false,//是否展示向右点击按钮
prevBtn:false,//是否展示想左点击按钮
autoPlay:true,//是否启动自动播放
times:3000,//自动轮播的时间间隔,
speed:600,//点击按钮是切换的速度
circle:false,//是否启动小圆点
circleAlign:&center&,//小圆点的对其方式
circleClick:false,//小圆点是否可以点击
circlewrapsty:{
'bottom':'0',
&position&:&absolute&,
'right':'0',
'left':'0',
'height':'20px',
&padding&:&0 10px&,
'text-align':'center'
//小圆点的样式
'height':'15px',
'width':'15px',
'borderRadius':'10px',
'background':'#2196f3',
'display':'inline-block',
'margin':'5px',
//当前小圆点的样式
'background':'green'
prevbtnsty:{
//向左点击按钮的样式
'display':'block',
'height':'80px',
'width':'30px',
'background':'rgba(0,0,0,.5)',
'position':'absolute',
'top':'50%',
'marginTop':'-40px',
'fontSize':'30px',
'lineHeight':'80px',
'textAlign':'center',
'textDecoration':'none',
'color':'white',
'opacity': 0,
'transition': 'opacity 0.8s ease'
nextbtnsty:{
//向右点击按钮的样式
'display':'block',
'height':'80px',
'width':'30px',
'background':'rgba(0,0,0,.5)',
'position':'absolute',
'right':0,
'top':'50%',
'marginTop':'-40px',
'fontSize':'30px',
'lineHeight':'80px',
'textAlign':'center',
'textDecoration':'none',
'color':'white',
'opacity': 0,
'transition': 'opacity 0.8s ease'
默认属性设置
this.width = document.documentElement.clientW
this.time=
$.extend(true,this.options,option);
//console.log(this.options)
self.flag=
self.bulid();
BannerSwiper.prototype = {
// 基本构建
bulid:function(){
var mainobj = $(self.options.boxWrap);
self.num=1;
self.width=$(window).width();
var firstImg=mainobj.find('li').first();
var lastImg=mainobj.find('li').last();
mainobj.append(firstImg.clone());
mainobj.prepend(lastImg.clone());
self.length=mainobj.find('li').
mainobj.width(self.width*self.length);
mainobj.find('li').width(self.width)
mainobj.parent().height(self.options.height);
mainobj.parent().width(self.width);
mainobj.parent().css({
'position': 'relative',
'overflow':'hidden'
mainobj.css({
'left':-self.width*self.num,
'position':'absolute'
mainobj.find(&li&).css({
'float': 'left'
mainobj.find(&img&).css({
'width':'100%'
// 是否启动自动轮播
if(self.options.autoPlay){
self.plays();
// 是否启动按钮
if(self.options.nextBtn){
self.NextBtn();
// 是否启动按钮
if(self.options.prevBtn){
self.prevBtn();
// 是否启动小圆点
if(self.options.circle){
self.circle()
if(self.options.circleClick){
self.clickCircle();
// 鼠标移入时
mainobj.parent().on('mouseenter',function(){
var preBtn = $(this).find('.prevBtn');
var nexBtn = $(this).find('.nextBtn');
preBtn.css(&opacity&,1);
nexBtn.css('opacity',1)
self.stops();
// 鼠标移出时
mainobj.parent().on('mouseleave',function(){
var preBtn = $(this).find('.prevBtn');
var nexBtn = $(this).find('.nextBtn');
preBtn.css('opacity',0);
nexBtn.css('opacity',0)
self.plays.apply(self);
// 开始计时器，自动轮播
plays:function(){
var mainobj = $(self.options.boxWrap)
// self.stops();
//console.log('play')
self.time=setInterval(function(){
self.go(-self.width)
},self.options.times);
// 停止计时器
stops:function(){
var self =
//console.log('stop');
clearInterval(self.time)
// 手动创建左边按钮
prevBtn:function(){
var mainobj = $(self.options.boxWrap)
var ele=$(&&a href='javascript:;' class='prevBtn'&&&/a&&);
mainobj.parent().append(ele);
ele.css(this.options.prevbtnsty)
ele.bind(&click&,function(){
self.go(self.width);
// 手动创建右边元素
NextBtn:function(){
var mainobj = $(self.options.boxWrap);
var ele=$(&&a href='javascript:;' class='nextBtn'&&&/a&&);
mainobj.parent().append(ele)
ele.css(self.options.nextbtnsty)
ele.bind(&click&,function(){
self.go(-self.width);
// 手动创建小圆点
circle:function(){
var mainobj = $(self.options.boxWrap)
var ele=$('&div class=&circle-wrap&&&/div&');
for(var i=0;i&self.length-2;i++){
$('&a class=&dot& href=&javascript:;&&&/a&').appendTo(ele)
ele.css(self.options.circlewrapsty);
ele.find(&.dot&).css(self.options.dotsty)
mainobj.parent().append(ele);
self.playCircle(self.num-1);
// 小圆点指定当前项
playCircle:function(num){
var self =
var mainobj = $(self.options.boxWrap);
$(self.options.boxWrap + & .dot&).eq(num).addClass('on').siblings().removeClass('on');
$(&.dot&).css(self.options.dotsty)
$(&.on&).css(self.options.onsty);
// 点击小圆点
clickCircle:function(){
var mainobj = $(self.options.boxWrap);
var dot = mainobj.find(&.dot&);
dot.on('click',function(){
self.num=$(this).index()+1;
alert(&ajdsaif&)
self.circlePlay()
// 点击小圆点 ， 图片切换
circlePlay:function(){
var self =
self.flag=
if(self.flag){
self.flag=
$(self.options.boxWrap).stop().animate({
'left':-self.num*self.width
},self.options.speed,function(){
self.flag=
self.playCircle(this.num-1);
// 点击按钮，进行轮播,以及自动轮播
go:function(offset){
if(self.flag){
self.flag=
if(offset&0){
self.num++;
if(self.num&self.length-2){
self.num=1;
if(offset&0){
self.num--;
if(self.num&=0){
self.num=self.length-2
if(Math.ceil($(self.options.boxWrap).position().left)&-(self.length-2)*self.width){
$(self.options.boxWrap).css({
'left':-self.width
if(Math.ceil($(self.options.boxWrap).position().left)&-self.length){
$(self.options.boxWrap).css({
'left':-self.width*(self.length-2)
self.playCircle(this.num-1);
$(self.options.boxWrap).stop().animate({
'left':$(self.options.boxWrap).position().left+offset
},self.options.speed,function(){
self.flag=
BannerSwiper.creat = function(json){
new BannerSwiper(json)
window['BannerSwiper'] = BannerS
})(jQuery)
BannerSwiper.creat({
boxWrap:&#banner-wrap&,
nextBtn:true,
prevBtn:true,
autoPlay:true,
circle:true,
circleClick:true,
dotsty:{},
width:'100%',
height:'450px',
circleClick:true,
nextbtnsty:{
'background':'red',
看起来代码写的不错，我都没你这水平 //：同是前端的新手 //：些的挺高级的，是否教教我，哈哈哈
同是前端的新手 //：些的挺高级的，是否教教我，哈哈哈
些的挺高级的，是否教教我，哈哈哈
已经完美解决，谢谢各位
记录了， 调用两次就会出现问题 //：小圆点没有记录当前显示第几张
小圆点没有记录当前显示第几张
第一张图裂了，我以为没有什么效果，原来有左右的按钮。
小圆点这里的效果 ， 以及点击小圆点 ， 一个页面调用两侧小圆点这里存在问题
2 总笔记数
715 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：一道关于不等式的题，希望各位大神能帮我理理思路，万分感谢！！_百度知道小木虫 --- 500万硕博科研人员喜爱的学术科研平台
&&查看话题
希望大神能给一个以下物质合成的思路，谢谢
以下给出的原料和目标产物（10-20克），希望能给出合成思路
QQ截图.jpg
其实我是想知道有没有相关的文献，我自己在做试验的时候总是得不到好的结果，我觉得是实验过程中某些步骤，或者试剂不对，想参考一些文献，再进行改进
研究生必备与500万研究生在线互动！
扫描下载送金币
浏览器进程
登录小木虫
打开微信扫一扫
随时随地聊科研一个ACM的题，求大神帮忙一个ACM的题，求大神帮忙希望能给我个具体的解题思路！！完全-知识宝库
你可能对下面的信息感兴趣希望大神能给我思路_c#吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：90,066贴子：
希望大神能给我思路收藏
像这样一个窗体，每个格子代表不同的问题，都会进入另一个窗体，有一个随机数会引导那个picturebox前进，主要是不知道怎样让他在格子上移动，到达不同的格子，问题也会不同（ps：picturebox所在的地方是起点，到终点停止），请有想法的大神联系我，QQ:
net开发培训上海10强,我选&达内&美国上市培训机构,口碑更好,先就业后付款.达内net开发培训20万名学员毕业,真正工作后再交学费的net培训.
把你的代码给我好嘛？
很牛逼┗(･ω･;)┛
既然图都有了，重新画你的小狐狸就好了，算好x,y硬画也行
用一个List记录好所有的题目顺序啊
没懂你的意思，不过感觉你是想用链表集合的样子
在产生随机数之后，用一个计时器，一秒触发一次，计时器里面就把pictureBox的location属性设置到路线的下一个位置，（需要事先把路线中所有的位置的左上角坐标定好位，最好放在一个Point[]数组中），设置好location属性之后，调用invalidate()方法使窗体重绘，最后你产生的随机数是几，计时器就触发几次，用一个变量跟随，触发一次自加1，然后当变量大于等于随机数时调用timer1.Stop()方法结束计时器。只是思路，可以参考下。
应该还简单吧这个,做一个方法,输入x1,y1(起点) x2,y2(终点),maxLine(最大允许走多少路),out x3,y3(返回狐狸走到什么地方或者干脆不返回,直接方法里把图片移动到那边) 方法返回bool类型,当起点到终点小于maxLine的时候就返回true(走到了)然后做一个timer反复调用方法,直到到达终点了停止,就可以了,当然你说往上走你不希望是斜走的,那就每次最开始的起点跟终点是连着的两个图片的x,y就可以了.
不难吧，随机数设置第一个位置，然后后面的随机第一个方块四个方向向外延伸，直到终点
可以直接把图面显示到另一个控件上，简单暴力
using Susing System.Collections.GponentMusing System.Dusing System.Dusing System.Lusing System.Tusing System.Windows.Fusing System.Tnamespace WindowsFormsApplication4{
public partial class PictureMove : Form
public PictureMove()
InitializeComponent();
List&Button& ButtonC
int num = 1,nowindex=-1;
bool isgoback =
private void PictureMove_Load(object sender, EventArgs e)
ButtonControls = new List&Button&();
public void init()
foreach (Control control in this.Controls)
if (control is Button)
if (control.Text == &button& + num)
ButtonControls.Add((Button)control);
if (ButtonControls.Count
&= 12) { init(); }
pictureBox1.Location = new Point(-2, 298);
label1.Text = &点击随机数开始&;
pictureBox1.Visible =
num = 1; nowindex = -1;
private void button13_Click(object sender, EventArgs e)
button13.Enabled =
Random ran = new Random();
num = ran.Next(1, 7);
label1.Text = &当前点数& + num.ToString();
thread = new Thread(new ParameterizedThreadStart(move));
thread.Start(new object[] { pictureBox1, num, nowindex });
private void move(object obj)
pictureBox1.Visible =
object[] newobj=(object[])
int step =(int) newobj[1];
PictureBox pb = (PictureBox)newobj[0];
int index = (int)newobj[2];
if (step == 0) { isgoback = button13.Enabled = nowindex = index + if (nowindex == 11) { MessageBox.Show(&win&); init(); } }
if (index + 1 & 12&&isgoback==false)
pb.Top = ButtonControls[index+1].T
pb.Left = ButtonControls[index+1].L
System.Threading.Thread.Sleep(500);
move(new object[]{ pb, step - 1, index + 1});
if(index+1&11&&isgoback==false)
isgoback =
pb.Top = ButtonControls[index - 1].T
pb.Left = ButtonControls[index - 1].L
System.Threading.Thread.Sleep(500);
move(new object[]{ pb, step - 1, index - 1});
if (index + 1 &= 11 && isgoback)
pb.Top = ButtonControls[index - 1].T
pb.Left = ButtonControls[index - 1].L
System.Threading.Thread.Sleep(500);
move(new object[]{ pb, step - 1, index - 1});
想弹出题目的话
就先把题目写在button事件里面或者写个list
然后在move方法里面进行弹出 题目操作
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或}