美文网首页
在简书中如何引用代码

在简书中如何引用代码

作者: 黑猫乄 | 来源:发表于2017-01-12 14:11 被阅读0次

    算啦，先看图


    3806983-6a7f15520d7c431c[1].gif

    实现效果：
    图片自动轮播，鼠标移入停止，移出继续轮播
    点击左右按钮实现切换
    点击下标焦点实现切换
    1、首先实现无缝滚动：
    效果：


    3806983-2fd60db3f19f07e1[1].gif
    原理：
    让ul里的第一个 li 和最后一个 li 内容相同；

    通过改变left值，让ul在box中移动；
    当移动到最后一个的时候，在让ul回到其实位置；


    3806983-adfa4db3c943772e[1].png
    代码实现： 
    window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","errorBeacon":"bam.nr-data.net","licenseKey":"1255494d3a","applicationID":"15702971","transactionName":"e1daR0JWVV9RER9ZWkxdRxxDUVZE","queueTime":5,"applicationTime":62,"agent":""}

 
window.NREUM||(NREUM={}),__nr_require=function(e,t,n){function r(n){if(!t[n]){var o=t[n]={exports:{}};e[n][0].call(o.exports,function(t){var o=e[n][1][t];return r(o||t)},o,o.exports)}return t[n].exports}if("function"==typeof __nr_require)return __nr_require;for(var o=0;o
轮播图—纯js(javascript)实现： - 简书

/* Copyright 2014 Evernote Corporation. All rights reserved. */.en-markup-crop-options { top: 18px !important; left: 50% !important; margin-left: -100px !important; width: 200px !important; border: 2px rgba(255,255,255,.38) solid !important; border-radius: 4px !important;}.en-markup-crop-options div div:first-of-type { margin-left: 0px !important;}

<!DOCTYPE html>
<html
lang
="en"
>
<head
>
<meta
charset
="UTF-8"
>
<title
>
无缝滚动</title
>
</head
>
<style
type
="text/css"
>
 *{ margin
: 0
; padding
: 0
; } .box
{ background
: red; width
: 600px
; height
: 300px
; overflow
: hidden; margin
:100px
auto; position
: relative; } img
{ width
: 600px
; height
: 300px
; vertical-align
: top;/*取消底边的3px */
} ul
{ width
: 500%
; height
: 300px
; list-style
: none; position
: absolute; left
: 0
; top
: 0
; } li
{ float
: left; }
</style
>
<body
>
<div
class
="box"
id
="box"
>
<ul
id
="inner-box"
>
<li
>
<img
src
="banner/banner1.jpg"
>
</li
>
<li
>
<img
src
="banner/banner2.jpg"
>
</li
>
<li
>
<img
src
="banner/banner3.jpg"
>
</li
>
<li
>
<img
src
="banner/banner4.jpg"
>
</li
>
<li
>
<img
src
="banner/banner1.jpg"
>
</li
>
</ul
>
<ol
class
=""
>
<li
class
="current"
>
1</li
>
<li
>
2</li
>
<li
>
3</li
>
<li
>
4</li
>
<li
>
5</li
>
</ol
>
</div
>
</body
>
<script
type
="text/javascript"
>
 var
oBox = document
.getElementById("box"
); var
oUl = document
.getElementById("inner-box"
); var
a = 0
; //定义一个变量用于设置left值
var
timer = null
; //定义一个计时器
var
target = 500
; timer = setInterval(autoPlay,10
);// 定义计时器每25毫秒执行一次
function
autoPlay
(
)
{ //执行每次执行函数，left值减1
a--; a <= -400
? a = 0
:a; oUl.style.left = a+"%"
; } oBox.onmouseover = function
(
)
{ //移出时清除计时器
clearInterval(timer); } oBox.onmouseout=function
(
)
{ //移入时开始计时器
timer = setInterval(autoPlay,10
); }
</script
>
</html
>

    2、加入缓冲的匀速运动：
    原里：改变每次变化的速度

    3806983-8b04bf0bbb19165b[1].gif

    代码实现

    window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","errorBeacon":"bam.nr-data.net","licenseKey":"1255494d3a","applicationID":"15702971","transactionName":"e1daR0JWVV9RER9ZWkxdRxxDUVZE","queueTime":5,"applicationTime":62,"agent":""}

 
window.NREUM||(NREUM={}),__nr_require=function(e,t,n){function r(n){if(!t[n]){var o=t[n]={exports:{}};e[n][0].call(o.exports,function(t){var o=e[n][1][t];return r(o||t)},o,o.exports)}return t[n].exports}if("function"==typeof __nr_require)return __nr_require;for(var o=0;o
轮播图—纯js(javascript)实现： - 简书

/* Copyright 2014 Evernote Corporation. All rights reserved. */.en-markup-crop-options { top: 18px !important; left: 50% !important; margin-left: -100px !important; width: 200px !important; border: 2px rgba(255,255,255,.38) solid !important; border-radius: 4px !important;}.en-markup-crop-options div div:first-of-type { margin-left: 0px !important;}

<!DOCTYPE html>
<html
lang
="en"
>
<head
>
<meta
charset
="UTF-8"
>
<title
>
缓冲无缝滚动</title
>
</head
>
<style
type
="text/css"
>
* { margin
: 0
; padding
: 0
;}.box
{ background
: red; width
: 600px
; height
: 300px
; overflow
: hidden; margin
: 100px
auto; position
: relative;}img
{ width
: 600px
; height
: 300px
; vertical-align
: top; /*取消底边的3px */
}ul
{ width
: 500%
; height
: 300px
; list-style
: none; position
: absolute; left
: 0
; top
: 0
;}li
{ float
: left;}
</style
>
<body
>
<div
class
="box"
id
="box"
>
<ul
id
="inner-box"
>
<li
>
<img
src
="banner/banner1.jpg"
>
</li
>
<li
>
<img
src
="banner/banner2.jpg"
>
</li
>
<li
>
<img
src
="banner/banner3.jpg"
>
</li
>
<li
>
<img
src
="banner/banner4.jpg"
>
</li
>
<li
>
<img
src
="banner/banner1.jpg"
>
</li
>
</ul
>
</div
>
</body
>
<script
type
="text/javascript"
>
var
oBox = document
.getElementById("box"
);var
oUl = document
.getElementById("inner-box"
);var
cur = 0
; //定义一个变量用于设置left值
var
timer = null
; //定义一个计时器
var
target = 0
;timer = setInterval(autoPlay, 2000
); // 定义计时器每25毫秒执行一次
function
autoPlay
(
)
{ //执行每次执行函数，left值减1
if
(target <= -400
) { cur = 0
; target = -100
; } else
{ target -= 100
; } var
timer1 = null
; timer1 = setInterval(autoPlay, 30
); //设置定时器每30毫秒执行一次
function
autoPlay
(
)
{ if
(cur == target) { clearInterval(timer1) //大于目标值时，清空计时器
} else
{ speed = (target - cur) / 7
; //计算速度
speed = speed > 0
? Math
.ceil(speed) : Math
.floor(speed); //取整
cur = cur + speed; oUl.style.left = cur + "%"
; } }}oBox.onmouseover = function
(
)
{ //移出时清除计时器
clearInterval(timer);}oBox.onmouseout = function
(
)
{ //移入时开始计时器
timer = setInterval(autoPlay, 2000
);}
</script
>
</html
>

    3、添加左右点击按钮
    效果：

    3806983-db0b9f0c118cc712[1].gif

    难点：


    3806983-e570d358d7e13bc4[1].png 
    window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","errorBeacon":"bam.nr-data.net","licenseKey":"1255494d3a","applicationID":"15702971","transactionName":"e1daR0JWVV9RER9ZWkxdRxxDUVZE","queueTime":5,"applicationTime":62,"agent":""}

 
window.NREUM||(NREUM={}),__nr_require=function(e,t,n){function r(n){if(!t[n]){var o=t[n]={exports:{}};e[n][0].call(o.exports,function(t){var o=e[n][1][t];return r(o||t)},o,o.exports)}return t[n].exports}if("function"==typeof __nr_require)return __nr_require;for(var o=0;o
轮播图—纯js(javascript)实现： - 简书

/* Copyright 2014 Evernote Corporation. All rights reserved. */.en-markup-crop-options { top: 18px !important; left: 50% !important; margin-left: -100px !important; width: 200px !important; border: 2px rgba(255,255,255,.38) solid !important; border-radius: 4px !important;}.en-markup-crop-options div div:first-of-type { margin-left: 0px !important;}

<!DOCTYPE html>
<html
lang
="en"
>
<head
>
<meta
charset
="UTF-8"
>
<title
>
缓冲无缝滚动</title
>
</head
>
<style
type
="text/css"
>
* { margin
: 0
; padding
: 0
;}.box
{ background
: red; width
: 600px
; height
: 300px
; overflow
: hidden; margin
: 100px
auto; position
: relative;}img
{ width
: 600px
; height
: 300px
; vertical-align
: top; /*取消底边的3px */
}ul
{ width
: 500%
; height
: 300px
; list-style
: none; position
: absolute; left
: 0
; top
: 0
;}li
{ float
: left;}.btn
span
{ width
: 30px
; height
: 50px
; background
: #4a4a4a
; display
: inline-block; position
: absolute; text-align
: center; line-height
: 50px
; font-size
: 24px
; opacity
: 0.4
; cursor
: pointer;}.btn
span
:hover
{ opacity
: 1
; color
: #fff
;}.btn
.left
{ left
: 0
; top
: 125px
;}.btn
.right
{ right
: 0
; top
: 125px
;}
</style
>
<body
>
<div
class
="box"
id
="box"
>
<ul
id
="inner-box"
>
<li
>
<img
src
="banner/banner1.jpg"
>
</li
>
<li
>
<img
src
="banner/banner2.jpg"
>
</li
>
<li
>
<img
src
="banner/banner3.jpg"
>
</li
>
<li
>
<img
src
="banner/banner4.jpg"
>
</li
>
<li
>
<img
src
="banner/banner1.jpg"
>
</li
>
</ul
>
<div
class
="btn"
>
<span
class
="left"
id
="left"
>
<</span
>
<span
class
="right"
id
="right"
>
></span
>
</div
>
</div
>
</body
>
<script
type
="text/javascript"
>
var
oBox = document
.getElementById("box"
);var
oUl = document
.getElementById("inner-box"
);var
oLeft = document
.getElementById("left"
);var
oRight = document
.getElementById("right"
);var
cur = 0
; //定义一个变量用于设置left值
var
timer = null
; //定义一个计时器
var
target = 0
;var
timer1 = null
;timer = setInterval(autoPlay, 2000
); // 定义计时器每25毫秒执行一次
function
autoPlay
(
)
{ //执行每次执行函数，left值减1
if
(target <= -400
) { cur = 0
; target = -100
; } else
{ target -= 100
; } sport(target);}oRight.onclick = function
(argument
)
{ if
(target <= -400
) { cur = 0
; target = -100
; } else
{ target -= 100
; } sport(target);} oLeft.onclick = function
(argument
)
{ if
(target > -100
) { cur -= 400
; target = -300
; } else
{ target += 100
; } sport(target);} function
sport
(tar
)
{ clearInterval(timer1); timer1 = setInterval(autoPlay, 30
); //设置定时器每30毫秒执行一次
function
autoPlay
(
)
{ if
(cur == tar) { clearInterval(timer1) //大于目标值时，清空计时器
} else
{ speed = (tar - cur) / 7
; //计算速度
speed = speed > 0
? Math
.ceil(speed) : Math
.floor(speed); //取整
cur = cur + speed; oUl.style.left = cur + "%"
; } }}oBox.onmouseover = function
(
)
{ //移出时清除计时器
clearInterval(timer);}oBox.onmouseout = function
(
)
{ //移入时开始计时器
timer = setInterval(autoPlay, 2000
);}
</script
>
</html
>

    4、添加底部焦点：
    效果：在最上头；一开始的地方


    3806983-edf1eba4b3bd823f[1].gif

    代码实现：

    window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","errorBeacon":"bam.nr-data.net","licenseKey":"1255494d3a","applicationID":"15702971","transactionName":"e1daR0JWVV9RER9ZWkxdRxxDUVZE","queueTime":5,"applicationTime":62,"agent":""}

 
window.NREUM||(NREUM={}),__nr_require=function(e,t,n){function r(n){if(!t[n]){var o=t[n]={exports:{}};e[n][0].call(o.exports,function(t){var o=e[n][1][t];return r(o||t)},o,o.exports)}return t[n].exports}if("function"==typeof __nr_require)return __nr_require;for(var o=0;o
轮播图—纯js(javascript)实现： - 简书

/* Copyright 2014 Evernote Corporation. All rights reserved. */.en-markup-crop-options { top: 18px !important; left: 50% !important; margin-left: -100px !important; width: 200px !important; border: 2px rgba(255,255,255,.38) solid !important; border-radius: 4px !important;}.en-markup-crop-options div div:first-of-type { margin-left: 0px !important;}

<!DOCTYPE html>
<html
lang
="en"
>
<head
>
<meta
charset
="UTF-8"
>
<title
>
标准轮播图</title
>
</head
>
<style
type
="text/css"
>
* { margin
: 0
; padding
: 0
;}.box
{ width
: 600px
; height
: 300px
; overflow
: hidden; margin
: 100px
auto; position
: relative;}img
{ width
: 600px
; height
: 300px
; vertical-align
: top; /*取消底边的3px */
}ul
{ width
: 500%
; height
: 300px
; list-style
: none; position
: absolute; left
: 0
; top
: 0
;}ul
li
{ float
: left;}.btn
span
{ width
: 30px
; height
: 50px
; background
: #4a4a4a
; display
: inline-block; position
: absolute; text-align
: center; line-height
: 50px
; font-size
: 24px
; opacity
: 0.4
; cursor
: pointer;}.btn
span
:hover
{ opacity
: 1
; color
: #fff
;}.btn
.left
{ left
: 0
; top
: 125px
;}.btn
.right
{ right
: 0
; top
: 125px
;}ol
{ position
: absolute; bottom
: 20px
; left
: 40%
; list-style
: none;}ol
li
{ width
: 10px
; height
: 10px
; border-radius
: 10px
; border
: 1px
solid #fff
; float
: left; margin
: 0
4px
;}
</style
>
<body
>
<div
class
="box"
id
="box"
>
<ul
id
="inner-box"
>
<li
>
<img
src
="banner/banner1.jpg"
>
</li
>
<li
>
<img
src
="banner/banner2.jpg"
>
</li
>
<li
>
<img
src
="banner/banner3.jpg"
>
</li
>
<li
>
<img
src
="banner/banner4.jpg"
>
</li
>
<li
>
<img
src
="banner/banner1.jpg"
>
</li
>
</ul
>
<ol
id
="ol"
>
<li
>
</li
>
<li
>
</li
>
<li
>
</li
>
<li
>
</li
>
</ol
>
<div
class
="btn"
>
<span
class
="left"
id
="left"
>
<</span
>
<span
class
="right"
id
="right"
>
></span
>
</div
>
</div
>
</body
>
<script
type
="text/javascript"
>
var
oBox = document
.getElementById("box"
);var
oUl = document
.getElementById("inner-box"
);var
oLeft = document
.getElementById("left"
);var
oRight = document
.getElementById("right"
);var
cur = 0
; //定义一个变量用于设置left值
var
timer = null
; //定义一个计时器
var
target = 0
;var
timer1 = null
;var
i = 0
;timer = setInterval(autoPlay, 2000
); // 定义计时器每25毫秒执行一次
function
autoPlay
(
)
{ //执行每次执行函数，left值减1
if
(target <= -400
) { cur = 0
; target = -100
; } else
{ target -= 100
; } sport(target); btnBottom();}oRight.onclick = function
(argument
)
{ if
(target <= -400
) { cur = 0
; target = -100
; } else
{ target -= 100
; } sport(target); btnBottom();} oLeft.onclick = function
(argument
)
{ if
(target > -100
) { cur -= 400
; target = -300
; } else
{ target += 100
; } sport(target); btnBottom();} // 增加下标显示效果
btnBottom(i)function
btnBottom
(
)
{ i = -(target/100
); i == 4
? i = 0
: i; var
oOl = document
.getElementById("ol"
); var
oLi = oOl.getElementsByTagName("li"
); for
( j=0
; j<oLi.length ; j++){ oLi[j].style.background = ''
; } oLi[i].style.background = '#fff'
;}// 加点击事件
var
oOl = document
.getElementById("ol"
);var
oLi = oOl.getElementsByTagName("li"
);for
( j=0
; j<oLi.length ; j++){ oLi[j].index = j oLi[j].onclick = function
(
)
{ target = -(this
.index*100
); sport(target); btnBottom() }}function
sport
(tar
)
{ clearInterval(timer1); timer1 = setInterval(autoPlay, 30
); //设置定时器每30毫秒执行一次
function
autoPlay
(
)
{ if
(cur == tar) { clearInterval(timer1) //大于目标值时，清空计时器
} else
{ speed = (tar - cur) / 7
; //计算速度
speed = speed > 0
? Math
.ceil(speed) : Math
.floor(speed); //取整
cur = cur + speed; oUl.style.left = cur + "%"
; } }}oBox.onmouseover = function
(
)
{ //移出时清除计时器
clearInterval(timer);}oBox.onmouseout = function
(
)
{ //移入时开始计时器
timer = setInterval(autoPlay, 2000
);}
</script
>
</html
>

    百度云链接：[http://pan.baidu.com/s/1mi14ijY
    密码：d84v

    相关文章

      网友评论

          本文标题：在简书中如何引用代码

          本文链接：https://www.haomeiwen.com/subject/sbbdbttx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|在简书中如何引用代码|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！