轮播 | 易学教程

JavaScript之轮播图

阅读更多关于 JavaScript之轮播图

（1）html <div class="box" id="box"> <ul class="uls" id="uls"> <li><img src="img/one.jpg" alt=""></li> <li><img src="img/two.jpg" alt=""></li> <li><img src="img/three.jpg" alt=""></li> <li><img src="img/four.jpg" alt=""></li> <li><img src="img/five.jpg" alt=""></li> <li><img src="img/six.jpg" alt=""></li> </ul> <span id="left">左</span> <span id="right">右</span> <ol id="ols" class="ols"> <li class="selected"></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> </div> (2)css *{ margin: 0px; padding: 0px; } .box{ width: 520px; height: 280px; border: 1px solid #000; margin: 50px auto;

JavaScript编写无缝轮播图

阅读更多关于 JavaScript编写无缝轮播图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .banner{width:1000px;height:300px;margin: 20px auto;position: relative;overflow: hidden;} .imgbox img{width: 1000px;height:300px;position: absolute;left:1000px;top:0;} .imgbox img:nth-child(1){left:0;} .btns input{position: absolute;top:130px;width:40px;height:40px;border: none;background: rgba(200,200,200,0.5);} #left{left:0} #right{right:0} </style> </head> <body> <div class=

京东呼吸灯（轮播图）

阅读更多关于京东呼吸灯（轮播图）

布局： div.slider > ul + div.arrow ul > ll（*8）> a > img div.arrow > span.arrow-left + span.arrow-right 案例分析：当左箭头一点击，上一张图片渐渐的显示，其他图片渐渐的隐藏当右箭头一点击，下一张图片渐渐的显示，其他图片渐渐的隐藏关键代码 $(function(){ var count=0; $(".arrow-left").click(function(){ count--; if(count<0) { count=7; } $(.slider li).eq(count)。fadeIn().siblings().fadeOut(); }) $(".arrow-right").click(function(){ count++; if(count > 7) { count=0; } $(".slider li").eq(count).fadeIn().siblings().fadeOut(); }) }) 完整代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>京东商城</title> <style> * { margin: 0; padding: 0; list-style: none

第122天：移动端开发常见事件和流式布局

阅读更多关于第122天：移动端开发常见事件和流式布局

一、流式布局 1、什么是流式布局流式布局就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充，同时会设定最小宽度和最大宽度，适用于图片比较多的首页、门户、电商等。在这里我们以京东的M站为例进行说明：可以看到，在京东各个模块的主容器中，都设置了最大最小宽度和宽度100%，而在导航区块中，由于一行有5个小区块，所以设置了宽度为20%，使得小区块也能达到自适应的效果。 2、 viewport 在移动端用来承载网页的这个区域就是我们的视觉窗口 viewport ，这个区域可以设置高度宽度，可以按比例放大缩小，而且能设置是否允许用户自行缩放。 width ：设置的是 viewport 宽度，可以设置 device-width 特殊值。 initial-scale ：初始缩放比，大于0的数字，一般设置为1.0。 maximum-scale ：最大缩放比，大于0的数字。 minimum-scale ：最小缩放比，大于0的数字。 user-scalable ：用户是否可以缩放，yes或no（1或0）。  <meta name="viewport" content="width=device-width

JavaScript旋转木马轮播图

阅读更多关于 JavaScript旋转木马轮播图

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>旋转木马轮播图</title> <link rel="stylesheet" href="css/css.css"/> <script src="common.js"></script> <script> // var config = [ { width: 400, top: 20, left: 50, opacity: 0.2, zIndex: 2 },//0 { width: 600, top: 70, left: 0, opacity: 0.8, zIndex: 3 },//1 { width: 800, top: 100, left: 200, opacity: 1, zIndex: 4 },//2 { width: 600, top: 70, left: 600, opacity: 0.8, zIndex: 3 },//3 { width: 400, top: 20, left: 750, opacity: 0.2, zIndex: 2 }//4 ]; //页面加载的事件 window.onload = function () { var flag = true;//假设所有的动画都执行完毕 //获取所有的li标签循环遍历设置样式

Js 旋转木马轮播

阅读更多关于 Js 旋转木马轮播

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋转木马</title> <style> ul{ list-style: none; margin: 0; padding: 0; } a{ text-decoration: none; color: #000; } .wrap{ width: 1200px; margin: 0 auto; } .slide{ width: 1200px; height: 500px; /*background: pink;*/ position: relative; } .slide ul li{ position: absolute; } .slide ul li img{ width: 100%; height: 100%; } .arrow a{ position: absolute; text-align: center; line-height: 76px; top: 50%; height: 76px; width: 112px; margin-top: -56px; font-size: 40px; font-weight: bold; z-index: 100; background: rgba(0,0,0,0.5); color: #fff

旋转木马轮播图

阅读更多关于旋转木马轮播图

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>旋转木马轮播图</title> <link rel="stylesheet" href="css.css"/> </head> <body> <div class="wrap" id="wrap"> <div class="slide" id="slide"> <ul> <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li> <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li> <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li> <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li> <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li> </ul> <div class="arrow" id="arrow"> <a href="javascript:;"

旋转木马轮播图

阅读更多关于旋转木马轮播图

css部分 @charset "UTF-8"; /*初始化 reset*/ blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0} body,button,input,select,textarea{font:"Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;} ol,ul{list-style:none} a{text-decoration:none} fieldset,img{border:0;vertical-align:top;} a,input,button,select,textarea{outline:none;} a,button{cursor:pointer;} .wrap{ width:1200px; margin:100px auto; } .slide { height:500px; position: relative; } .slide li{ position: absolute; left:200px; top:0; } .slide li img{ width:100%;

jquery 图片轮播

阅读更多关于 jquery 图片轮播

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery图片自动切换</title> <script language="javascript" src="http://www.vihchina.net/Public/Js/jQuery/jQuery.js"></script> <style type="text/css"> *{ margin:0; padding:0; border:0; list-style:none} img{ display:block; border:0} body{ padding:50px;} .switch{ width:320px; height:280px; border:1px #CCCCCC solid; padding:3px;} .switch .pic_box{width:320px;

无缝轮播 + 小图标+文字介绍

阅读更多关于无缝轮播 + 小图标+文字介绍

html-----》 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> *{ padding:0px; margin:0px; border:0px; } li{ list-style-type:none; } a{ text-decoration:none; } #wrapper{ margin:0px auto; border:0px; padding:0px; } #show-area{ width:800px; height:450px; position:relative; margin:0px auto; overflow:hidden; } #show-area ul{ position:relative; width:5600px; height:450px; right:0; } #show-area ul li{ float:left; width:800px; } #controler{ width:130px; text-align:center; position:absolute; top:425px; left:370px; z-index:1; } #controler div{ height:15px;