bike修复图bug
This commit is contained in:
WindowBird
parent
a1de4e2436
commit
7e52a4dedf
|
|
@ -1,62 +1,32 @@
|
|||
<script lang="ts" setup>
|
||||
import {onMounted} from "vue";
|
||||
import {useHead} from "#app";
|
||||
|
||||
onMounted(() => {
|
||||
// 加载CSS样式文件
|
||||
loadCSSFiles()
|
||||
|
||||
// 加载JavaScript文件
|
||||
loadJSFiles()
|
||||
// 使用 Nuxt 3 的 useHead 来管理头部资源
|
||||
useHead({
|
||||
link: [
|
||||
{rel: 'stylesheet', href: '/cssBike/bootstrap.min.css'},
|
||||
{rel: 'stylesheet', href: '/cssBike/main2.css'},
|
||||
{rel: 'stylesheet', href: '/cssBike/index.css'},
|
||||
{rel: 'stylesheet', href: '/cssBike/public.css'}
|
||||
],
|
||||
script: [
|
||||
{src: '/jsBike/jquery.min.js'},
|
||||
{src: '/jsBike/minBanner.js'},
|
||||
{src: '/jsBike/news.js'}
|
||||
]
|
||||
})
|
||||
|
||||
const loadJSFiles = () => {
|
||||
const jsFiles = [
|
||||
'/jsBike/jquery.min.js',
|
||||
'/jsBike/minBanner.js',
|
||||
'/jsBike/news.js',
|
||||
onMounted(() => {
|
||||
// 延迟加载以确保DOM完全渲染
|
||||
|
||||
})
|
||||
|
||||
|
||||
]
|
||||
|
||||
jsFiles.forEach(src => {
|
||||
// 检查是否已经加载过该JS文件
|
||||
const existingScript = document.querySelector(`script[src="${src}"]`)
|
||||
if (!existingScript) {
|
||||
const script = document.createElement('script')
|
||||
script.src = src
|
||||
script.type = 'text/javascript'
|
||||
document.head.appendChild(script)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const loadCSSFiles = () => {
|
||||
const cssFiles = [
|
||||
'/cssBike/bootstrap.min.css',
|
||||
'/cssBike/main2.css',
|
||||
|
||||
|
||||
'/cssBike/index.css',
|
||||
'/cssBike/public.css',
|
||||
]
|
||||
|
||||
cssFiles.forEach(href => {
|
||||
// 检查是否已经加载过该CSS文件
|
||||
const existingLink = document.querySelector(`link[href="${href}"]`)
|
||||
if (!existingLink) {
|
||||
const link = document.createElement('link')
|
||||
link.rel = 'stylesheet'
|
||||
link.href = href
|
||||
link.type = 'text/css'
|
||||
document.head.appendChild(link)
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<view>
|
||||
<div>
|
||||
|
||||
|
||||
<!-- 首页巨幕 -->
|
||||
|
|
@ -280,7 +250,7 @@ const loadCSSFiles = () => {
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
BIN
public/images/minBanner-1.png
Normal file
BIN
public/images/minBanner-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 490 KiB |
BIN
public/images/minBanner-2.jpg
Normal file
BIN
public/images/minBanner-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
BIN
public/images/minBanner-3.jpg
Normal file
BIN
public/images/minBanner-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 400 KiB |
BIN
public/images/minBanner-4.jpg
Normal file
BIN
public/images/minBanner-4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
|
|
@ -1,63 +1,67 @@
|
|||
var p = $('#picplayer');
|
||||
var pics1 = [{url:'images/minBanner-1.png',link:'#',time:3000},{url:'images/minBanner-2.jpg',link:'',time:3000},{url:'images/minBanner-3.jpg',link:'',time:3000},{url:'images/minBanner-4.jpg',link:'',time:3000}];
|
||||
initPicPlayer(pics1,p.css('width').split('px')[0],p.css('height').split('px')[0]);
|
||||
var pics1 = [{url: '/images/minBanner-1.png', link: '#', time: 3000}, {
|
||||
url: '/images/minBanner-2.jpg',
|
||||
link: '',
|
||||
time: 3000
|
||||
}, {url: '/images/minBanner-3.jpg', link: '', time: 3000}, {url: '/images/minBanner-4.jpg', link: '', time: 3000}];
|
||||
initPicPlayer(pics1, p.css('width').split('px')[0], p.css('height').split('px')[0]);
|
||||
//
|
||||
//
|
||||
function initPicPlayer(pics,w,h){
|
||||
//选中的图片
|
||||
var selectedItem;
|
||||
//选中的按钮
|
||||
var selectedBtn;
|
||||
//自动播放的id
|
||||
var playID;
|
||||
//选中图片的索引
|
||||
var selectedIndex;
|
||||
//容器
|
||||
var p = $('#picplayer');
|
||||
var c = $('#piccontent');
|
||||
function initPicPlayer(pics, w, h) {
|
||||
//选中的图片
|
||||
var selectedItem;
|
||||
//选中的按钮
|
||||
var selectedBtn;
|
||||
//自动播放的id
|
||||
var playID;
|
||||
//选中图片的索引
|
||||
var selectedIndex;
|
||||
//容器
|
||||
var p = $('#picplayer');
|
||||
var c = $('#piccontent');
|
||||
|
||||
for(var i=0; i<pics.length; i++){
|
||||
//添加图片到容器中
|
||||
c.append('<a target="_blank"><img id="picitem'+i+'" style="display: none;z-index:'+i+'" src="'+pics[i].url+'" /></a>');
|
||||
// href="'+pics[i].link+'"
|
||||
}
|
||||
for (var i = 0; i < pics.length; i++) {
|
||||
//添加图片到容器中
|
||||
c.append('<a target="_blank"><img id="picitem' + i + '" style="display: none;z-index:' + i + '" src="' + pics[i].url + '" /></a>');
|
||||
// href="'+pics[i].link+'"
|
||||
}
|
||||
|
||||
//按钮容器，绝对定位在右下角
|
||||
var btnHolder = $('#picbtnHolder');
|
||||
var btns = $('#picbtns');
|
||||
//按钮容器，绝对定位在右下角
|
||||
var btnHolder = $('#picbtnHolder');
|
||||
var btns = $('#picbtns');
|
||||
|
||||
for(var i=0; i<pics.length; i++){
|
||||
//增加图片对应的按钮
|
||||
$('#picbtn'+i).data('index',i);
|
||||
$('#picbtn'+i).click( function(event){
|
||||
if(selectedItem.attr('src') == $('#picitem'+$(this).data('index')).attr('src')){
|
||||
return;
|
||||
}
|
||||
setSelectedItem($(this).data('index'));
|
||||
});
|
||||
}
|
||||
setSelectedItem(0);
|
||||
|
||||
//显示指定的图片index
|
||||
function setSelectedItem(index){
|
||||
for (var i = 0; i < pics.length; i++) {
|
||||
//增加图片对应的按钮
|
||||
$('#picbtn' + i).data('index', i);
|
||||
$('#picbtn' + i).click(function (event) {
|
||||
if (selectedItem.attr('src') == $('#picitem' + $(this).data('index')).attr('src')) {
|
||||
return;
|
||||
}
|
||||
setSelectedItem($(this).data('index'));
|
||||
});
|
||||
}
|
||||
setSelectedItem(0);
|
||||
|
||||
//显示指定的图片index
|
||||
function setSelectedItem(index) {
|
||||
selectedIndex = index;
|
||||
clearInterval(playID);
|
||||
if(selectedItem)selectedItem.fadeOut('fast');
|
||||
selectedItem = $('#picitem'+index);
|
||||
if (selectedItem) selectedItem.fadeOut('fast');
|
||||
selectedItem = $('#picitem' + index);
|
||||
selectedItem.fadeIn('slow');
|
||||
//
|
||||
if(selectedBtn){
|
||||
selectedBtn.children('span').css('backgroundColor','#D8D8D8');
|
||||
if (selectedBtn) {
|
||||
selectedBtn.children('span').css('backgroundColor', '#D8D8D8');
|
||||
// selectedBtn.css('color','#000');
|
||||
}
|
||||
selectedBtn = $('#picbtn'+index);
|
||||
selectedBtn.children('span').css('backgroundColor','#485766');
|
||||
selectedBtn = $('#picbtn' + index);
|
||||
selectedBtn.children('span').css('backgroundColor', '#485766');
|
||||
// selectedBtn.css('color','#fff');
|
||||
//自动播放
|
||||
playID = setInterval(function(){
|
||||
var index = selectedIndex+1;
|
||||
if(index > pics.length-1)index=0;
|
||||
playID = setInterval(function () {
|
||||
var index = selectedIndex + 1;
|
||||
if (index > pics.length - 1) index = 0;
|
||||
setSelectedItem(index);
|
||||
},pics[index].time);
|
||||
}, pics[index].time);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user