利用背景图片制作轮播（手自一体化）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title>背景图片做轮播+自动轮播</title>    <style type="text/css">        *, body {            margin: 0px;            padding: 0px;

        }

        #container {            margin-left: 200px;            background-color: darkgrey;            text-align: center;            width: 980px;

        }

        #top {            width: 980px;            height: 65px;            /**/            background-image: url("img/topbg.png");            background-size: auto;            background-position: center;            /**/        }

        #bottom {            width: 980px;            height: 65px;            background-image: url("img/bottombg.png");            background-size: auto;            background-position: center;            /**/

        }

        #banner {            width: 980px;            height: 330px;            background-image: url("img/1.jpg");            /*background-position: left;*/            /*background-repeat: no-repeat;*/            position: relative;            -webkit-transition: all 1.8s linear;

        }

        #banner-left {            background-image: url("img/images/btn_03.png");            width: 60px;            height: 60px;            position: absolute;            margin-top: 130px;            opacity: 0;            -webkit-transition: all 0.8s linear;

        }

        #banner-right {            background-image: url("img/images/btn_01.png");            width: 60px;            height: 60px;            position: absolute;            right: 0px;            margin-top: 130px;            opacity: 0;            -webkit-transition: all 0.8s linear;        }

        #banner:hover > #banner-right, #banner:hover > #banner-left {            opacity: 0.8;            /*background-image: url("../img/images/btn_02.png");*/

        }    </style></head><body><div id="container">    <div id="top"></div>    <div id="banner">        <div id="banner-left" onclick="Oclick(this)"></div>        <div id="banner-right" onclick="Oclick(this)"></div>    </div>    <div id="bottom"></div></div><script type="text/javascript">    var num = 1, TM=0;    var oBanner = document.getElementById("banner")    var Time1 = new Date();    var p=0;    function Oclick(Athis) {        TM = 1;        oBanner.style.backgroundPosition="490px";        clearInterval(B); //点击时清除自动轮播        if (Athis.id.substr(7, 1) == "r") {            num++;            p++;        }        else {            p--;            num--;        }        //限制轮播极限，以免越界        if (num > 8) {            num = 1;        }        if (num < 1) {            num = 5        }        oBanner.style.backgroundPosition=p*980+"px";//每次移动980 ，背景重复情况下制造推动的视觉效果        oBanner.style.backgroundImage = "url(‘img/" + num + ".jpg‘)";

    }    //定时调用函数，更换背   var B= setInterval(oAtuo,2000);    var num1=num;    function oAtuo() {

        num1++;

        if (num1 > 8) {            num1 = 1;        }

        oBanner.style.backgroundImage = "url(‘img/" + num1 + ".jpg‘)";

    }

</script></body></html>

时间： 2024-08-23 12:40:41

利用背景图片制作轮播（手自一体化）的相关文章

Hexo瞎折腾系列(2) - 添加背景图片轮播

动态背景图片插件jquery-backstretch jquery-backstretch是一款简单的jQuery插件,可以用来设置动态的背景图片,以下是官方网站的介绍. A simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element. 可以直接在页面中引入该插件的cdn来调用函数,也可以直接下载下来使用,这

背景图片轮播

1 <title></title> 2 <style type="text/css"></style> 3 </head> 4 <body> 5 6 <img src="img/1.jpg" alt="美女?" width="450" height="550" id="mypic"/> 7 8 <s

bootstrap大图轮播手机端不能手指滑动解决办法

网上看了很多解决办法,几乎本质都是一样的,都是引入一个滑动的js插件,加入一段js代码,即可生效,但是我试了hammer.js 和 touchSwipe.js 都不生效,也找不到原因是什么,目前在网上就找到 toucher.js 可以实现,贴到博客,留作备用: 1 <script> 2 $(function(){ 3 var myTouch = util.toucher(document.getElementById('carousel-index'));

jquery实现带左右箭头和数字焦点的图片轮播手写代码

以前图片轮播经常用网上的插件,然后想说自己也要认真看看,一步一步弄明白,所以就自己研究写了个图片轮播的代码,我自己觉得还算是挺简单的.如有改进的地方,欢迎你能帮我指出,共同进步. (ps:博客园如何上传代码就是可以供大家下载那种,一直没找到地方!) html: <html><body> <div class="main"> <div class="myslide"> <ul class="myslide

swiper入门之快速实现轮播--手机端

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-sca

jquery全屏背景轮播切换的登录页

很大气漂亮的注册登录页面模板,带背景全屏轮播JS特效,基于jQuery实现,可左右按钮实现背景全屏切换,全屏效果是基于背景图片平铺,插件支持自动切换播放. 演示下载 <!DOCTYPE html> <html> <head> <title>jquery带全屏背景图片轮播切换的注册登录页面-素材吧</title> <meta name="keywords" content="jQuery背景全屏轮播,JS

轮播制作

轮播是在各大网页首页经常能看到的效果,以下我给大家分享我是如何利用JS制作轮播的. 首先设置一个和图片一样宽高的DIV作为轮播显示窗口,然后加入要轮播的图片,代码如下: <div class="div1" style="position: relative"><div id="Div" style="position: absolute"> <img class="img1"

CSS3——animation的基础（轮播图）

作为前端刚入门的小菜鸟,只想记录一下每天的小收获对于animation动画 1.实现动画效果的组成: (1)通过类似Flash的关键帧来声明一个动画 (2)在animation属性中调用关键帧声明的动画 2.animation是一个复合属性包括很多的子属性: animation-name:用来指定一个关键帧动画的名称,这个动画名必须对应一个@keyframes 规则.CSS 加载时会应用animation-name 指定的动画,从而执行动画. animation-duration 用来设置动画

iOS UICollectionView 实现轮播图

利用UICollectionView 实现轮播图 : 具体代码如下, 简单粗暴, : <span style="font-size:24px;">// // ViewController.m // CollectionPhotosView // // Created by 帝炎魔 on 16/5/30. // Copyright © 2016年帝炎魔. All rights reserved. // /** * UICollectionView 实现轮播图的实现将定时器