轮播图

来源：互联网发布：linux开源代码编辑：程序博客网时间：2024/06/13 22:16

css+HTML+Js:

<!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>轮播图</title><script src="js/jquery-1.8.3.min.js"></script><script src="js/slide.js"></script><style>     /*<!--美化页面元素，形成最终页面效果-->*/ *{margin:0;padding:0;  } /*轮播图水平居中显示*/ #focus{ width:730px; height:450px; margin:50px auto; position:relative; overflow: hidden; }#page-con li{display:inline-block;font-size:12px;/*border:1px solid red;*/width:18px;height:18px;line-height:18px; /*以百分比定义圆角形状*/ border-radius:50%; color:white; background-color:#3e3e3e; /*鼠标形状由箭头变成小手形状*/ cursor:pointer;}#page-con{ /*border:1px solid red;*/ position: absolute;            bottom:10px;            text-align: center;            width: 100%;}img{display: none;}    </style></head><body>    <div id="focus">        <img src="img/focus.jpg"/>        <img src="img/focus1.jpg"/>        <img src="img/focus2.jpg"/>        <img src="img/focus3.jpg"/>        <img src="img/focus4.jpg"/>                <ul id="page-con">            <li>1</li>            <li>2</li>            <li>3</li>            <li>4</li>            <li>5</li>        </ul>    </div></body></html>

js:

// JavaScript Document/**文档创建于2017年8月10日*//** * Created by kgc on 2017/8/10. *///轮播代码$(function(){    //设置轮播图片的下标    var page = -1;    var stop = true; //设置轮播是否要停止或继续    //定义轮播函数    function slide(){        if(stop){            page++;            //到了最后一张，再从第一张重新开始轮播            if(page == 5){                page  = 0;            }            //首先把所有图片都隐藏，同时所有按钮都是灰色未选中状态            $("#focus img").fadeOut(200);            $("#page-con li").css({"background":"#3e3e3e"});            //单独让下标为page的那张图片显示出来，同时让page按钮选中状态            $("#focus img").eq(page).fadeIn();            $("#page-con li").eq(page).css({"background":"#b61b1f"});        }        setTimeout(slide,1000);    }    slide();    //鼠标悬停和离开效果    $("#focus").mouseover(function(){        //停止轮播        stop = false;    }).mouseout(function(){        //继续轮播        stop = true;    });});

代码中用的jquery库没有上传，需要自己去官网下载

jquery-1.10.0.min.js下载地址：https://code.jquery.com/jquery-1.10.0.min.js

阅读全文

0 0