【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 ...
随机推荐
- 前端性能优化 —— 添加Expires头
简要:添加Expires头能有效的利用浏览器的缓存能力来改善页面的性能,能在后续的页面中有效避免很多不必要的Http请求,WEB服务器使用Expires头来告诉Web客户端它可以使用一个组件的当前副本 ...
- NOIP-铺地毯
题目描述 为了准备一个独特的颁奖典礼,组织者在会场的一片矩形区域(可看做是平面直角坐标系的第一象限)铺上一些矩形地毯.一共有n张地毯,编号从1到n.现在将这些地毯按照编号从小到大的顺序平行于坐标轴先后 ...
- 转 mysql Next-Key Locking
原文:http://dev.mysql.com/doc/refman/5.5/en/innodb-next-key-locking.html 14.5.2.5 Avoiding the Phantom ...
- Promise 用法
Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方法,原型上有then.catch等同样很眼熟的方法. 那就new一个 Promise的构造函数接收一个参数,是 ...
- JMeter参数化中存在逗号的解决方法
在Jmeter中通过CSV Data Set Config进行参数化时,如果参数化数据中存在逗号(,)我们可以通过一下方式进行设置 如何存在中文乱码,可以设置file encoding:gb2312
- 使用ajax分页查询
controller: /** * 查询所有用户/查找指定用户 * 分页+搜索 * */@RequestMapping("/findClientBySize")@ResponseB ...
- jQuery实现select级联
使用Html5的数据属性(data-*)Map级联关系,代码如下: <!DOCTYPE html> <html> <head> <title>Selec ...
- JS操作字符串
JS操作字符串 1.函数:split() 把字符串按分隔符分割成数组. 语法:字符串.split(separator,limit); separator:分隔符. 功能:使用一个指定的分隔符把一个字符 ...
- go/wiki/MutexOrChannel Golang并发：选channel还是选锁？
https://mp.weixin.qq.com/s/JcED2qgJEj8LaBckVZBhDA https://github.com/golang/go/wiki/MutexOrChannel M ...
- [strongswan] strongswan METHOD宏
使用METHOD宏的函数定义: METHOD(message_t, get_message_id, uint32_t, private_message_t *this) { return this-& ...