引用jQuery制作好看的轮播图js

要转行的阿江因为实在卷不过捏

已于 2022-07-04 13:01:35 修改

阅读量261

点赞数 1

文章标签： javascript jquery 前端 html

于 2022-07-03 20:14:12 首次发布

本文链接：https://blog.csdn.net/qq_59765516/article/details/125587158

版权

我是一名大二的软件工程系的学生，我将我在实训时制作网页的轮播图的核心代码分享给大家。

html片段：

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="./Style/init.css" />
<link rel="stylesheet" type="text/css" href="./Style/common.css" />
<link rel="stylesheet" type="text/css" href="./Style/index.css" />
<script type="text/javascript" src="./Js/jquery.js"></script>
<script type="text/javascript" src="./Js/index.js"></script>
</head>
    <body>
        <div id="content">
            <div class="main">
                <div class="slider">
                    <div class="v">
                        <div class="wrap">
                            <a href="#"><img src="./Images/p1.jpg" width="1200" /></a>
                            <a href="#"><img src="./Images/p2.jpg" width="1200" /></a>
                            <a href="#"><img src="./Images/p3.jpg" width="1200" /></a>
                            <a href="#"><img src="./Images/p4.jpg" width="1200" /></a>
                            <a href="#"><img src="./Images/p5.jpg" width="1200" /></a>
                            <a href="#"><img src="./Images/p6.jpg" width="1200" /></a>
                            <a href="#"><img src="./Images/p7.jpg" width="1200" /></a>
                            <a href="#"><img src="./Images/p8.jpg" width="1200" /></a>
                            <a href="#"><img src="./Images/p9.jpg" width="1200" /></a>
                            <a href="#"><img src="./Images/p10.jpg" width="1200" /></a>
                        </div>
                        <div class="thumbpics">
                            <ul>
                                <li><img src="./Images/p1.jpg" width="110" /></li>
                                <li><img src="./Images/p2.jpg" width="110" /></li>
                                <li><img src="./Images/p3.jpg" width="110" /></li>
                                <li><img src="./Images/p4.jpg" width="110" /></li>
                                <li><img src="./Images/p5.jpg" width="110" /></li>
                                <li><img src="./Images/p6.jpg" width="110" /></li>
                                <li><img src="./Images/p7.jpg" width="110" /></li>
                                <li><img src="./Images/p8.jpg" width="110" /></li>
                                <li><img src="./Images/p9.jpg" width="110" /></li>
                                <li><img src="./Images/p10.jpg" width="110" /></li>
                            </ul>
                        </div>
                    </div>
                </div>         
    </body>
</html>

js片段：

该片段要和jQuery结合使用

$(function () {
	var _left = 1200;
	var left = -_left;
	function mainShow() {
		if(left == -10800 || left == 0) {
			_left = -_left;
		}
		$('.wrap').stop().animate({'left':left},1000);
		left = left - _left;
		timer = setTimeout(mainShow,6000);
	}
	mainShow();
	$('div.v').hover(
		function() {
			clearTimeout(timer);
			$('.thumbpics').fadeIn();
		},
		function() {
			$('.thumbpics').fadeOut();
			timer = setTimeout(mainShow,6000);
		}
	);
	$('.thumbpics li').mouseover(function () {
		var key = $(this).parent().find('li').index(this);
		left = key * -1200;
		clearTimeout(timer);
		$('.wrap').stop().animate({'left':left},1000);
		if(left == -10800) {
			left = -10800 + 1200;
		}
		if(left == 0) {
			left = -1200;
		}
		$(this).parent().find('li').css('background','none');
		$(this).parent().find('li').get(key).style.background = '#DCD0A1';
	});
});

效果：

这样就使网页添加了一些风采