小苹果 html,定时轮播.html

/* 放大镜 */

.xiala2 {

width: 1300px;

height: 210px;

float: left;

margin-left: 310px;

margin-top: 5px;

position: absolute;

}

.shrkb {

width: 1100px;

height: 35px;

background-color: black;

}

.shrk {

width: 650px;

height: 26px;

opacity: 1;

margin-top: 2px;

margin-left: 5px;

float: left;

}

.sousuo2 {

width: 685px;

height: 170px;

background: white;

}

.xskbox {

background: black;

width: 670px;

height: 30px;

margin-left: -25px;

margin-top: 10px;

float: left;

}

.guanb {

width: 30px;

height: 30px;

margin-left: 820px;

margin-top: -32px;

float: left;

}

.guanb:hover {

opacity: 0.4;

cursor: pointer;

}

/*其他*/

.bg1{float: left;position:absolute;margin-left: 740px;margin-top:500px;width: 50px;height: 3px;background: #dddddd;z-index:100;}

.line1{height:100%;width:0;position:relative;background-color:#808080;}

.bg2{float: left;position:absolute;margin-left: 800px;margin-top: 500px;width: 50px;height: 3px;background: #dddddd;z-index:100}

.line2{height:100%;width:0;position:relative;background-color:#808080;}

.bg3{float: left;position:absolute;margin-left: 860px;margin-top: 500px;width: 50px;height: 3px;background: #dddddd;z-index:100}

.line3{height:100%;width:0;position:relative;background-color:#808080;}

.bg1,.bg2,.bg3{cursor: pointer}

#stop{width:50px;}

div {

float: left;

width: 1582px;

overflow: hidden;

}

span {

position: relative;

float: left;

width: 7910px;

height: 500px;

margin-top: -10px;

}

a {

text-align: center;

float: left;

margin-left: 100px;

color: white;

margin-top: 10px;

}

a:hover {

opacity: 0.4;

cursor: pointer;

}

.daohang {

width: 1582px;

height: 40px;

background: #303030;

}

.dhbox {

width: 1200px;

height: 40px;

float: left;

text-align: center;

margin-left: 200px;

}

.img {

float: left;

margin-top: 8px;

}

.img:hover {

opacity: 0.4;

cursor: pointer;

}

.bnbox {

width: 1582px;

height: 500px;

float: left;

z-index:90;}

.buttonbox {

margin-left: 800px;

margin-top: -40px;

float: left;

position: relative;

}

#div {

width: 260px;

height: 300px;

border: solid 1px gainsboro;

float: left;

margin-left: 1170px;

margin-top: 45px;

position: absolute;

}

.img1 {

opacity: 1

}

.img1:hover {

opacity: 0.6;

cursor: pointer;

}

.img2 {

opacity: 1

}

.img2:hover {

opacity: 0.6;

cursor: pointer;

}

.gwbox1 {

width: 253px;

height: 93px;

border-bottom: solid 1px #e4e4e4;

float: left;

margin-left: 18px;

}

.gwbox {

width: 253px;

height: 47px;

border-bottom: solid 1px #e4e4e4;

float: left;

margin-left: 18px;

}

.xiala {

color: #adadad;

float: left;

margin-left: 70px;

margin-top: 40px;

font-size: 14px;

}

.gwdbs {

color: #1473bc;

float: left;

margin-top: 17px;

font-size: 13px;

margin-left: 30px;

}

.gwdbs:hover {

border-bottom: solid 1px #1473bc;

cursor: pointer;

}

.gwt {

float: left;

margin-top: 15px;

}

.gwt:hover {

opacity: 1;

cursor: pointer;

}

.you {

background-repeat: no-repeat;

width: 300px;

height: 300px;

float: left;

margin-left: 1410px;

margin-top: 240px;

position: absolute;

opacity: 0.01;

}

.zuo {

background-repeat: no-repeat;

width: 300px;

height: 300px;

float: left;

margin-left: 70px;

margin-top: 240px;

position: absolute;

opacity: 0.01;

}

.zuo:hover {

opacity: 0.6;

cursor: pointer;

}

.you:hover {

opacity: 0.6;

cursor: pointer;

}

.other {}

无标题文档

line()

function line(){

$(".line1").animate({width:10},950,"linear").

animate({width:25},950,"linear").

animate({width:50},950,"linear",function(){

$(".line2").animate({width:10},950,"linear").

animate({width:25},950,"linear").

animate({width:50},950,"linear",function(){

$(".line3").animate({width:10},950,"linear").

animate({width:25},950,"linear").

animate({width:50},950,"linear",function(){

//效果从开始位置循环

setTimeout(line,10)

$(".line1").css({width:0})

$(".line2").css({width:0})

$(".line3").css({width:0})

})

}

Mac

iPad

iPhone

Watch

Music

技术支持

var n = 0

function run() {

if(n < 3) {

n++

} else {

n = 1;

$("span").css({

left: 0

})

}

$("span").stop(true, true).animate({

left: -1582 * n

}, 500)

}

var q = setInterval(run, 3000)

$("div").click(

function() {

clearInterval(q) //点按钮停止之前的定时器

n = $("div").index(this)

$("span").stop(true, true).animate({

left: -1582 * n

}, 500)

setTimeout(function() { //点按钮后4秒中后重新定时

clearInterval(q) //避免连续点击按钮重复定时

q = setInterval(run, 2000)

}, 1000) //4秒

})

你的购物袋是空的

购物袋

订单

账户

$(document).ready(function() {

$("#div").hide();

$(" .img1").click(function() {

$("#div").toggle();

});

})

$(document).ready(function() {

$("div").mouseover(function() {

$("this").fadeIn();

});

购物袋

$(document).ready(function() {

$(".xiala2").hide()

$(".img2").click(function() {

$(".xiala2").show()

})

$(".guanb").click(function() {

$(".xiala2").hide()

})

一键复制

编辑

Web IDE

原始数据

按行查看

历史

小苹果 html,定时轮播.html相关推荐

web前端项目详解：OPPO首页进度条特效（定时轮播）
web前端项目详解:OPP首页进度条特效(定时轮播) 知识点:布局结构分析,定位运用,页面兼容性问题,Jquery的基础运用(修改盒子样式,动画方法,简单算法,淡入淡出方法,定时器方法)代码结构效果 ...
定时轮播Echarts造成内存泄漏致使浏览器崩溃问题
提示:定时轮播Echarts造成内存泄漏致使浏览器崩溃问题文章目录前言一.原因二.解决办法三.辅助工具前言一.原因 1.echarts图未彻底删除: 2.setTimeout和setIn ...
仿百度壁纸客户端（二）——主页自定义ViewPager广告定时轮播图
仿百度壁纸客户端(二)--主页自定义ViewPager广告定时轮播图百度壁纸系列仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment 仿百度壁纸客户端( ...
针对淡入淡出的定时轮播效果js
如果不使用jquery的fadeIn和fadeOut的接口和不适用animate情况下,如果要做用js实现淡入淡出轮播效果,我所想到的办法就是使用css3新特性transition(注意好兼容性). ...
js小案例：定时轮播图
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
用jq实现移动端滑动轮播以及定时轮播效果
Html的代码: <div class="carousel_img"><div class="car_img" style="bac ...
jQuery实现图片定时轮播
参考出处:http://www.jb51.net/article/76153.htm <!DOCTYPE html> <html><head><meta ch ...
java实现选项卡定时轮播_原生js面向对象编程-选项卡(自动轮播)
原生js面向对象编程-选项卡(自动轮播) }#div1 input{color:#fff;width:100px;height:40px;background:darkseagreen;border: ...
html轮播图原理,30_用js实现一个轮播图效果，简单说下原理
一.原理将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局如下所示: 轮播图 1 2 3 4 5 < > 只有五张图片,却使用7张来轮播,这 ...

小苹果 html,定时轮播.html

小苹果 html,定时轮播.html相关推荐

最新文章

热门文章