轮播图

最新推荐文章于 2022-11-04 09:23:03 发布

原创最新推荐文章于 2022-11-04 09:23:03 发布 · 490 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

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;
    });

});