【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 ...
随机推荐
- Hibernate 单向一对多映射
单向 n-1: 单向 n-1 关联只需从 n 的一段访问 1 的一端 此处 Order 类和 Customer 类,其中 Order 类需要引用 Customer 类 代码: public class ...
- 新浪云SAE 关于部分函数不能使用的做法
例如:file_put_contents("test.txt","Hello World. Testing!"); 可以这样写: file_put_conten ...
- helm-chart５，模板和访问文件
提供的一些声明和使用命名模板段的操作: define在模板中声明一个新的命名模板 template导入一个命名模板 block 声明了一种特殊的可填写模板区域 首先,模板名称是全局的.如果声明两个具有 ...
- Java_图片切片
package com.creditease.fetch.credit.util.similarity; import java.awt.image.BufferedImage; import jav ...
- Pandora 生成 Token
生成 token 打数据到仓库 通过 api 签名工具实现 最后通过curl -XPOST -H "Content-Type: application/json" -H " ...
- Jenkins-权限管理
一.要对用户进行管理首先下载一个权限管理插件(系统管理>>>插件管理) Role-based Authorization Strategy 系统管理 >>>全局 ...
- 论Photoshop的正确安装姿势
Adobe Photoshop 俗称 PS 专业的平面设计软件之一,是Adobe公司最最最牛逼的软件之一.入门很容易,但是想掌握高超的修图,仅靠后天99%的努力是没用的,设计这个东西,讲到底需要的是灵 ...
- js的作用域题
---恢复内容开始--- 1. var a = 12 function fn() { console.log(a) var a = 45; console.log(a) } fn() 2. funct ...
- | dp-the Treasure Hunter
题目: A. Mr. Kitayuta, the Treasure Hunter time limit per test 1 second memory limit per test 256 mega ...
- Sun SPARC Enterprise M5000 启动步骤
1.串口线与笔记本连接(需在笔记本上安装串口线的驱动程序,usb口接笔记本,网线水晶头接M5000)2.接通电源.此时XSCF卡充电,自检,前面板XSCF等闪烁.3.登录超级终端,注意波特率要跟主机匹 ...