<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
body{
background: #CCCCCC;
}
#box{
width: 400px;
margin: 50px auto;
height: 426px;
overflow: hidden;
border: 1px solid yellow;
}
#top{
position: relative;
height: 320px;
}
#top li{
position: absolute;
top: 0;
left: 0;
}
#left{
position: absolute;
width: 200px;
top: 0;
left: 0;
height: 320px;
z-index: 1000;
}
#right{
position: absolute;
width: 200px;
height: 320px;
top: 0;
right: 0;
z-index: 1000;
}
#btn_l{
position: absolute;
background: url(img/btn.gif) no-repeat;
height: 60px;
width: 60px;
left: 10px;
top: 130px;
z-index: 1001;
opacity: 0;
filter: alpha(opacity=0);
}
#btn_r{
position: absolute;
background: url(img/btn.gif) no-repeat 0 -60px;
height: 60px;
width: 60px;
right: 10px;
top: 130px;
z-index: 1001;
opacity: 0;
filter: alpha(opacity=0);
}
#bottom{
position: relative;
}
#small_ul{
position: absolute;
top: 0;
left: 0;
}
#small_ul li{
float: left;
}
#small_ul img{
height: 90px;
width: 120px;
padding: 6px;
}
</style>
<script src="sport.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="box">
<ul id="top">
<div id="left"></div>
<div id="right"></div>
<a href="javascript:;" id="btn_l"></a>
<a href="javascript:;" id="btn_r"></a>
<li style="z-index: 1 ";><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/6.jpg"/></li>
</ul>
<div id="bottom">
<ul id="small_ul">
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/6.jpg"/></li>
</ul>
</div>
</div>
</body>
</html>
<script src="public.js"></script>
<script>
/*
实现思路
1、页面加载 大图自动切换 当中间的小图高亮显示时，小图开始自动轮播
显示的大图和下面高亮显示的小图有对应
2、 鼠标移入移出到大box上,启动和停止定时器
3、鼠标点击 左侧/右侧 按钮 大图自动切换 小图自动轮播 循环播放
4、鼠标移入 移出 点击到小图上
移入 ： 当前小图高亮
移出： 当前小图恢复高亮（但是注意如果是定时器控制的高亮小图 不恢复，仍然保持高亮状态）
点击 ： 大图 小图 自动轮播
*/
window.onload = function(){
//第一步 ：查找要操作的元素
var box = $id("box"), //大容器
oUl = $id("small_ul"),//运动的ul
smallImg = oUl.children,//所有小图
bigImg = $id("top").getElementsByTagName("li"),//所有大图
leftDiv = $id("left"),//左侧div
rightDiv = $id("right"),//右侧div
leftBtn = $id("btn_l"),//左按钮
rightBtn = $id("btn_r"),//右按钮
len = smallImg.length,//小图个数
timer = null,//控制轮播定时器
index = 0;//控制小图和大图的对应
//第二步 ： 控制轮播函数
autoPlay();//页面打开后 初始化特效
function autoPlay(){
//排他
//所有大图隐藏 小图透明度50%
for( var i = 0 ; i < len ; i++ ){
bigImg[i].style.display = "none";
sport( smallImg[i] , { opacity : 50 } );
}
//边界处理
if( index == len ){
index = 0;
}
//控制index对应的小图和大图高亮显示
bigImg[index].style.display = "block";
sport( smallImg[index] , { opacity : 100 } );
//根据不同条件 控制ul的移动
if( index == 0 ){
sport( oUl , { left : 0 } );
}else if( index == len - 1 ){
sport( oUl , { left : -smallImg[0].offsetWidth*3 } );
}else{
sport( oUl , { left : -smallImg[0].offsetWidth*(index-1) } );
}
}
//第三步 ：使用定时器完成自动轮播
timer = setInterval( function(){
index++;
autoPlay();
},2000 )
//第四步 ： 由于运动的过程中 小图区会有留白 说明 ul的宽度 不够导致的
//设置运动的ul的宽度
oUl.style.width = len * smallImg[0].offsetWidth + "px";
//第五步 ： 鼠标操作大容器 启动和停止定时器
box.onmouseenter = function(){
clearInterval( timer );
}
box.onmouseleave = function(){
timer = setInterval( function(){
index++;
autoPlay();
},2000 )
}
//第六步 ： 鼠标移入到左侧 显示左侧箭头 离开左侧部分，隐藏左侧箭头
//当鼠标离开左侧容器时 会导致按钮消失 按钮不能被点击 所以要为按钮添加鼠标移入移出事件
leftDiv.onmouseenter = leftBtn.onmouseenter = function(){
sport( leftBtn , { opacity : 100 } );
}
leftDiv.onmouseleave = leftBtn.onmouseleave = function(){
sport( leftBtn , { opacity : 0 } );
}
//右侧移入和移出 同左侧操作
rightDiv.onmouseenter = rightBtn.onmouseenter = function(){
sport( rightBtn , { opacity : 100 } );
}
rightDiv.onmouseleave = rightBtn.onmouseleave = function(){
sport( rightBtn , { opacity : 0 } );
}
//第七步 ：点击左右按钮 控制大图和小图的轮播
rightBtn.onclick = function(){
index++;
autoPlay();
}
leftBtn.onclick = function(){
index--;
if( index == -1 ){
index = len - 1;
}
autoPlay();
}
//第八步 ：小图的事件操作 移入 移出 点击
for( let i = 0 ; i < len ; i++ ){
smallImg[i].onclick = function(){
//获取当前点击的小图的下标 赋值给index
index = i;
autoPlay();
}
smallImg[i].onmouseenter = function(){
//当前操作的小图高亮显示
sport( this , { opacity : 100 } );
}
smallImg[i].onmouseleave = function(){
//离开时 小图恢复
//获取当前操作的小图的下标
if( index != i ){ //说明当前操作的小图是高亮的 和大图对应
sport( this , { opacity : 50 } );
}
}
}
}
</script>
引入的public.js文件
//函数功能根据id查找页面元素
function $id(id){
return document.getElementById(id);
}
//定义一个函数 功能是创建某个元素
function create(ele){
return document.createElement(ele);
}
//根据标签查找页面元素
function $tagName(tagname){
return document.getElementsByTagName(tagname);
}
//写一个函数 功能获取任意区间值公式
function rand(min,max){
return Math.round( Math.random()*(max-min) + min );
}
//获取六位十六进制颜色值
function getColor(){
var str = "0123456789abcdef";
var color = "#";//拼接六位十六进制字符
for( var i = 1 ; i <= 6 ; i++ ){
color += str.charAt( rand(0,15) );
}
return color;
}
function dataToString( now , sign ){
//sign表示日期的拼接符号
//设置sign的默认值 如果用户传递sign参数 就使用用户传递的参数
//否则就使用默认值
sign = sign || "-";
//获取日期的年月日
var y = now.getFullYear();
var m = now.getMonth() + 1;
var d = now.getDate();
//获取日期的时分秒
var h = toTwo( now.getHours() );
var mi = toTwo( now.getMinutes() );
var s = toTwo( now.getSeconds() );
//定义自己的时间格式
var str = y + sign + m + sign + d + " " + h + ":" + mi + ":" + s;
return str;
}
//定义一个函数 功能是在小于10的数字前拼接0
function toTwo( num ){
return num < 10 ? "0" + num : num;
}
//定义一个时间差函数
function diff(start,end){
return (end.getTime() - start.getTime())/1000;
}
//字母数字验证码
function yzm(){
var str = "";//用来存放验证码
for( var i = 1 ; i <= 6 ; i++ ){
var code = rand(48,122);
if( code >= 58&&code <= 64 ||code >= 91 && code <= 96 ){
i--;
}else{
var ch = String.fromCharCode( code );
str += ch;
}
}
//console.log( str );
return str;
}
//碰撞
function pz(obj1,obj2){
var L1 = obj1.offsetLeft;
var R1 = obj1.offsetLeft + obj1.offsetWidth;
var T1 = obj1.offsetTop;
var B1 = obj1.offsetHeight + obj1.offsetTop;
var L2 = obj2.offsetLeft;
var R2 = obj2.offsetLeft + obj2.offsetWidth;
var T2 = obj2.offsetTop;
var B2 = obj2.offsetHeight + obj2.offsetTop;
//如何碰不上 返回false 碰上返回true
if( R1<L2||L1>R2||B1<T2||T1>B2 ){//碰不上
return false;
}else{
return true;
}
}
引入的sport.js文件
//获取CSS样式
function getStyle(obj,attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,1)[attr];
}
//完美运动
function sport(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var stop = true; //检测停止的开关
for(var attr in json){
//获取初值
var cur = 0;
if(attr == "opacity"){
cur = parseInt(parseFloat(getStyle(obj,attr)) * 100);
}else{
cur = parseInt(getStyle(obj,attr));
}
//设置速度
var speed = (json[attr] - cur) / 8;
speed = speed > 0? Math.ceil(speed) : Math.floor(speed);
//检测停止
if(json[attr] != cur){
stop = false;
}
//运动
if(attr == "opacity"){
obj.style.opacity = (cur + speed ) / 100;
obj.style.filter = "alpha(opacity=" + (cur + speed) + ")";
}else{
obj.style[attr] = cur + speed + "px";
}
}
if(stop){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30);
}
原文地址：https://www.cnblogs.com/Leslie-Cheung1584304774/p/10529464.html
时间： 2024-10-01 07:05:06