帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 原生JS写的带标题和序号的轮播图效果
原生JS写的带标题和序号的轮播图效果
浏览:662次
-
评论:0次
-
发布时间:2018-03-19
Html
Css
Js
一
二
三
四
五
1
/5
白少在双拥广场玩耍
<
>
正常模式
循环模式
body,ul{margin: 0;padding:0} li{list-style: none} button:focus{outline: 0} .wrap,.btn{ position: relative; width:600px; height: 335px; margin: 35px auto } .btn{ height: 65px; text-align: center;} .wrap>ul>li{ position: absolute; display: none; width:100%; height:100%; color:#fff; text-align:center; line-height:335px; font-size:48px; } .wrap>ul>li.active{ display: block;} .arrow{ position: absolute; width: 25px; height: 50px; top:50%; margin-top: -25px; color:#fff; line-height: 50px; text-align: center; font-size: 24px; font-weight: bold; cursor: pointer; background-color: rgba(51,136,125,.5); } .arrow:hover{ background-color: rgba(51,136,125,.9);} .a-left{ left: 0;} .a-right{right: 0;} .intro{ position: absolute; width: 100%; height: 38px; line-height: 38px; font-size:16px; color:#fff; text-align: center; background-color: rgba(0,0,0,.6); } .t-num{ top: 0;} .b-title{ bottom: 0;} .btn>button{ width: 100px; height: 38px; color: #fff; font-size: 16px; font-weight: bold; background-color: MediumVioletRed; border:solid 1px #ccc; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; margin: 15px; cursor: pointer; } .btn>button.active{background-color: orange} .btn>button:hover{background-color: #935404}
/**Created by by(2292269685@qq.com) on 2018/3/7*/ //get the object var oLi = document.getElementsByTagName("li"), //获取图片 leftArrow = document.getElementsByClassName("a-left")[0], //获取左边按钮 rightArrow = document.getElementsByClassName("a-right")[0], //获取右边按钮 topBar = document.querySelector(".t-num span"), //显示顶部数字用 btmBar = document.getElementsByClassName("b-title")[0], //显示底部简介用 btns = document.getElementsByTagName("button"), //获取正常播放和循环播放两个按钮 arrTitle = ["白少在双拥广场玩耍","白少在研究口红","白少在五岳独尊静坐","恩,是男神,没错儿","少爷在卖萌^_^"], //用数组按顺序存储标题 len = oLi.length, //用来获取图片的张数 index = 0, //用来存储当前图片的索引值 mark = true; //用来标记是单边播放还是循环播放,这里默认true为循环播放;false则为正常播放模式 //正常播放按钮事件 btns[0].onclick = function () { this.className = 'active'; btns[1].className = ""; mark = false ; } //循环播放按钮事件 btns[1].onclick = function () { this.className = 'active'; btns[0].className = ""; mark = true ; } leftArrow.onclick = fn; rightArrow.onclick = fn; //通过自定义属性来标记是否是点击上一张图片 leftArrow.isPrev = true; rightArrow.isPrev = false ; function fn() { oLi[index].className = ''; //隐藏当前图片 if(this.isPrev){ //如果为true,则是点击上一张图片 index--; //序号自减,到上一张的索引值 if(mark){ // 如果是循环播放 if(index<0){ index = len-1; } }else { //如果是单边播放 if(index<0){ index = 0; alert("前边没有了") } } }else { //否则的话,是点击下一张图片 index++; //序号自减,到上一张的索引值 if(mark){ // 如果是循环播放 if(index>len-1){ index = 0; } }else { //如果是单边播放 if(index>len-1){ index = len-1; alert("后边边没有了") } } } oLi[index].className = 'active'; topBar.innerHTML = index + 1; btmBar.innerHTML = arrTitle[index]; }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>原生JS写的带标题和序号的轮播图效果-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:纯原生js写的轮播图,代码简洁容易修改,兼容性好
代码简单易修改,注释清晰明了
好看实用的星星评分插件
纯CSS3制作旋转饼状图效果
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
662
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值