【JavaScript】轮播图
代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title></title>
- <style type="text/css">
- *{margin:0 auto;padding: 0;}
- #LB_div{overflow:hidden;position: relative;}
- #LB_span{background: #000;display: block;position: absolute;}
- #LB_span img{float: left;}
- #LB_zuo,#LB_you:hover{cursor:none;}
- #LB_ul{list-style: none;display: block;position:absolute;left: 50%; top: 80%;transform: translate(-50%,0);}
- /*#LB_ul li{float:left;text-align: center;background: gold;border-radius:50%;width: 20px;height: 20px;}*//*这行是小圆点的代码*/
- #LB_ul li{background: transparent;display: inline-block;padding-top:4px;box-sizing:border-box}/*这行是小图片的代码*/
- #LB_ul li+li{margin-left: 8px;}
- #LB_ul li:hover{cursor:pointer;background: goldenrod;}
- #LB_zuo{position: absolute; background: #fff;width: 10%; height: 100%;left:0;opacity: 0;}
- #LB_you{position: absolute; background: #fff;width: 10%; height: 100%;right:0;opacity: 0;}
- #LB_left,#LB_right{position: absolute;width: 50px;display: none;}
- #LB_left,#LB_right:hover{cursor:none;}
- </style>
- </head>
- <body>
- <div id="LB_div">
- <span id="LB_span">
- <img src="img/IMG_20160421_205146.jpg"/>
- <img src="img/IMG_20160421_205146.jpg"/>
- <img src="img/IMG_20160421_205146.jpg"/>
- <img src="img/IMG_20160421_205146.jpg"/>
- <img src="img/IMG_20160421_205146.jpg"/>
- <img src="img/IMG_20160421_205146.jpg"/>
- <img src="img/IMG_20160421_205146.jpg"/>
- <img src="img/IMG_20160421_205146.jpg"/>
- <img src="img/IMG_20160421_205146.jpg"/>
- </span>
- <p id="LB_zuo"></p>
- <p id="LB_you"></p>
- <img src="img/Cristal_Intense_072.png" id="LB_left"/>
- <img src="img/Cristal_Intense_069.png" id="LB_right"/>
- <ul id="LB_ul"></ul>
- </div>
- <script type="text/javascript" src="js/Xing_js.js" ></script>
- <script>
- var arr=document.querySelectorAll("#LB_span img");
- var div=document.querySelector("#LB_div");
- var span=document.querySelector("#LB_span");
- var zuo=document.querySelector("#LB_zuo");
- var you=document.querySelector("#LB_you");
- var ul=document.querySelector("#LB_ul");
- var jiantou_L=document.querySelector("#LB_left")
- var jiantou_r=document.querySelector("#LB_right")
- var b=0;
- if(arr.length!=0){//判断有没有图
- //根据所有图片长度设置span的长度
- span.style.width=(arr.length*arr[0].width)+"px";
- span.style.left="0px";
- span.style.transition="0.5s";
- //根据图片设置div的长宽
- div.style.width=arr[0].width+"px";
- div.style.height=arr[0].height+"px";
- // console.log(arr[0].width);
- //根据图片数量设置小圆点
- for(var i=1;i<=arr.length;i++){
- var li=document.createElement("li");
- var img=document.createElement("img");//中间这段是小图片的代码
- img.src=arr[i-1].src;
- img.setAttribute("style","width: "+parseInt(arr[0].width)*0.1+"px;height"+parseInt(arr[0].height)*0.1+"px;display: inline-block;")
- li.appendChild(img);
- li.setAttribute("onClick","yuan("+i+")");
- ul.appendChild(li);
- }
- //根据每个li的margin-left来设置ul的宽度
- var li_arr=document.querySelectorAll("li");
- for(var x=0;x<li_arr.length;x++){
- b+=parseInt(Xing_getCSS(li_arr[x],"marginLeft"));
- ul.style.width=parseInt(arr[0].width)*0.1*(arr.length)+b+"px";
- }
- //正span移动
- var i=0;
- function zheng(){
- i++;
- if(i==arr.length){i=0;};
- span.style.left="-"+arr[0].width*i+"px";
- biao(i);
- return i;
- }
- //负span移动
- function fu(b){
- b--;
- if(b==-1){b=arr.length-1;}
- span.style.left="-"+arr[0].width*b+"px";
- biao(b);
- return b;
- }
- //小圆点被单击
- function yuan(m){
- i=m-2;
- zheng();
- }
- //小圆点标亮
- function biao(d){
- var li=ul.childNodes;
- for(var x=0;x<arr.length;x++){
- if(x==d){
- li[x].style.background=Xing_RandomColor();
- }else{
- li[x].style.background="transparent"
- }
- }
- }
- //两键被单击时
- you.onclick=function(){
- i=zheng();
- }
- zuo.onclick=function(){
- i=fu(i);
- }
- zuo.onmouseover=function(){//左右两边的白边和指针跟随
- this.style.opacity="0.4";
- this.onmousemove=function(e){
- var x=e.layerX;
- var y=e.layerY;
- jiantou_L.style.display="block"
- jiantou_L.style.left=x+5+"px";
- jiantou_L.style.top=y+5+"px";
- }
- this.onmouseout=function(){
- jiantou_L.style.display="none"
- this.style.opacity="0";
- }
- }
- you.onmouseover=function(){
- this.style.opacity="0.4";
- this.onmousemove=function(e){
- var x=e.layerX;
- var y=e.layerY;
- jiantou_r.style.display="block"
- jiantou_r.style.left=x+5+"px";
- jiantou_r.style.top=y+5+"px";
- }
- this.onmouseout=function(){
- jiantou_r.style.display="none"
- this.style.opacity="0";
- }
- }
- //定时器
- var ding=setInterval("zheng(true)",1000);
- div.onmouseover=function(){//鼠标hover停止
- clearInterval(ding);
- div.onmouseout=function(){//鼠标移除
- ding=setInterval("zheng(true)",1000);
- }
- }
- }else{
- div.setAttribute("style","border: 1px solid #000;width:300px;height:300px;text-align: center;")
- div.innerHTML="请放入轮播图图片";
- }
- </script>
- </body>
- </html>
自封装js:
- //获取id---------------------------------------------------------
- function Xing_id(x){
- return document.getElementById(x);
- }
- //刷新页面---------------------------------------------------------
- function Xing_ShuaXinYeMian(){
- location.reload();
- }
- //选取class,注意返回数组---------------------------------------------------------
- function Xing_Class(x){
- return document.getElementsByClassName(x);
- }
- //封装随机颜色-------------------------------------------------------
- function Xing_RandomColor(){
- var sum="";
- var shuzu2=['a','b','c','d','e','f','0','1','2','3','4','5','6','7','8','9'];
- for(var i=1;i<=3;i++){
- var int2=parseInt(Math.random()*shuzu2.length);
- sum+=shuzu2[int2];
- }
- var sum2="#"+sum;
- sum="";
- return sum2; //返回随机的三位16进制rgb颜色
- }
- //随机验证码---------------------------------------------------------
- function Xing_RandomYanZhengMa(n){ //传入:要返回几个验证码数
- var str = 'abcdefghijklmnopqrstuvwxyz0123456789';
- var tmp = '';
- for(var i=0;i<n;i++)
- tmp += str.charAt(Math.round(Math.random()*str.length));
- return tmp; //返回数组
- }
- //封装选择质数的选择器---------------------------------------------------------
- function Xing_ZhiShuXuanZe(arguments){//传入数组,一个或多个
- var hehe=[];
- for(var i=0;i<arguments.length;i++){
- if(arguments[i]%2!=0&&arguments[i]%3!=0&&arguments[i]%5!=0&&arguments[i]!=1||arguments[i]==3||arguments[i]==2||arguments[i]==5&&arguments[i]!=0){
- hehe.push(arguments[i]);
- }
- }
- return hehe //返回所有质数的数组
- }
- //找字符串中倒数第n次出现的字符---------------------------------------------------
- function Xing_lastStr(char,y,str,b){//char:要找的字符,y:倒数第几位,//str:字符串
- var b=0;
- if(b==true){
- for(var i=str.length-1;i>=0;i--){
- if(str[i]==char){
- b++;
- if(b==y){
- return i;//返回其下标
- }
- }
- }
- }else{
- for(var i=0;i<str.length;i++){
- if(str[i]==char){
- b++;
- if(b==y){
- alert("正")
- return i;//返回其下标
- }
- }
- }
- }
- }
- //获取外部或头部css样式----------------------------------------------------
- function Xing_getCSS(BQ,gao){//BQ:传入的标签 gao:要找的样式
- return window.getComputedStyle(BQ)[gao]; //返回该样式的值
- }
描述:可以根据放入的图片大小自动适应大小,轮播图下方会有小缩略图
【JavaScript】轮播图的更多相关文章
- JavaScript 轮播图
这是我自己做的一个轮播图,大家可以看看 ,我还没进行优化.有改进的地方可以私聊 布局什么的你们自己搞定吧 <div class="slider" id="circl ...
- 练习:javascript轮播图效果
javascript轮播自动播放切换滑过停止,上一页/下一页 <!DOCTYPE html> <html lang="en"> <head> & ...
- JavaScript轮播图
需求: 鼠标移动到下标页码时,也转换到相对应的图片: 多张图片可以自动轮播: 鼠标移动至图片时,停止自动轮播: 可以手动左右调节: <!DOCTYPE html> <html lan ...
- 超详细的原生JavaScript轮播图(幻灯片)的制作
本次轮播图的制作主要分为3个部分,分别是:设置定时器自动轮播:点击左右切换按钮轮播:下方点击按钮轮播.具体实现步骤如下: (效果图) html部分代码如下: <div class="s ...
- JavaScript 轮播图实例
HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
- JavaScript 自适应轮播图
代码 话不多说,先上代码,方便复制粘贴.演示 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 带轮播图、导航栏、商品的简单html,以及轮播图下边数字随轮播图的改变而改变
---恢复内容开始--- 在做这个的时候,最不会的是中间轮播图下边的数字是如何实现转变的,后来加入了jQuery就能实现了. css部分: <style type="text/css& ...
- 自己用原生JS写的轮播图,支持移动端触摸滑动,分页器圆点可以支持mouseover鼠标移入和click点击,高手看了勿喷哈
自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...
- jquery 广告轮播图
轮播图 /*轮播图基本功能: * 1图片切换 * 1.1图片在中间显示 * 1.2图片淡入淡出 * 2左右各有一个按钮 * 2.1点击左按钮,图片切换上一张 * 2.2点击右按钮,图片切换下一张 * ...
- 【JavaScript】固定布局轮播图特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- PHP定界符<<<EOF
PHP定界符<<<EOF 一.为什么需要使用定界符: 因为在编程过程中难免会遇到用echo来输出大段的html和javascript脚本的情况, 如果用传统的输出方法 ——按字符串输 ...
- Node.js_Buffer 缓冲区
Buffer 缓冲区 虽然 JavaScript 支持未操作,但是并没有 二进制数据 的原生 node 引入了 Buffer 类,用于操作二进制数据 是 V8 引擎的扩展,实际上是对内存的直接分配 每 ...
- React组件传值
React的单向数据流与组件间的沟通. 首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则. 先介绍单向数据流吧. React单向数据流: React是单向数据流,数据主要从父 ...
- javascript的数组之slice()
slice()方法创建一个新数组,将原数组的部分元素拷贝到新数组,并将新数组返回,且原数组不会被修改. var animals = ['ant', 'bison', 'camel', 'duck', ...
- 嵌入式linux内存越界定位和解决 (转)
https://blog.csdn.net/meejoy/article/details/41729585 https://blog.csdn.net/killmice/article/details ...
- PAT甲级1049 Counting Ones【规律】
题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805430595731456 题意: 给定n,问0~n中,1的总个数 ...
- SAP中的一些简称及简要介绍
SAP-(System Applications and Products) 基础部分: R/3系统内核.数据库.支持各类平台的接口.ABAP(Advanced Business Applicatio ...
- Python---函数的相关知识点总结一:
1:定义函数 def printInfo(): print("I love Python!") #调用函数 #注意:函数定义完毕并不会被默认执行,只能通过调用的方式来让它执行 pr ...
- python 科学计算与可视化
一.Numpy 库 NumPy(Numerical Python) 是 Python 语言的一个扩展程序库,支持大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库. 引用: import ...
- 尽量避免把弹窗加在window上,可以考虑把弹窗封装到控制器里面
封装自定义弹窗,一般来说有两种选择: 在[[[UIApplication sharedApplication] delegate] window]上add自定义view: present一个模态Con ...